US20120297280A1 - Web Page Hot Spots - Google Patents
Web Page Hot Spots Download PDFInfo
- Publication number
- US20120297280A1 US20120297280A1 US13/564,255 US201213564255A US2012297280A1 US 20120297280 A1 US20120297280 A1 US 20120297280A1 US 201213564255 A US201213564255 A US 201213564255A US 2012297280 A1 US2012297280 A1 US 2012297280A1
- Authority
- US
- United States
- Prior art keywords
- image
- subset
- digital image
- pixels
- instruction
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Abandoned
Links
- 238000000034 method Methods 0.000 claims abstract description 81
- 230000004044 response Effects 0.000 claims description 21
- 230000009471 action Effects 0.000 claims description 19
- 230000005540 biological transmission Effects 0.000 claims description 6
- 238000009877 rendering Methods 0.000 claims description 6
- 230000008569 process Effects 0.000 abstract description 15
- 230000000875 corresponding effect Effects 0.000 description 16
- 238000010586 diagram Methods 0.000 description 8
- 238000004590 computer program Methods 0.000 description 6
- 230000008901 benefit Effects 0.000 description 5
- 230000006870 function Effects 0.000 description 4
- 230000000873 masking effect Effects 0.000 description 4
- 238000003491 array Methods 0.000 description 2
- 239000003086 colorant Substances 0.000 description 2
- 230000009467 reduction Effects 0.000 description 2
- 206010020751 Hypersensitivity Diseases 0.000 description 1
- 238000006243 chemical reaction Methods 0.000 description 1
- 230000006835 compression Effects 0.000 description 1
- 238000007906 compression Methods 0.000 description 1
- 239000000284 extract Substances 0.000 description 1
- 230000006872 improvement Effects 0.000 description 1
- 238000009434 installation Methods 0.000 description 1
- 230000001788 irregular Effects 0.000 description 1
- 230000007246 mechanism Effects 0.000 description 1
- 230000000717 retained effect Effects 0.000 description 1
- 239000004065 semiconductor Substances 0.000 description 1
- 230000001960 triggered effect Effects 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
Definitions
- Such functionality is often provided using an “image map,” which defines an outline of each of the regions within the image which may be selected by the user.
- the image map would include, for each state, a set of coordinates defining the vertices of a polygon which form the outline of the state.
- Each such polygon defines a “hotspot” within the image which may be selected by the user to select the corresponding state.
- Associated with each hotspot may be instructions defining the action to be taken in response to the user's selection of the hotspot. Such instructions may, for example, take the form of a hyperlink to a location containing more information about the corresponding state.
- an image map is to enable multiple regions (hotspots) within a single image to be linkable to different locations (or to trigger other actions) without requiring the image to be divided into separate image files. This simplifies the process of creating user-friendly web pages containing multiple hotspots within a single image.
- An image map designer creates an image map for use with an image.
- the image map contains one or more hotspots, each of which specifies a set of pixels which may be non-contiguous and non-polygonal.
- the image map designer may create the image map using image processing software that facilitates creation of non-contiguous and non-polygonal image maps. Multiple versions of the image map may be created, each for use with a different magnification of the image.
- the image maps are stored in a compact format, which may be transmitted efficiently from a server to a client. Data contained within the image map facilitates the process of determining whether the client user's mouse pointer is within any of the hotspots, and the process of applying the image map to the image when rendered at different magnifications.
- One embodiment of the present invention is directed to a computer-implemented method comprising: (A) receiving a first instruction from a first user to select a first portion of a first digital image, the first digital image comprising a plurality of pixels; (B) in response to the first instruction, selecting a first subset of the plurality of pixels in the first digital image; (C) storing a record of the first subset in an image map collection data structure; (D) transmitting the image map collection data structure and the first digital image to a client; (E) identifying a current location of a user cursor within a rendering of the first digital image at the client; (F) determining whether the current location is within the first subset; and (G) if the current location is within the first subset, taking a first predetermined action associated with the first subset.
- FIG. 1 is a dataflow diagram of a system for creating one or more image maps according to one embodiment of the present invention
- FIG. 2 is a flowchart of a method performed by the system of FIG. 1 according to one embodiment of the present invention
- FIG. 3 is a dataflow diagram of a system for generating portion channels and bounding areas for hotspots in image maps according to one embodiment of the present invention
- FIG. 4 is a flowchart of a method performed by the system of FIG. 3 according to one embodiment of the present invention.
- FIG. 5 is a dataflow diagram of a system for creating an image map collection data structure according to one embodiment of the present invention.
- FIG. 6 is a flowchart of a method performed by the system of FIG. 5 according to one embodiment of the present invention.
- FIG. 7 is a dataflow diagram of a system for enabling the use of hotspots by a user according to one embodiment of the present invention.
- FIG. 8 is a flowchart of a method performed by the system of FIG. 7 according to one embodiment of the present invention.
- FIG. 1 a dataflow diagram is shown of a system 100 for creating one or more image maps according to one embodiment of the present invention.
- FIG. 2 a flowchart is shown of a method 200 performed by the system of FIG. 1 according to one embodiment of the present invention.
- a user 102 referred to in FIG. 1 as an “image map designer,” provides input 106 selecting one or more portions of an image 104 ( FIG. 2 , step 202 ).
- the image map designer 102 may provide the input 106 in any of a variety of ways.
- the image map designer 102 may use image processing software, such as Adobe Photoshop, to select one or more portions of the image.
- image processing software such as Adobe Photoshop
- Such software includes a variety of tools for selecting portions of an image. Any such tools may be used by the image map designer 102 to select portions of the image 104 .
- the image map designer 102 may use a rectangle selection tool to select a rectangular portion of the image 104 , an ellipse selection tool to select an elliptical portion of the image, a color selection tool to select all pixels having a particular color or range of colors, a pixel selection tool to select one or more pixels within the image 104 , or a “magic wand” selection tool to select all contiguous pixels having the same color or range of colors starting from the location of the mouse pointer.
- a rectangle selection tool to select a rectangular portion of the image 104
- an ellipse selection tool to select an elliptical portion of the image
- a color selection tool to select all pixels having a particular color or range of colors
- a pixel selection tool to select one or more pixels within the image 104
- a “magic wand” selection tool to select all contiguous pixels having the same color or range of colors starting from the location of the mouse pointer.
- the image map designer 102 may select a portion of the image 104 representing an object within the image without specifying the shape of the object. For example, if the image 104 contains a sofa, the image map designer 102 may click on a pixel within the sofa using the “magic wand” tool, thereby causing the portion selector 108 to select some or all of the pixels representing the sofa, but without requiring the designer 102 to draw a polygon representing the outline of the sofa, or to otherwise specify the outline of the sofa.
- Such techniques may greatly simplify the process of selecting objects within the image 104 having complex shapes and thereby greatly simplify the process of creating hotspots for such objects.
- FIG. 1 This method of selecting the portion(s) is shown in FIG. 1 , in which the image map designer 102 provides portion selection input(s) 106 to a portion selector 108 , in response to which the portion selector 108 outputs one or more image portion selection data structures 110 representing the selected image portion(s) ( FIG. 2 , step 204 ).
- the portion selector 108 may, for example, be part of standard image processing software as described above.
- the image portion selection data structure(s) 110 may take any form, such as data structures internal to the portion selector 108 .
- the set of pixels corresponding to a particular image portion may be represented within the corresponding image portion data structure in any of a variety of ways.
- a set of image portion pixels may be represented within the image portion selections 110 as a list or array of pixels, which may be compressed or uncompressed.
- the image map designer 102 may select the image portion(s) in other ways, such as by issuing text-based commands, or by writing code defining the image portion(s). Any of the techniques described above for selecting the image portion(s) may be combined with each other and with other techniques.
- the portion selector 108 may apply to the designer's input 106 to produce the image portion selections 110 .
- the designer's input 106 may specify the coordinates of a polygon, in response to which the portion selector 108 may generate portion selections 110 representing the set of pixels within the specified polygon.
- the designer's input 106 may directly specify one or more of the pixels to be contained within the image portion selections 110 .
- a single “portion” of the image need not consist solely of a contiguous region within the image 104 . Rather, the term “portion” as used herein may refer to any subset, whether contiguous or non-contiguous, of the image 104 . For example, if the image 104 is a rasterized image, a single “portion” of the image 104 selected by the image map designer 102 may consist of any subset of the pixels within the image, whether or not such pixels are contiguous.
- the image 104 may be any kind of image stored in any format. For example, it may be a rasterized image stored in a format such as JPEG or GIF, or a vectorized image. Each pixel in the image 104 may have any number of bits.
- the portion selector 108 may process the image 104 in its existing format, or may convert the image 104 into other formats to facilitate processing.
- the image portion selection(s) 110 may include representations of one or more portions of the image 104 . Each such portion may be used to create a distinct hotspot within the image 104 when the image 104 is displayed by a web browser within a web page or by other software.
- One example of a method for creating such hotspots from the image portion selections 110 will now be described.
- a separate image map is created for each of multiple magnifications of the image 104 .
- This is not, however, a requirement of the present invention. Rather, for example, a single image map for a single magnification (e.g., a magnification of 1.0) of the image 104 may be created.
- the system 100 includes an image map collection creator 112 , which creates a collection of image maps, one for each desired magnification, for use with the image 104 based on the image portion selections 110 .
- the image map designer 102 desires to create image maps for each of M different magnifications.
- the designer 102 may indicate this to the image map collection creator 112 by, for example, providing a list of the magnifications desired by the user (e.g., 0.5, 1.0, and 1.5) or in other ways.
- the image map collection creator 112 may apply a set of default magnifications representing commonly-needed magnifications for use with standard display sizes.
- an image map magnifier 116 scales all of the portions 110 by a factor of m n to produce scaled versions of all of the portions 110 (step 210 ).
- the image map collection creator 112 uses the scaled portions to produce a scaled image map 118 containing the scaled portions (step 212 ).
- the image map collection creator 112 adds the scaled image map 118 to the image map collection 114 (step 214 ).
- the image map collection creator 112 repeats steps 210 - 214 for the remaining magnifications (step 216 ).
- the result is that the image map collection 114 contains M image maps, each of which is scaled according to the corresponding value of m n .
- the portion selector 108 may be used to create the image portion selections 110 based on the designer's input 106 . More specifically, when the designer 102 selects a portion of the image 104 , the portion selector 108 may create a masking layer within the image 104 which consists of the same pixels as those selected by the designer 102 , but in a particular easily-identifiable color, such as red. The portion selector 108 may display the masking layer on top of the image 104 to clearly identify to the designer 102 which portions of the image 104 have already been selected. The portion selector 108 may display the masking layers for all portions 110 simultaneously so that the designer 102 does not re-select any portions which were selected previously.
- the masking layers and other “layers” described herein may be implemented using image layers already supported by image processing software such as Adobe Photoshop, but this is not a requirement of the present invention. Rather, such layers may be implemented in other ways which are independent of such image processing software. Furthermore, the “layers” described herein may be implemented using any data structure suitable for representing a set of selected pixels, not only those data structures characterized as image “layers.”
- the mask information may be saved within the image file 104 itself.
- the image file 104 may contain both the original image and the image portion selections 110 , in the form of the mask layers.
- the image 104 and image portion selections 110 may both be implemented within a single layered image file.
- the image 104 may be stored in an image file which does not include the image portion selections 110 , which may be stored in a separate file, files, or other data structure(s).
- the image map collection creator 112 may be triggered manually or automatically. For example, the image map collection creation process represented by steps 206 - 216 in FIG. 2 may be performed automatically once the image portion selections 110 are created. Alternatively, for example, the image map designer 102 or other user may instruct the image map collection creator 112 to create the image map collection based on the image 104 and the image portion selections 110 . For example, if the image 104 and image portion selections 110 are stored within a single layered image file, the designer 102 or other user may use a file selection dialog box or other means to point the image map collection creator to the saved layered image file, in response to which the image map collection creator 112 may create the image map collection 114 using the techniques disclosed above. The user may also provide other input to the image map collection creator 112 at this stage, such as the desired magnification(s), and the filename and path in which to store the image map collection data structure 114 .
- the image map collection creator 112 received the image 104 as input.
- the image map collection creator 112 may include an image converter 120 , which converts the image 104 from its original format (e.g., Adobe Photoshop) to an image 122 stored in the final format (e.g., JPEG or GIF) in which it is intended to be viewed ( FIG. 2 , step 218 ). Note, however, that this conversion is optional; the image 104 may instead be retained in its original format for viewing.
- FIG. 3 shows only those portions of the image map collection creator 112 which are relevant to the method 400 illustrated in FIG. 4 .
- FIGS. 3 and 4 only illustrate processing that may be performed for a single magnification. The same techniques may be applied to all desired magnifications.
- the image map magnifier 116 scales the selected image portions 110 to produce scaled portions 126 , as described above with respect to FIGS. 1 and 2 ( FIG. 4 , step 210 ).
- the image map magnifier 116 also scales the converted image 122 to produce a scaled image 124 (step 402 ).
- the scaling (magnification) process described above with respect to step 210 of FIG. 2 may be performed by scaling all layers of the layered image file.
- Software such as Adobe Photoshop can perform such scaling on all layers of a layered image file automatically upon instruction.
- the image map collection creator 112 may perform step 210 by instructing Adobe Photoshop to scale all layers of the layered image file, including the layers representing the selected image portions 110 .
- the image map collection creator 112 then enters a loop over each selected portion P (e.g., each layer of the layered image file) (step 404 ).
- a portion channel creator 302 creates a “portion channel” 306 corresponding to portion P which has the same width and height as the scaled image 124 , but in which the pixels in the portion P are active and in which all other pixels are inactive (step 406 ).
- the portion channel 306 may be implemented in any of a variety of ways, such as by using an alpha channel in Adobe Photoshop within an image separate from the converted image 122 , in which pixels with a maximum value (e.g., a value of 255 in the case of 8-bit pixels) play the role of active pixels, and in which pixels with a minimum value (e.g., 0) play the role of inactive pixels.
- the image map collection creator 112 may apply a threshold filter to the portion channel to force the portion channel to contain only pixels with the applicable minimum and maximum value, such as a filter with a threshold value of 128 (assuming 8-bit pixels) (step 408 ). Note, however, that step 408 is optional and need not be applied in cases where it is not necessary, such as in cases in which the pixels in the portion channel merely defines pixels as “active” or “inactive,” without intermediary values.
- the image map collection creator 112 converts the portion channel to a RAW file or other file in which header information has been eliminated (step 410 ).
- the dimensions of the image stored in the RAW file may be equal to the dimensions of the corresponding boundary area.
- the image map collection creator 112 may store the resulting portion channel 306 within the scaled image map 118 along with a link between the portion channel 306 and corresponding scaled portion P 126 .
- a bounding area creator 304 creates a bounding area data structure 308 defining a bounding area around scaled portion P 126 (step 412 ).
- the bounding area data structure 308 may, for example, define a rectangular bounding area defining the smallest rectangle which contains all pixels within scaled portion P 126 .
- the image map collection creator 112 may store the bounding area data structure 308 within the scaled image map 118 along with a link between the bounding area 308 and the corresponding scaled portion P 126 .
- the bounding area data structure 308 may be created by selecting all of the pixels within the portion channel 306 , which may be implemented as an Adobe Photoshop alpha channel, and cropping the alpha channel to the smallest rectangle which contains all of the active pixels within the portion channel.
- the image map collection creator 112 repeats steps 406 - 412 for the remaining scaled portions P, thereby creating portion channels and bounding areas for each of the scaled portions P (step 414 ).
- the image map collection data structure 114 may contain one or more image map data structures, each of which corresponds to a particular magnification.
- the image map collection 114 may, for example, be stored in a single file, which may or may not contain the converted image 122 itself. Examples of techniques for creating the image map collection data structure 114 will now be described in more detail with reference to the dataflow diagram of FIG. 5 and corresponding flowchart of FIG. 6 .
- FIG. 5 shows only those portions of the image map collection creator 112 which are relevant to the method 600 illustrated in FIG. 6 .
- FIGS. 5 and 6 only illustrate processing that may be performed for a single magnification. The same techniques may be applied to all desired magnifications.
- the image map collection creator 112 creates a new image map collection data structure 114 ( FIG. 6 , 602 ), such as by creating a new file to store the image map collection.
- a header generator 502 generates and stores header information 504 in the image map collection 114 , such as the file name of the file that stores the image 104 , the width and height of the image 104 , the resolution of the image 104 , the number of magnifications M, and the number of portions 110 (step 604 ).
- the image map collection creator 112 enters a loop over each magnification m n (step 606 ), and for each portion P within each magnification (step 608 ).
- a portion processor 506 appends or otherwise stores the bounding area 508 of the current portion P in the image map collection 114 , such as by storing the coordinates of the bounding area's vertices in the image map collection 114 (step 610 ).
- the portion processor 506 then appends or otherwise stores the portion channel 510 for portion P in the image map collection 114 (step 612 ).
- the portion processor 506 may perform certain processing on the portion channel 510 before storing it in the image map collection 114 .
- the portion processor 506 may combine the pixels in the portion channel that fall within the portion channel's bounding area into consecutive bytes, without any padding bits, starting from the upper left of the portion channel's bounding area and proceeding left to right through each consecutive row.
- Such binarization of the portion channels 306 may, for example, be performed as follows. Recall that each pixel in each of the portion channels 306 is either active or inactive. Each such pixel may be represented in the portion channels 306 using any number of bits, e.g., 1, 2, 4, 8, 16, or 32. However, regardless of the number of bits used to represent each such pixel, each such pixel only represents one bit of information: active or inactive. As a result, each pixel in a portion channel may be converted into a single bit indicating whether the pixel is active or inactive (using values such as 255 for active and 0 for inactive, for example). Consecutive bits (corresponding to consecutive pixels) may be combined into bytes.
- the first eight pixels in a portion channel may be converted into eight bits, which may be stored in a single byte.
- the next eight pixels in the portion channel may be converted to a second byte, which may be stored consecutively after the first byte. If the end of a row of pixels is reached before filling the current byte, then the current byte may be completed with the bits representing the initial pixels of the following row. If, upon completion of binarization of a portion channel, the final byte does not include eight bits, the final byte may be padded with zeroes.
- the resulting binarized portion channel may be stored in formats, such as binary, hexadecimal digits, or any byte format.
- Steps 610 - 612 may be repeated for each remaining portion P in the current magnification (step 614 ).
- Steps 608 - 614 may be repeated for each remaining magnification (step 616 ).
- the image map collection includes the header information 504 , as well as the bounding area information 508 and binarized, compressed portion channels 510 for each portion (hotspot) within each magnification of the image 104 .
- Additional compression may be achieved in a variety of ways. For example, if a particular portion is a rectangular area in which all pixels are active, or in which all pixels are inactive, then the portion channel itself need not be stored within the image map collection 114 . Instead, if all pixels within the portion are active, then all that need be stored within the image map collection 114 is the bounding area of the portion and a flag indicating that the corresponding portion is a uniform active rectangular area. If all pixels within the portion are inactive, then all that need be stored within the image map collection 114 is a flag indicating that the corresponding portion is inactive.
- the image map collection 114 may be encoded as text for HTTP transmission.
- the image map collection 114 may be compressed using a format such as gzip, either instead of or in addition to compressing the individual portion channels 510 .
- the portion channels 510 may be encoded as text for HTTP transmission.
- the portion channels 510 may be compressed using a format such as gzip.
- the image map collection 114 may be used to enable a user to view the image 104 (or the converted image 122 ) at any magnification and to activate the hotspots within the image 104 to view additional content or trigger other actions.
- FIG. 7 a dataflow diagram is shown of a system 700 for enabling such use of hotspots by an end user 702 .
- FIG. 8 a flowchart is shown of a method 800 performed by the system 700 of FIG. 7 according to one embodiment of the present invention.
- the user 702 operates a client computer 712 , which may be any computer or other device capable of interacting over a network using TCP/IP.
- the client computer 712 includes a web browser 714 for browsing pages on the World Wide Web.
- FIGS. 7 and 8 involves web pages, the same or similar techniques may be applied to using hotspots in conjunction with other kinds of Internet services, and even in connection with software executing on a standalone computer or otherwise not interacting with a network.
- the client computer 712 issues a request 716 over the Internet 710 to retrieve a particular web page 706 from a web server 704 ( FIG. 8 , step 802 ).
- the request 716 may be issued, for example, in response to the user 702 clicking on a link to the web page 706 or in response to the user 702 typing the URL of the web page 706 into the address bar of the web browser 714 .
- the web server 704 receives the request 716 (step 804 ) and, in response, serves the web page 718 over the Internet 710 to the web browser 714 (step 806 ).
- the web page 706 includes the converted image 122 , the image map collection data structure 114 , and other web page content 708 (such as text and/or graphics intended to be displayed on the same page as the converted image 122 ). Therefore, in the process of transmitting the web page 718 to the client computer 712 , the web server 704 transmits the converted image 122 (step 808 ) and the image map collection data structure 114 (step 810 ) to the client computer 712 , which receives the web page 718 (step 812 ).
- the converted image 122 transmitted to the web browser 714 may be the largest of all magnifications which the web browser 714 may display.
- the entire web page 718 need not be transmitted in one pass to the client computer 712 . Instead, the web page 718 may be transmitted in stages. For example, at first the web server 704 may transmit only a skeleton of the web page 718 which includes information such as the number of images on the page 718 and how the images are laid out on the page. In response, the web browser 714 may request additional information from the server, such as requesting the first image in the web page 706 . In response, the server 704 may send the converted image 122 and the image map for the default magnification (i.e., 1.0) of the image 122 .
- magnification i.e., 1.0
- the web browser 714 may decompress the image map at the client computer 712 , thereby minimizing the use of network bandwidth to transmit the image map.
- the web browser 714 extracts information from the image map, such as the number of magnifications, and the bounding areas and portion channels of all hotspots in the default image map and/or any other image maps transmitted to the client computer 712 (step 814 ).
- the extracted information may be stored in any format, such as data structures in the form of arrays in the memory of the client computer 712 .
- These and other functions described herein as being performed by the web browser 714 may be performed, for example, by JavaScript or other code contained within the web page 718 and executing within the web browser 714 or otherwise executing on the client computer 712 .
- the web browser 714 renders the web page 718 , including the image 122 , at a particular magnification to produce a rendering of the web page 718 on a display of the client computer 712 (step 816 ).
- the user's movement of the mouse causes mouse movement input 720 to be provided to the client computer 712 (step 818 ).
- the method 800 of FIG. 8 determines whether the current location of the user's mouse pointer is over any hotspot in the image map corresponding to the current magnification of the converted image 122 (step 820 ). Such an occurrence is known as a “hover” event. If such a hover event occurs, the web browser 714 takes a predetermined action associated with the particular hotspot over which the user's mouse is hovering (step 822 ).
- the predetermined action may, for example, be displaying a pop-out or pop-up window associated with the hotspot, or following a hyperlink associated with the hotspot to a local or remote network resource associated with the hotspot.
- the user 702 may then hover over and/or click on other hotspots in the image 122 to cause other predetermined actions to be taken.
- a predetermined action may be associated with a hotspot in any of a variety of ways.
- a database may store information linking each hotspot to a corresponding action.
- Such a database may associate additional information with each hotspot, such as a name of the object represented by the hotspot, a SKU (stock-keeping unit) associated with the object, and a price of the object.
- SKU stock-keeping unit
- a hotspot may be associated with more than one action.
- a hotspot may be associated with a first action to be taken in response to the user hovering over the hotspot, and a second action to be taken in response to the user clicking on the hotspot.
- the database, or other source of information linking hotspots to actions may, for example, be stored within the image map collection 114 or elsewhere within the web page 706 .
- the method 800 may determine whether the user's mouse is hovering over a hotspot within the image 122 in any of a variety of ways. For example, each time the user's mouse moves, the method 800 may determine whether the user's mouse pointer is within any of the bounding areas defined by the bounding area information for the current image map. If the user's mouse pointer is not within any such bounding area, the method 800 need not take any further action.
- the method 800 uses the portion channel information associated with that bounding area to determine whether the particular pixel underneath the mouse pointer is an active pixel. If the mouse pointer is determined to be over an active pixel by reference to the portion channel information, then the method 800 determines that the user 702 is hovering over the hotspot associated with the portion channel.
- the server 704 may transmit a version of the image 122 at the correct magnification to the web browser 714 , which will display the scaled image to the user 702 .
- transmission of a resized image by the server 704 to the web browser 714 is not required.
- the web browser 714 may resize the original converted image 122 for display at the new magnification without downloading any new image data from the server 704 , and then display the scaled image to the user 702 .
- the web browser 714 may then retrieve the image map for the current magnification from the server 704 (if that image map was not previously downloaded by the web browser 714 ) and then begin to use the new image map data within the method 800 .
- the entire scaled image may or may not be displayed. If the entire image is displayed as its scale changes, then the screen area occupied by the scaled image changes as its scale changes.
- the scaled image may be displayed within a fixed-size viewport, in which case only a portion of the scaled image may be displayed within the viewport if the scaled image is larger than the viewport.
- image map collection 114 separate image maps are stored in the image map collection 114 , one image map per magnification. This is merely an example and does not constitute a limitation of the present invention.
- the image map collection 114 may contain only a single image map which is used for multiple magnifications.
- the (x,y) coordinates of the user's mouse may be retrieved as relative coordinates such as (0.5, 0.5), representing the center of the image, rather than as absolute coordinates such as (300, 200).
- Such relative coordinates may be converted into absolute coordinates by multiplying the relative coordinates by the dimensions of the current image magnification.
- a reverse transform may be applied to such coordinates to find the pixel location within the current image, depending on the current magnification level of the image. For example, assume that the current image map in use by the web browser 714 was created for the converted image 122 at a magnification of 1.0, and that the converted image 122 is currently being displayed by the web browser 714 at a 0.75 magnification.
- the 0.25 reduction transform may be reversed to identify the current coordinates of the mouse within the original (e.g., magnification of 1.0) image. If the current image map was created for a different magnification, such as 0.8, then the reverse transform would reverse the 0.05 reduction to identify the mouse coordinates within the original (e.g., magnification of 0.8) image.
- the portion channel information may then be used to determine whether the coordinates resulting from the reverse transform correspond to an active pixel.
- One advantage of embodiments of the present invention is that they enable image map designers to create image maps quickly and easily, even when hotspots within the image map are irregularly-shaped.
- the designer may use any of a variety of image selection tools, such as a “magic wand” tool found in commonly-available image processing software, to select objects within an image even when such objects do not have the shape of a polygon or ellipse. Creation of hotspots in this manner can be much quicker and easier than attempting to create irregularly-shaped hotspots out of polygons and ellipses.
- embodiments of the present invention allow a single hotspot to contain non-contiguous regions. Such hotspots are useful, for example, to represent a group of objects (such as a group of lamps in an image of a room) using a single hotspot. More generally, embodiments of the present invention enable any subset of pixels in an image to be defined as a hotspot. One benefit of this flexibility is that even very thin regions of an image, such as a line having a width of a single pixel, may be defined as hotspots. A hotspot may even consist of a single pixel, or a collection of individual non-contiguous pixels.
- polygon-based image map areas must be loaded into a browser in the correct order, particularly when one image map area is enclosed within another (e.g., a small square within a larger square). If not loaded in the correct order, the inner area will not be active, and the large area will be active over the small area.
- the image map designer may create a single set of hotspots for a single image at a single magnification, in response to which multiple scaled versions of the image map may be created automatically for use with the image when displayed at multiple different magnifications.
- This feature enables the image map to remain accurate and useful even when the image is displayed at different magnifications, but without requiring the image map designer to manually create different versions of the image map for use with different image magnifications.
- conventional polygon-based image maps tend to lose accuracy when they are automatically scaled for use with different image magnifications.
- magnification such as the highest-resolution magnification
- the client may then scale the image to the desired magnification for viewing. This reduces bandwidth requirements in comparison with techniques which require a separate image for each magnification to be transmitted to the client.
- the techniques disclosed herein are generally applicable to any web browser and any platform. They do not require the installation of web browser plug-ins, web browser extensions, or ActiveX components, thereby reducing the load on the client and automating the process of implementing image maps on the client. Furthermore, they are not limited to use with web browsers, but rather may be used to implement image maps in any kind of software.
- the techniques disclosed herein are not limited to taking actions in response to the user hovering over or selecting a hotspot.
- the techniques disclosed herein may be used to navigate to a specific hotspot within an image.
- any particular hotspot may be navigated to using the coordinates of the bounding area of the hotspot and the coordinates of the first active pixel within the bounds.
- the user may select the name of the product from a drop-down menu or using a voice command, in response to which the web browser may move the location of the rendered image so that the selected product is displayed in the center of the viewing area.
- the techniques disclosed herein for applying an image map to an image at multiple magnifications is particularly well-suited for deployment on mobile phones and other mobile computing devices having small displays.
- the full-sized image intended for display on a desktop computer monitor may be resized for such small displays, and the automatically-generated scaled image maps may be used to implement the image map on the small display without loss of accuracy.
- Image maps may be implemented either on the client side (i.e., on the user's local machine 712 in FIG. 7 ) or on the server side (i.e., at the web server 704 in FIG. 7 ).
- Embodiments of the present invention may be implemented in connection with either client side image maps or server side image maps.
- client-side image map the user's local machine determines whether the user's mouse is over a hotspot; with a server-side image map, the user's mouse pointer location is transmitted to the server, which determines whether the user's mouse is over a hotspot and then transmits a message to the client indicating whether the user's mouse is over a hotspot.
- the web page 706 in FIG. 7 is shown as containing only a single image 122 , the web page 706 may contain multiple images and image map collection information for each such image.
- the techniques disclosed herein are not limited to use only with images.
- the techniques disclosed herein may be used to treat the entire content of a display screen or window (such as a window of a web browser) as an image containing hotspots within it.
- the image map collection data structure 114 may take any of a variety of forms. For example, it may be implemented as one or more files stored in a file system, as one or more databases or database records stored in a database system, or as a data structure stored in RAM or other memory.
- the techniques described above may be implemented, for example, in hardware, software, firmware, or any combination thereof.
- the techniques described above may be implemented in one or more computer programs executing on a programmable computer including a processor, a storage medium readable by the processor (including, for example, volatile and non-volatile memory and/or storage elements), at least one input device, and at least one output device.
- Program code may be applied to input entered using the input device to perform the functions described and to generate output.
- the output may be provided to one or more output devices.
- Each computer program within the scope of the claims below may be implemented in any programming language, such as assembly language, machine language, a high-level procedural programming language, or an object-oriented programming language.
- the programming language may, for example, be a compiled or interpreted programming language.
- Each such computer program may be implemented in a computer program product tangibly embodied in a machine-readable storage device for execution by a computer processor.
- Method steps of the invention may be performed by a computer processor executing a program tangibly embodied on a computer-readable medium to perform functions of the invention by operating on input and generating output.
- Suitable processors include, by way of example, both general and special purpose microprocessors.
- the processor receives instructions and data from a read-only memory and/or a random access memory.
- Storage devices suitable for tangibly embodying computer program instructions include, for example, all forms of non-volatile memory, such as semiconductor memory devices, including EPROM, EEPROM, and flash memory devices; magnetic disks such as internal hard disks and removable disks; magneto-optical disks; and CD-ROMs. Any of the foregoing may be supplemented by, or incorporated in, specially-designed ASICs (application-specific integrated circuits) or FPGAs (Field-Programmable Gate Arrays).
- a computer can generally also receive programs and data from a storage medium such as an internal disk (not shown) or a removable disk.
Abstract
An image map designer creates an image map for use with an image. The image map contains one or more hotspots, each of which specifies a set of pixels which may be non-contiguous and non-polygonal. The image map designer may create the image map using image processing software that facilitates creation of non-contiguous and non-polygonal image maps. Multiple versions of the image map may be created, each for use with a different magnification of the image. The image maps are stored in a compact format, which may be transmitted efficiently from a server to a client. Data contained within the image map facilitates the process of determining whether the client user's mouse pointer is within any of the hotspots, and the process of applying the image map to the image when rendered at different magnifications.
Description
- This application is a divisional of U.S. patent application Ser. No. 12/504,497, filed on Jul. 16, 2009, entitled, “Improved Web Page Hot Spots,” which is hereby incorporated by reference herein.
- It is common for software and web sites to present the user with an image, such as a map of the United States, and to allow the user to select a region of the image, such as a particular state, by clicking on the image region. In response, the software or web site may perform an action related to the selected region, such as displaying additional information about the state illustrated by the selected region.
- Such functionality is often provided using an “image map,” which defines an outline of each of the regions within the image which may be selected by the user. In the example above, the image map would include, for each state, a set of coordinates defining the vertices of a polygon which form the outline of the state. Each such polygon defines a “hotspot” within the image which may be selected by the user to select the corresponding state. Associated with each hotspot may be instructions defining the action to be taken in response to the user's selection of the hotspot. Such instructions may, for example, take the form of a hyperlink to a location containing more information about the corresponding state.
- The intent of an image map is to enable multiple regions (hotspots) within a single image to be linkable to different locations (or to trigger other actions) without requiring the image to be divided into separate image files. This simplifies the process of creating user-friendly web pages containing multiple hotspots within a single image.
- Existing languages for defining web pages, such as HTML and XHTML, contain mechanisms for implementing image maps in the manner described above. Existing techniques for creating an image map containing multiple hotspots, however, tend to be tedious, time-consuming, and prone to error. For example, it is possible to create an image map by writing the necessary HTML code manually using a text editor, but defining each vertex of each hotspot in an image is a painstaking process. As a result, most image maps which are created by hand-coding tend to consist of hotspots which are simple polygons, such as rectangles and trapezoids, and which therefore may not correspond very accurately to the image regions they are intended to overlap. Consider, for example, attempting to code by hand a hotspot for an irregularly-shaped state such as Florida using only simple polygons.
- As a result, software tools exist which facilitate the process of creating image maps by drawing hotspots within them. Although such tools represent an improvement over hand-coding, the process of creating a polygon that forms the precise outline of an irregular shape can still be tedious, time-consuming, and error prone. Creating a large number of such hotspots within a single image can be particularly time-consuming. As a result, users are still often faced with image maps containing hotspots that only roughly correspond to the image regions they are intended to represent.
- What is needed, therefore, are improved techniques for implementing hotspots in web pages and in software more generally.
- An image map designer creates an image map for use with an image. The image map contains one or more hotspots, each of which specifies a set of pixels which may be non-contiguous and non-polygonal. The image map designer may create the image map using image processing software that facilitates creation of non-contiguous and non-polygonal image maps. Multiple versions of the image map may be created, each for use with a different magnification of the image. The image maps are stored in a compact format, which may be transmitted efficiently from a server to a client. Data contained within the image map facilitates the process of determining whether the client user's mouse pointer is within any of the hotspots, and the process of applying the image map to the image when rendered at different magnifications.
- One embodiment of the present invention is directed to a computer-implemented method comprising: (A) receiving a first instruction from a first user to select a first portion of a first digital image, the first digital image comprising a plurality of pixels; (B) in response to the first instruction, selecting a first subset of the plurality of pixels in the first digital image; (C) storing a record of the first subset in an image map collection data structure; (D) transmitting the image map collection data structure and the first digital image to a client; (E) identifying a current location of a user cursor within a rendering of the first digital image at the client; (F) determining whether the current location is within the first subset; and (G) if the current location is within the first subset, taking a first predetermined action associated with the first subset.
- Other features and advantages of various aspects and embodiments of the present invention will become apparent from the following description and from the claims.
-
FIG. 1 is a dataflow diagram of a system for creating one or more image maps according to one embodiment of the present invention; -
FIG. 2 is a flowchart of a method performed by the system ofFIG. 1 according to one embodiment of the present invention; -
FIG. 3 is a dataflow diagram of a system for generating portion channels and bounding areas for hotspots in image maps according to one embodiment of the present invention; -
FIG. 4 is a flowchart of a method performed by the system ofFIG. 3 according to one embodiment of the present invention; -
FIG. 5 is a dataflow diagram of a system for creating an image map collection data structure according to one embodiment of the present invention; -
FIG. 6 is a flowchart of a method performed by the system ofFIG. 5 according to one embodiment of the present invention; -
FIG. 7 is a dataflow diagram of a system for enabling the use of hotspots by a user according to one embodiment of the present invention; and -
FIG. 8 is a flowchart of a method performed by the system ofFIG. 7 according to one embodiment of the present invention. - Techniques for creating and using image maps according to various embodiments of the present invention will now be described. Referring to
FIG. 1 , a dataflow diagram is shown of asystem 100 for creating one or more image maps according to one embodiment of the present invention. Referring toFIG. 2 , a flowchart is shown of amethod 200 performed by the system ofFIG. 1 according to one embodiment of the present invention. - A
user 102, referred to inFIG. 1 as an “image map designer,” providesinput 106 selecting one or more portions of an image 104 (FIG. 2 , step 202). Theimage map designer 102 may provide theinput 106 in any of a variety of ways. For example, theimage map designer 102 may use image processing software, such as Adobe Photoshop, to select one or more portions of the image. Such software includes a variety of tools for selecting portions of an image. Any such tools may be used by theimage map designer 102 to select portions of theimage 104. For example, theimage map designer 102 may use a rectangle selection tool to select a rectangular portion of theimage 104, an ellipse selection tool to select an elliptical portion of the image, a color selection tool to select all pixels having a particular color or range of colors, a pixel selection tool to select one or more pixels within theimage 104, or a “magic wand” selection tool to select all contiguous pixels having the same color or range of colors starting from the location of the mouse pointer. - As the “magic wand” example illustrates, the
image map designer 102 may select a portion of theimage 104 representing an object within the image without specifying the shape of the object. For example, if theimage 104 contains a sofa, theimage map designer 102 may click on a pixel within the sofa using the “magic wand” tool, thereby causing theportion selector 108 to select some or all of the pixels representing the sofa, but without requiring thedesigner 102 to draw a polygon representing the outline of the sofa, or to otherwise specify the outline of the sofa. Such techniques may greatly simplify the process of selecting objects within theimage 104 having complex shapes and thereby greatly simplify the process of creating hotspots for such objects. - This method of selecting the portion(s) is shown in
FIG. 1 , in which theimage map designer 102 provides portion selection input(s) 106 to aportion selector 108, in response to which theportion selector 108 outputs one or more image portionselection data structures 110 representing the selected image portion(s) (FIG. 2 , step 204). Theportion selector 108 may, for example, be part of standard image processing software as described above. The image portion selection data structure(s) 110 may take any form, such as data structures internal to theportion selector 108. - Furthermore, the set of pixels corresponding to a particular image portion may be represented within the corresponding image portion data structure in any of a variety of ways. For example, a set of image portion pixels may be represented within the
image portion selections 110 as a list or array of pixels, which may be compressed or uncompressed. - The
image map designer 102 may select the image portion(s) in other ways, such as by issuing text-based commands, or by writing code defining the image portion(s). Any of the techniques described above for selecting the image portion(s) may be combined with each other and with other techniques. - As the examples just provided indicate, there may be any of a variety of relationships between the
input 106 provided by theimage map designer 102 and the resultingimage portion selections 110, as a result of various types of processing which theportion selector 108 may apply to the designer'sinput 106 to produce theimage portion selections 110. For example, the designer'sinput 106 may specify the coordinates of a polygon, in response to which theportion selector 108 may generateportion selections 110 representing the set of pixels within the specified polygon. As another example, the designer'sinput 106 may directly specify one or more of the pixels to be contained within theimage portion selections 110. - Note that a single “portion” of the image need not consist solely of a contiguous region within the
image 104. Rather, the term “portion” as used herein may refer to any subset, whether contiguous or non-contiguous, of theimage 104. For example, if theimage 104 is a rasterized image, a single “portion” of theimage 104 selected by theimage map designer 102 may consist of any subset of the pixels within the image, whether or not such pixels are contiguous. - The
image 104 may be any kind of image stored in any format. For example, it may be a rasterized image stored in a format such as JPEG or GIF, or a vectorized image. Each pixel in theimage 104 may have any number of bits. Theportion selector 108 may process theimage 104 in its existing format, or may convert theimage 104 into other formats to facilitate processing. - As stated above, the image portion selection(s) 110 may include representations of one or more portions of the
image 104. Each such portion may be used to create a distinct hotspot within theimage 104 when theimage 104 is displayed by a web browser within a web page or by other software. One example of a method for creating such hotspots from theimage portion selections 110 will now be described. - In the following example, a separate image map is created for each of multiple magnifications of the
image 104. This is not, however, a requirement of the present invention. Rather, for example, a single image map for a single magnification (e.g., a magnification of 1.0) of theimage 104 may be created. - The
system 100 includes an imagemap collection creator 112, which creates a collection of image maps, one for each desired magnification, for use with theimage 104 based on theimage portion selections 110. Assume for purposes of example that theimage map designer 102 desires to create image maps for each of M different magnifications. Thedesigner 102 may indicate this to the imagemap collection creator 112 by, for example, providing a list of the magnifications desired by the user (e.g., 0.5, 1.0, and 1.5) or in other ways. As another example, the imagemap collection creator 112 may apply a set of default magnifications representing commonly-needed magnifications for use with standard display sizes. - The image
map collection creator 112 creates an empty image map collection data structure 114 (FIG. 2 , step 206) enters a loop over each magnification mn, where 0≧n>M (FIG. 2 , step 208). For example, if the three desired magnifications are 0.5, 1.0, and 1.5, then M=3, m0=0.5, m1=1.0, and m2=1.5. - For the current magnification mn, an
image map magnifier 116 scales all of theportions 110 by a factor of mn to produce scaled versions of all of the portions 110 (step 210). The imagemap collection creator 112 uses the scaled portions to produce ascaled image map 118 containing the scaled portions (step 212). The imagemap collection creator 112 adds the scaledimage map 118 to the image map collection 114 (step 214). The imagemap collection creator 112 repeats steps 210-214 for the remaining magnifications (step 216). The result is that theimage map collection 114 contains M image maps, each of which is scaled according to the corresponding value of mn. - The techniques disclosed above with respect to
FIGS. 1 and 2 may be implemented in a variety of ways, examples of which will now be described. It was described above that theportion selector 108 may be used to create theimage portion selections 110 based on the designer'sinput 106. More specifically, when thedesigner 102 selects a portion of theimage 104, theportion selector 108 may create a masking layer within theimage 104 which consists of the same pixels as those selected by thedesigner 102, but in a particular easily-identifiable color, such as red. Theportion selector 108 may display the masking layer on top of theimage 104 to clearly identify to thedesigner 102 which portions of theimage 104 have already been selected. Theportion selector 108 may display the masking layers for allportions 110 simultaneously so that thedesigner 102 does not re-select any portions which were selected previously. - The masking layers and other “layers” described herein may be implemented using image layers already supported by image processing software such as Adobe Photoshop, but this is not a requirement of the present invention. Rather, such layers may be implemented in other ways which are independent of such image processing software. Furthermore, the “layers” described herein may be implemented using any data structure suitable for representing a set of selected pixels, not only those data structures characterized as image “layers.”
- For example, if the mask information is represented as layers, they may be saved within the
image file 104 itself. As a result, theimage file 104 may contain both the original image and theimage portion selections 110, in the form of the mask layers. In such a case, theimage 104 andimage portion selections 110 may both be implemented within a single layered image file. Alternatively, however, theimage 104 may be stored in an image file which does not include theimage portion selections 110, which may be stored in a separate file, files, or other data structure(s). - The image
map collection creator 112 may be triggered manually or automatically. For example, the image map collection creation process represented by steps 206-216 inFIG. 2 may be performed automatically once theimage portion selections 110 are created. Alternatively, for example, theimage map designer 102 or other user may instruct the imagemap collection creator 112 to create the image map collection based on theimage 104 and theimage portion selections 110. For example, if theimage 104 andimage portion selections 110 are stored within a single layered image file, thedesigner 102 or other user may use a file selection dialog box or other means to point the image map collection creator to the saved layered image file, in response to which the imagemap collection creator 112 may create theimage map collection 114 using the techniques disclosed above. The user may also provide other input to the imagemap collection creator 112 at this stage, such as the desired magnification(s), and the filename and path in which to store the image mapcollection data structure 114. - It was stated above that the image
map collection creator 112 received theimage 104 as input. The imagemap collection creator 112 may include animage converter 120, which converts theimage 104 from its original format (e.g., Adobe Photoshop) to animage 122 stored in the final format (e.g., JPEG or GIF) in which it is intended to be viewed (FIG. 2 , step 218). Note, however, that this conversion is optional; theimage 104 may instead be retained in its original format for viewing. - Additional processing may be performed on each of the image maps in the image map collection. Such processing may, for example, be performed in the manner illustrated by the dataflow diagram of
FIG. 3 and the corresponding flowchart ofFIG. 4 . For ease of illustration,FIG. 3 shows only those portions of the imagemap collection creator 112 which are relevant to themethod 400 illustrated inFIG. 4 . Those having ordinary skill in the art will appreciate how to combine the teachings ofFIGS. 1 and 2 with the teachings ofFIGS. 3 and 4 . In particular,FIGS. 3 and 4 only illustrate processing that may be performed for a single magnification. The same techniques may be applied to all desired magnifications. - The
image map magnifier 116 scales the selectedimage portions 110 to produce scaledportions 126, as described above with respect toFIGS. 1 and 2 (FIG. 4 , step 210). Theimage map magnifier 116 also scales the convertedimage 122 to produce a scaled image 124 (step 402). - If a single layered image file is used to store both the
image 104 and theimage portion selections 110, the scaling (magnification) process described above with respect to step 210 ofFIG. 2 may be performed by scaling all layers of the layered image file. Software such as Adobe Photoshop can perform such scaling on all layers of a layered image file automatically upon instruction. As a result, if the layered image file is stored in Adobe Photoshop format, the imagemap collection creator 112 may performstep 210 by instructing Adobe Photoshop to scale all layers of the layered image file, including the layers representing the selectedimage portions 110. - The image
map collection creator 112 then enters a loop over each selected portion P (e.g., each layer of the layered image file) (step 404). Aportion channel creator 302 creates a “portion channel” 306 corresponding to portion P which has the same width and height as thescaled image 124, but in which the pixels in the portion P are active and in which all other pixels are inactive (step 406). - The
portion channel 306 may be implemented in any of a variety of ways, such as by using an alpha channel in Adobe Photoshop within an image separate from the convertedimage 122, in which pixels with a maximum value (e.g., a value of 255 in the case of 8-bit pixels) play the role of active pixels, and in which pixels with a minimum value (e.g., 0) play the role of inactive pixels. The imagemap collection creator 112 may apply a threshold filter to the portion channel to force the portion channel to contain only pixels with the applicable minimum and maximum value, such as a filter with a threshold value of 128 (assuming 8-bit pixels) (step 408). Note, however, thatstep 408 is optional and need not be applied in cases where it is not necessary, such as in cases in which the pixels in the portion channel merely defines pixels as “active” or “inactive,” without intermediary values. - The image
map collection creator 112 converts the portion channel to a RAW file or other file in which header information has been eliminated (step 410). The dimensions of the image stored in the RAW file may be equal to the dimensions of the corresponding boundary area. The imagemap collection creator 112 may store the resultingportion channel 306 within the scaledimage map 118 along with a link between theportion channel 306 and corresponding scaledportion P 126. - A bounding
area creator 304 creates a boundingarea data structure 308 defining a bounding area around scaled portion P 126 (step 412). The boundingarea data structure 308 may, for example, define a rectangular bounding area defining the smallest rectangle which contains all pixels within scaledportion P 126. The imagemap collection creator 112 may store the boundingarea data structure 308 within the scaledimage map 118 along with a link between the boundingarea 308 and the corresponding scaledportion P 126. When using Adobe Photoshop, for example, the boundingarea data structure 308 may be created by selecting all of the pixels within theportion channel 306, which may be implemented as an Adobe Photoshop alpha channel, and cropping the alpha channel to the smallest rectangle which contains all of the active pixels within the portion channel. - The image
map collection creator 112 repeats steps 406-412 for the remaining scaled portions P, thereby creating portion channels and bounding areas for each of the scaled portions P (step 414). - As described above, the image map
collection data structure 114 may contain one or more image map data structures, each of which corresponds to a particular magnification. Theimage map collection 114 may, for example, be stored in a single file, which may or may not contain the convertedimage 122 itself. Examples of techniques for creating the image mapcollection data structure 114 will now be described in more detail with reference to the dataflow diagram ofFIG. 5 and corresponding flowchart ofFIG. 6 . For ease of illustration,FIG. 5 shows only those portions of the imagemap collection creator 112 which are relevant to themethod 600 illustrated inFIG. 6 . Those having ordinary skill in the art will appreciate how to combine the teachings ofFIGS. 5 and 6 with the teachings of the previous figures. In particular,FIGS. 5 and 6 only illustrate processing that may be performed for a single magnification. The same techniques may be applied to all desired magnifications. - The image
map collection creator 112 creates a new image map collection data structure 114 (FIG. 6 , 602), such as by creating a new file to store the image map collection. Aheader generator 502 generates andstores header information 504 in theimage map collection 114, such as the file name of the file that stores theimage 104, the width and height of theimage 104, the resolution of theimage 104, the number of magnifications M, and the number of portions 110 (step 604). - The image
map collection creator 112 enters a loop over each magnification mn (step 606), and for each portion P within each magnification (step 608). Aportion processor 506 appends or otherwise stores the boundingarea 508 of the current portion P in theimage map collection 114, such as by storing the coordinates of the bounding area's vertices in the image map collection 114 (step 610). - The
portion processor 506 then appends or otherwise stores theportion channel 510 for portion P in the image map collection 114 (step 612). Theportion processor 506 may perform certain processing on theportion channel 510 before storing it in theimage map collection 114. For example, theportion processor 506 may combine the pixels in the portion channel that fall within the portion channel's bounding area into consecutive bytes, without any padding bits, starting from the upper left of the portion channel's bounding area and proceeding left to right through each consecutive row. - Such binarization of the
portion channels 306 may, for example, be performed as follows. Recall that each pixel in each of theportion channels 306 is either active or inactive. Each such pixel may be represented in theportion channels 306 using any number of bits, e.g., 1, 2, 4, 8, 16, or 32. However, regardless of the number of bits used to represent each such pixel, each such pixel only represents one bit of information: active or inactive. As a result, each pixel in a portion channel may be converted into a single bit indicating whether the pixel is active or inactive (using values such as 255 for active and 0 for inactive, for example). Consecutive bits (corresponding to consecutive pixels) may be combined into bytes. For example, the first eight pixels in a portion channel may be converted into eight bits, which may be stored in a single byte. The next eight pixels in the portion channel may be converted to a second byte, which may be stored consecutively after the first byte. If the end of a row of pixels is reached before filling the current byte, then the current byte may be completed with the bits representing the initial pixels of the following row. If, upon completion of binarization of a portion channel, the final byte does not include eight bits, the final byte may be padded with zeroes. - Such an approach binarizes the portion channel to reduce the space require to store it. The resulting binarized portion channel may be stored in formats, such as binary, hexadecimal digits, or any byte format.
- Steps 610-612 may be repeated for each remaining portion P in the current magnification (step 614). Steps 608-614 may be repeated for each remaining magnification (step 616). Upon completion of the
method 600 shown inFIG. 6 , the image map collection includes theheader information 504, as well as the boundingarea information 508 and binarized,compressed portion channels 510 for each portion (hotspot) within each magnification of theimage 104. - Additional compression may be achieved in a variety of ways. For example, if a particular portion is a rectangular area in which all pixels are active, or in which all pixels are inactive, then the portion channel itself need not be stored within the
image map collection 114. Instead, if all pixels within the portion are active, then all that need be stored within theimage map collection 114 is the bounding area of the portion and a flag indicating that the corresponding portion is a uniform active rectangular area. If all pixels within the portion are inactive, then all that need be stored within theimage map collection 114 is a flag indicating that the corresponding portion is inactive. - Once the
image map collection 114 has been created (or sooner), any one or more of the following may be performed, in any combination. Theimage map collection 114 may be encoded as text for HTTP transmission. Theimage map collection 114 may be compressed using a format such as gzip, either instead of or in addition to compressing theindividual portion channels 510. Theportion channels 510 may be encoded as text for HTTP transmission. Theportion channels 510 may be compressed using a format such as gzip. - Once the
image map collection 114 has been created, it may be used to enable a user to view the image 104 (or the converted image 122) at any magnification and to activate the hotspots within theimage 104 to view additional content or trigger other actions. Referring toFIG. 7 , a dataflow diagram is shown of asystem 700 for enabling such use of hotspots by anend user 702. Referring toFIG. 8 , a flowchart is shown of amethod 800 performed by thesystem 700 ofFIG. 7 according to one embodiment of the present invention. - In the embodiment shown in
FIG. 7 , theuser 702 operates aclient computer 712, which may be any computer or other device capable of interacting over a network using TCP/IP. Theclient computer 712 includes aweb browser 714 for browsing pages on the World Wide Web. Although in the example illustrated inFIGS. 7 and 8 involves web pages, the same or similar techniques may be applied to using hotspots in conjunction with other kinds of Internet services, and even in connection with software executing on a standalone computer or otherwise not interacting with a network. - The
client computer 712 issues arequest 716 over theInternet 710 to retrieve aparticular web page 706 from a web server 704 (FIG. 8 , step 802). Therequest 716 may be issued, for example, in response to theuser 702 clicking on a link to theweb page 706 or in response to theuser 702 typing the URL of theweb page 706 into the address bar of theweb browser 714. - The
web server 704 receives the request 716 (step 804) and, in response, serves theweb page 718 over theInternet 710 to the web browser 714 (step 806). As shown inFIG. 7 , theweb page 706 includes the convertedimage 122, the image mapcollection data structure 114, and other web page content 708 (such as text and/or graphics intended to be displayed on the same page as the converted image 122). Therefore, in the process of transmitting theweb page 718 to theclient computer 712, theweb server 704 transmits the converted image 122 (step 808) and the image map collection data structure 114 (step 810) to theclient computer 712, which receives the web page 718 (step 812). Note that the convertedimage 122 transmitted to theweb browser 714 may be the largest of all magnifications which theweb browser 714 may display. - Note that the
entire web page 718 need not be transmitted in one pass to theclient computer 712. Instead, theweb page 718 may be transmitted in stages. For example, at first theweb server 704 may transmit only a skeleton of theweb page 718 which includes information such as the number of images on thepage 718 and how the images are laid out on the page. In response, theweb browser 714 may request additional information from the server, such as requesting the first image in theweb page 706. In response, theserver 704 may send the convertedimage 122 and the image map for the default magnification (i.e., 1.0) of theimage 122. - The
web browser 714 may decompress the image map at theclient computer 712, thereby minimizing the use of network bandwidth to transmit the image map. Theweb browser 714 extracts information from the image map, such as the number of magnifications, and the bounding areas and portion channels of all hotspots in the default image map and/or any other image maps transmitted to the client computer 712 (step 814). The extracted information may be stored in any format, such as data structures in the form of arrays in the memory of theclient computer 712. These and other functions described herein as being performed by theweb browser 714 may be performed, for example, by JavaScript or other code contained within theweb page 718 and executing within theweb browser 714 or otherwise executing on theclient computer 712. - The
web browser 714 renders theweb page 718, including theimage 122, at a particular magnification to produce a rendering of theweb page 718 on a display of the client computer 712 (step 816). The user's movement of the mouse causesmouse movement input 720 to be provided to the client computer 712 (step 818). Themethod 800 ofFIG. 8 determines whether the current location of the user's mouse pointer is over any hotspot in the image map corresponding to the current magnification of the converted image 122 (step 820). Such an occurrence is known as a “hover” event. If such a hover event occurs, theweb browser 714 takes a predetermined action associated with the particular hotspot over which the user's mouse is hovering (step 822). The predetermined action may, for example, be displaying a pop-out or pop-up window associated with the hotspot, or following a hyperlink associated with the hotspot to a local or remote network resource associated with the hotspot. Theuser 702 may then hover over and/or click on other hotspots in theimage 122 to cause other predetermined actions to be taken. - A predetermined action may be associated with a hotspot in any of a variety of ways. For example, a database may store information linking each hotspot to a corresponding action. Such a database may associate additional information with each hotspot, such as a name of the object represented by the hotspot, a SKU (stock-keeping unit) associated with the object, and a price of the object. These particular pieces of information are merely examples and do not constitute limitations of the present invention. Furthermore, a hotspot may be associated with more than one action. For example, a hotspot may be associated with a first action to be taken in response to the user hovering over the hotspot, and a second action to be taken in response to the user clicking on the hotspot. The database, or other source of information linking hotspots to actions, may, for example, be stored within the
image map collection 114 or elsewhere within theweb page 706. - The
method 800 may determine whether the user's mouse is hovering over a hotspot within theimage 122 in any of a variety of ways. For example, each time the user's mouse moves, themethod 800 may determine whether the user's mouse pointer is within any of the bounding areas defined by the bounding area information for the current image map. If the user's mouse pointer is not within any such bounding area, themethod 800 need not take any further action. - If the user's mouse pointer is within a bounding area associated with the current image map, the
method 800 uses the portion channel information associated with that bounding area to determine whether the particular pixel underneath the mouse pointer is an active pixel. If the mouse pointer is determined to be over an active pixel by reference to the portion channel information, then themethod 800 determines that theuser 702 is hovering over the hotspot associated with the portion channel. - If the
user 702 changes the displayed magnification of the converted image 122 (such as by changing the displayed magnification of theweb page 718 or by changing the displayed magnification of the convertedimage 122 within the web page 718), theserver 704 may transmit a version of theimage 122 at the correct magnification to theweb browser 714, which will display the scaled image to theuser 702. Note, however, that transmission of a resized image by theserver 704 to theweb browser 714 is not required. Alternatively, for example, theweb browser 714 may resize the originalconverted image 122 for display at the new magnification without downloading any new image data from theserver 704, and then display the scaled image to theuser 702. - Regardless of how the converted
image 122 is scaled, theweb browser 714 may then retrieve the image map for the current magnification from the server 704 (if that image map was not previously downloaded by the web browser 714) and then begin to use the new image map data within themethod 800. - As the
user 702 zooms in and out of the image, the entire scaled image may or may not be displayed. If the entire image is displayed as its scale changes, then the screen area occupied by the scaled image changes as its scale changes. Alternatively, for example, the scaled image may be displayed within a fixed-size viewport, in which case only a portion of the scaled image may be displayed within the viewport if the scaled image is larger than the viewport. - In the embodiments described above, separate image maps are stored in the
image map collection 114, one image map per magnification. This is merely an example and does not constitute a limitation of the present invention. For example, theimage map collection 114 may contain only a single image map which is used for multiple magnifications. - For example, the (x,y) coordinates of the user's mouse may be retrieved as relative coordinates such as (0.5, 0.5), representing the center of the image, rather than as absolute coordinates such as (300, 200). Such relative coordinates may be converted into absolute coordinates by multiplying the relative coordinates by the dimensions of the current image magnification. A reverse transform may be applied to such coordinates to find the pixel location within the current image, depending on the current magnification level of the image. For example, assume that the current image map in use by the
web browser 714 was created for the convertedimage 122 at a magnification of 1.0, and that the convertedimage 122 is currently being displayed by theweb browser 714 at a 0.75 magnification. As the user's mouse moves over the scaled image, the 0.25 reduction transform may be reversed to identify the current coordinates of the mouse within the original (e.g., magnification of 1.0) image. If the current image map was created for a different magnification, such as 0.8, then the reverse transform would reverse the 0.05 reduction to identify the mouse coordinates within the original (e.g., magnification of 0.8) image. The portion channel information may then be used to determine whether the coordinates resulting from the reverse transform correspond to an active pixel. - Among the advantages of the invention are one or more of the following.
- One advantage of embodiments of the present invention is that they enable image map designers to create image maps quickly and easily, even when hotspots within the image map are irregularly-shaped. For example, the designer may use any of a variety of image selection tools, such as a “magic wand” tool found in commonly-available image processing software, to select objects within an image even when such objects do not have the shape of a polygon or ellipse. Creation of hotspots in this manner can be much quicker and easier than attempting to create irregularly-shaped hotspots out of polygons and ellipses.
- Furthermore, embodiments of the present invention allow a single hotspot to contain non-contiguous regions. Such hotspots are useful, for example, to represent a group of objects (such as a group of lamps in an image of a room) using a single hotspot. More generally, embodiments of the present invention enable any subset of pixels in an image to be defined as a hotspot. One benefit of this flexibility is that even very thin regions of an image, such as a line having a width of a single pixel, may be defined as hotspots. A hotspot may even consist of a single pixel, or a collection of individual non-contiguous pixels.
- Such pixel-level accuracy is difficult to achieve using polygon-based image map areas. This is particularly true for irregularly-shaped objects. When drawing the polygon, the line segments tend to jump across a single pixel when the pixel is jetting out. An additional polygon image map area is required to identify the one pixel or pixels that were jumped over.
- Another disadvantage of polygon-based image maps that is avoided by embodiments of the present invention is that polygon-based image map areas must be loaded into a browser in the correct order, particularly when one image map area is enclosed within another (e.g., a small square within a larger square). If not loaded in the correct order, the inner area will not be active, and the large area will be active over the small area.
- Whether using circles, rectangles, or polygons, if the image is resized, the entire set of image maps areas must be manually redrawn to the new image size. This restricts the ability to repurpose the same image at various display sizes for thumbnail viewing or zoom-level magnifications. There are ActiveX solutions for the resizing images with hypersensitive areas, but this requires licensing and the end user to install the ActiveX application. Installing applications outside of the web browser are often subject to security policies or personal security preferences. Such problems are avoided by embodiments of the present invention.
- Another advantage of embodiments of the present invention is that the image map designer may create a single set of hotspots for a single image at a single magnification, in response to which multiple scaled versions of the image map may be created automatically for use with the image when displayed at multiple different magnifications. This feature enables the image map to remain accurate and useful even when the image is displayed at different magnifications, but without requiring the image map designer to manually create different versions of the image map for use with different image magnifications. In contrast, conventional polygon-based image maps tend to lose accuracy when they are automatically scaled for use with different image magnifications.
- Furthermore, only a single magnification (such as the highest-resolution magnification) of the image need be transmitted to the client. The client may then scale the image to the desired magnification for viewing. This reduces bandwidth requirements in comparison with techniques which require a separate image for each magnification to be transmitted to the client.
- The techniques disclosed herein are generally applicable to any web browser and any platform. They do not require the installation of web browser plug-ins, web browser extensions, or ActiveX components, thereby reducing the load on the client and automating the process of implementing image maps on the client. Furthermore, they are not limited to use with web browsers, but rather may be used to implement image maps in any kind of software.
- The techniques disclosed herein are not limited to taking actions in response to the user hovering over or selecting a hotspot. For example, the techniques disclosed herein may be used to navigate to a specific hotspot within an image. In particular, any particular hotspot may be navigated to using the coordinates of the bounding area of the hotspot and the coordinates of the first active pixel within the bounds. For example, if the user desires to view a particular product within an image, the user may select the name of the product from a drop-down menu or using a voice command, in response to which the web browser may move the location of the rendered image so that the selected product is displayed in the center of the viewing area.
- The techniques disclosed herein for applying an image map to an image at multiple magnifications is particularly well-suited for deployment on mobile phones and other mobile computing devices having small displays. The full-sized image intended for display on a desktop computer monitor may be resized for such small displays, and the automatically-generated scaled image maps may be used to implement the image map on the small display without loss of accuracy.
- It is to be understood that although the invention has been described above in terms of particular embodiments, the foregoing embodiments are provided as illustrative only, and do not limit or define the scope of the invention. Various other embodiments, including but not limited to the following, are also within the scope of the claims. For example, elements and components described herein may be further divided into additional components or joined together to form fewer components for performing the same functions.
- Image maps may be implemented either on the client side (i.e., on the user's
local machine 712 inFIG. 7 ) or on the server side (i.e., at theweb server 704 inFIG. 7 ). Embodiments of the present invention may be implemented in connection with either client side image maps or server side image maps. With a client-side image map, the user's local machine determines whether the user's mouse is over a hotspot; with a server-side image map, the user's mouse pointer location is transmitted to the server, which determines whether the user's mouse is over a hotspot and then transmits a message to the client indicating whether the user's mouse is over a hotspot. - Although for ease of explanation the
web page 706 inFIG. 7 is shown as containing only asingle image 122, theweb page 706 may contain multiple images and image map collection information for each such image. Furthermore, the techniques disclosed herein are not limited to use only with images. For example, the techniques disclosed herein may be used to treat the entire content of a display screen or window (such as a window of a web browser) as an image containing hotspots within it. - The image map
collection data structure 114 may take any of a variety of forms. For example, it may be implemented as one or more files stored in a file system, as one or more databases or database records stored in a database system, or as a data structure stored in RAM or other memory. - The techniques described above may be implemented, for example, in hardware, software, firmware, or any combination thereof. The techniques described above may be implemented in one or more computer programs executing on a programmable computer including a processor, a storage medium readable by the processor (including, for example, volatile and non-volatile memory and/or storage elements), at least one input device, and at least one output device. Program code may be applied to input entered using the input device to perform the functions described and to generate output. The output may be provided to one or more output devices.
- Each computer program within the scope of the claims below may be implemented in any programming language, such as assembly language, machine language, a high-level procedural programming language, or an object-oriented programming language. The programming language may, for example, be a compiled or interpreted programming language.
- Each such computer program may be implemented in a computer program product tangibly embodied in a machine-readable storage device for execution by a computer processor. Method steps of the invention may be performed by a computer processor executing a program tangibly embodied on a computer-readable medium to perform functions of the invention by operating on input and generating output. Suitable processors include, by way of example, both general and special purpose microprocessors. Generally, the processor receives instructions and data from a read-only memory and/or a random access memory. Storage devices suitable for tangibly embodying computer program instructions include, for example, all forms of non-volatile memory, such as semiconductor memory devices, including EPROM, EEPROM, and flash memory devices; magnetic disks such as internal hard disks and removable disks; magneto-optical disks; and CD-ROMs. Any of the foregoing may be supplemented by, or incorporated in, specially-designed ASICs (application-specific integrated circuits) or FPGAs (Field-Programmable Gate Arrays). A computer can generally also receive programs and data from a storage medium such as an internal disk (not shown) or a removable disk. These elements will also be found in a conventional desktop or workstation computer as well as other computers suitable for executing computer programs implementing the methods described herein, which may be used in conjunction with any digital print engine or marking engine, display monitor, or other raster output device capable of producing color or gray scale pixels on paper, film, display screen, or other output medium.
Claims (28)
1. A computer-implemented method comprising:
(A) receiving a first instruction from a first user to select a first portion of a first digital image, the first digital image comprising a plurality of pixels;
(B) in response to the first instruction, selecting a first subset of the plurality of pixels in the first digital image;
(C) storing a record of the first subset in an image map collection data structure; and
(D) transmitting the image map collection data structure and the first digital image to a client via HTTP.
2. The method of claim 1 , wherein (C) comprises encoding the first subset for HTTP transmission.
3. The method of claim 1 , wherein (A) comprises receiving a first instruction from a first user to select an object, wherein the first instruction does not specify the shape of the object, and wherein (B) comprises selecting the first subset by applying a predetermined function to the first instruction.
4. The method of claim 1 , wherein the first subset consists of a single pixel.
5. The method of claim 1 , wherein the first subset comprises non-contiguous sets of pixels.
6. The method of claim 1 , further comprising:
(E) receiving a second instruction from the first user to select a second portion of the first digital image;
(F) in response to the second instruction, selecting a second subset of the plurality of pixels in the first digital image; and
(G) storing a record of the second subset in the image map collection data structure.
7. The method of claim 1 , wherein (C) comprises:
(C)(1) identifying a rectangular outer boundary of the first subset; and
(C)(2) storing each set of eight consecutive pixels in the subset as a one-byte value in the image map collection data structure.
8. An apparatus comprising:
means for receiving a first instruction from a first user to select a first portion of a first digital image, the first digital image comprising a plurality of pixels;
means, responsive to the first instruction, for selecting a first subset of the plurality of pixels in the first digital image;
means for storing a record of the first subset in an image map collection data structure; and
means for transmitting the image map collection data structure and the first digital image to a client via HTTP.
9. A computer-implemented method comprising:
(A) receiving a first instruction from a first user to select an object in a first digital image, wherein the first instruction does not specify the shape of the object, and wherein
the first digital image comprising a plurality of pixels;
(B) in response to the first instruction, selecting a first subset of the plurality of pixels in the first digital image by applying a predetermined function to the first instruction; and
(C) storing a record of the first subset in an image map collection data structure.
10. An apparatus comprising:
means for receiving a first instruction from a first user to select an object in a first digital image, wherein the first instruction does not specify the shape of the object, and wherein the first digital image comprising a plurality of pixels;
means, responsive to the first instruction, for selecting a first subset of the plurality of pixels in the first digital image by applying a predetermined function to the first instruction; and
means for storing a record of the first subset in an image map collection data structure.
11. A computer-implemented method comprising:
(A) receiving a first instruction from a first user to select a first portion of a first digital image, the first digital image comprising a plurality of pixels;
(B) in response to the first instruction, selecting a first subset of the plurality of pixels in the first digital image;
(C) storing a record of the first subset in an image map collection data structure, comprising:
(1) storing the record of the first subset in a first image map in the image map collection data structure; and
(2) storing a record of a scaled version of the first subset in a second image map in the image map collection data structure.
12. The method of claim 11 , wherein (C) comprises encoding the first subset for HTTP transmission.
13. The method of claim 11 , wherein (A) comprises receiving a first instruction from a first user to select an object, wherein the first instruction does not specify the shape of the object, and wherein (B) comprises selecting the first subset by applying a predetermined function to the first instruction.
14. The method of claim 11 , wherein the first subset consists of a single pixel.
15. The method of claim 11 , wherein the first subset comprises non-contiguous sets of pixels.
16. An apparatus comprising:
means for receiving a first instruction from a first user to select a first portion of a first digital image, the first digital image comprising a plurality of pixels;
means, responsive to the first instruction, for selecting a first subset of the plurality of pixels in the first digital image;
means for storing a record of the first subset in an image map collection data structure, comprising:
means for storing the record of the first subset in a first image map in the image map collection data structure; and
means for storing a record of a scaled version of the first subset in a second image map in the image map collection data structure.
17. A computer-implemented method comprising:
(A) receiving a first instruction from a first user to select a first portion of a first digital image, the first digital image comprising a plurality of pixels;
(B) in response to the first instruction, selecting a first subset of the plurality of pixels in the first digital image;
(C) storing a record of the first subset in an image map collection data structure, comprising:
(C)(1) identifying a rectangular outer boundary of the first subset; and
(C)(2) storing each set of eight consecutive pixels in the subset as a one-byte value in the image map collection data structure.
18. The method of claim 17 , wherein (C) comprises encoding the first subset for HTTP transmission.
19. The method of claim 17 , wherein (A) comprises receiving a first instruction from a first user to select an object, wherein the first instruction does not specify the shape of the object, and wherein (B) comprises selecting the first subset by applying a predetermined function to the first instruction.
20. The method of claim 17 , wherein the first subset consists of a single pixel.
21. The method of claim 17 , wherein the first subset comprises non-contiguous sets of pixels.
22. An apparatus comprising:
means for receiving a first instruction from a first user to select a first portion of a first digital image, the first digital image comprising a plurality of pixels;
means, responsive to the first instruction, for selecting a first subset of the plurality of pixels in the first digital image;
means for storing a record of the first subset in an image map collection data structure, comprising:
means for identifying a rectangular outer boundary of the first subset; and
means for storing each set of eight consecutive pixels in the subset as a one-byte value in the image map collection data structure.
23. A computer-implemented method performed by a client device, the method comprising:
(A) receiving an image map collection data structure and a first digital image;
(B) identifying a current location of a user cursor within a rendering of the first digital image at the client;
(C) reading, from the image map collection data structure, a record of an outer boundary of a first subset of the first digital image;
(D) determining whether the current location is within the first subset by reference to pixels solely within the outer boundary; and
(E) if the current location is within the first subset, taking a first predetermined action associated with the first subset.
24. An apparatus comprising:
means for receiving an image map collection data structure and a first digital image;
means for identifying a current location of a user cursor within a rendering of the first digital image at a client device;
means for reading, from the image map collection data structure, a record of an outer boundary of a first subset of the first digital image;
means for determining whether the current location is within the first subset by reference to pixels solely within the outer boundary; and
means for taking a first predetermined action associated with the first subset if the current location is within the first subset.
25. A computer-implemented method performed by a client device, the method comprising:
(A) receiving an image map collection data structure and a first digital image;
(B) scaling the first digital image to produce a scaled digital image;
(C) identifying a current location of a user cursor within a rendering of the scaled digital image;
(D) identifying a first subset of the scaled digital image;
(E) determining whether the current location is within the first subset; and
(F) if the current location is within the first subset, taking a first predetermined action associated with the first subset.
26. The method of claim 25 , wherein the first subset consists of a single pixel.
27. The method of claim 25 , wherein the first subset comprises non-contiguous sets of pixels.
28. An apparatus comprising:
means for receiving an image map collection data structure and a first digital image;
means for scaling the first digital image to produce a scaled digital image;
means for identifying a current location of a user cursor within a rendering of the scaled digital image;
means for identifying a first subset of the scaled digital image;
means for determining whether the current location is within the first subset; and
means for taking a first predetermined action associated with the first subset if the current location is within the first subset.
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
US13/564,255 US20120297280A1 (en) | 2009-07-16 | 2012-08-01 | Web Page Hot Spots |
Applications Claiming Priority (2)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
US12/504,497 US8261179B2 (en) | 2009-07-16 | 2009-07-16 | Web page hot spots |
US13/564,255 US20120297280A1 (en) | 2009-07-16 | 2012-08-01 | Web Page Hot Spots |
Related Parent Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
US12/504,497 Division US8261179B2 (en) | 2009-07-16 | 2009-07-16 | Web page hot spots |
Publications (1)
Publication Number | Publication Date |
---|---|
US20120297280A1 true US20120297280A1 (en) | 2012-11-22 |
Family
ID=43450229
Family Applications (2)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
US12/504,497 Active - Reinstated 2030-04-28 US8261179B2 (en) | 2009-07-16 | 2009-07-16 | Web page hot spots |
US13/564,255 Abandoned US20120297280A1 (en) | 2009-07-16 | 2012-08-01 | Web Page Hot Spots |
Family Applications Before (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
US12/504,497 Active - Reinstated 2030-04-28 US8261179B2 (en) | 2009-07-16 | 2009-07-16 | Web page hot spots |
Country Status (4)
Country | Link |
---|---|
US (2) | US8261179B2 (en) |
EP (1) | EP2454655A4 (en) |
CA (1) | CA2783658C (en) |
WO (1) | WO2011009019A2 (en) |
Cited By (1)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US20140075287A1 (en) * | 2012-09-10 | 2014-03-13 | Usablenet Inc. | Methods for facilitating web page image hotspots and devices thereof |
Families Citing this family (22)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US9495697B2 (en) | 2009-12-10 | 2016-11-15 | Ebay Inc. | Systems and methods for facilitating electronic commerce over a network |
US20110205231A1 (en) * | 2010-02-24 | 2011-08-25 | Oracle International Corporation | Mapping data in enterprise applications for operational visibility |
US8688502B2 (en) * | 2010-02-24 | 2014-04-01 | Oracle International Corporation | Business intelligence dashboards for performance analysis |
US9159087B2 (en) * | 2011-01-21 | 2015-10-13 | Flipp Corporation | Digital flyer system with contextual information |
US8988468B2 (en) | 2011-01-21 | 2015-03-24 | Wishabi Inc. | Interactive flyer system |
US8527359B1 (en) | 2011-02-23 | 2013-09-03 | Amazon Technologies, Inc. | Immersive multimedia views for items |
US9996210B2 (en) * | 2011-06-30 | 2018-06-12 | International Business Machines Corporation | Enabling host active element content related actions on a client device within remote presentations |
US9207754B2 (en) | 2011-10-20 | 2015-12-08 | Microsoft Technology Licensing, Llc | Enabling immersive, interactive desktop image presentation |
US9934316B2 (en) * | 2011-10-26 | 2018-04-03 | Oath Inc. | Contextual search on digital images |
US9037958B2 (en) | 2011-11-22 | 2015-05-19 | International Business Machines Corporation | Dynamic creation of user interface hot spots |
US8548990B2 (en) | 2011-12-30 | 2013-10-01 | Microsoft Corporation | Presenting interactive images with search results |
US9337831B2 (en) * | 2012-01-09 | 2016-05-10 | L&P Property Management Company | Capacitive wire sensing for furniture |
US20140108941A1 (en) * | 2012-10-17 | 2014-04-17 | Christopher Stephen Joel | Method and Apparatus for Automatically Optimizing the Loading of Images in a Cloud-Based Proxy Service |
US9305330B2 (en) | 2012-10-25 | 2016-04-05 | Microsoft Technology Licensing, Llc | Providing images with zoomspots |
CN103092524B (en) * | 2013-01-31 | 2015-09-30 | 广东欧珀移动通信有限公司 | A kind of method and mobile terminal being realized sectional drawing by touch-screen |
US9098477B2 (en) | 2013-05-15 | 2015-08-04 | Cloudflare, Inc. | Method and apparatus for automatically optimizing the loading of images in a cloud-based proxy service |
GB2534747B (en) * | 2013-10-30 | 2020-10-14 | Xcircular Ltd | Automatic image composer |
US10587714B1 (en) * | 2014-03-12 | 2020-03-10 | Amazon Technologies, Inc. | Method for aggregating distributed data |
US9787752B2 (en) * | 2014-09-03 | 2017-10-10 | Sap Se | Hotspot editor for a user interface |
CN104361082A (en) * | 2014-11-07 | 2015-02-18 | 北京奇虎科技有限公司 | Method and device for displaying specified element in web page in browser |
CN107727701A (en) * | 2017-10-12 | 2018-02-23 | 中磊电子(苏州)有限公司 | Shield soaks detection method and device |
CN110285142A (en) * | 2019-06-04 | 2019-09-27 | 清华大学 | The thrust magnetic suspension bearing of semi-open type |
Citations (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US5737553A (en) * | 1995-07-14 | 1998-04-07 | Novell, Inc. | Colormap system for mapping pixel position and color index to executable functions |
US20090037838A1 (en) * | 2007-08-03 | 2009-02-05 | Microsoft Corporation | Fractal display advertising on computer-driven screens |
Family Cites Families (21)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US6034689A (en) * | 1996-06-03 | 2000-03-07 | Webtv Networks, Inc. | Web browser allowing navigation between hypertext objects using remote control |
US6721952B1 (en) * | 1996-08-06 | 2004-04-13 | Roxio, Inc. | Method and system for encoding movies, panoramas and large images for on-line interactive viewing and gazing |
US7139970B2 (en) | 1998-04-10 | 2006-11-21 | Adobe Systems Incorporated | Assigning a hot spot in an electronic artwork |
US6978418B1 (en) | 1999-04-13 | 2005-12-20 | Hewlett-Packard Development Company, L.P. | Dynamic-adaptive client-side image map |
WO2000079799A2 (en) | 1999-06-23 | 2000-12-28 | Sarnoff Corporation | Method and apparatus for composing image sequences |
US7724925B2 (en) * | 1999-12-02 | 2010-05-25 | Thermal Wave Imaging, Inc. | System for generating thermographic images using thermographic signal reconstruction |
US20010051881A1 (en) * | 1999-12-22 | 2001-12-13 | Aaron G. Filler | System, method and article of manufacture for managing a medical services network |
US6822663B2 (en) * | 2000-09-12 | 2004-11-23 | Adaptview, Inc. | Transform rule generator for web-based markup languages |
AU2001292946A1 (en) * | 2000-09-26 | 2002-04-08 | Advantage 3D Llc | Method and system for generation, storage and distribution of omni-directional object views |
US20020126990A1 (en) | 2000-10-24 | 2002-09-12 | Gary Rasmussen | Creating on content enhancements |
US7203361B1 (en) * | 2001-03-16 | 2007-04-10 | Hand Held Products, Inc. | Adaptive digitizer for optical reader |
US20030149983A1 (en) | 2002-02-06 | 2003-08-07 | Markel Steven O. | Tracking moving objects on video with interactive access points |
AU2003239385A1 (en) * | 2002-05-10 | 2003-11-11 | Richard R. Reisman | Method and apparatus for browsing using multiple coordinated device |
US20040073941A1 (en) * | 2002-09-30 | 2004-04-15 | Ludvig Edward A. | Systems and methods for dynamic conversion of web content to an interactive walled garden program |
US7594194B2 (en) * | 2003-09-24 | 2009-09-22 | Nokia Corporation | Portrayal of navigation objects |
US7522774B2 (en) * | 2004-03-10 | 2009-04-21 | Sindhara Supermedia, Inc. | Methods and apparatuses for compressing digital image data |
US20060062362A1 (en) * | 2004-09-22 | 2006-03-23 | Davis Franklin A | System and method for server assisted browsing |
US7639387B2 (en) | 2005-08-23 | 2009-12-29 | Ricoh Co., Ltd. | Authoring tools using a mixed media environment |
US7796837B2 (en) | 2005-09-22 | 2010-09-14 | Google Inc. | Processing an image map for display on computing device |
KR20090015628A (en) | 2007-08-09 | 2009-02-12 | 에스케이 텔레콤주식회사 | Method and apparatus for generating of image map source |
EP2212858B1 (en) * | 2007-11-14 | 2017-05-03 | Intergraph Corporation | Method and apparatus of taking aerial surveys |
-
2009
- 2009-07-16 US US12/504,497 patent/US8261179B2/en active Active - Reinstated
-
2010
- 2010-07-16 EP EP10800588A patent/EP2454655A4/en not_active Withdrawn
- 2010-07-16 CA CA2783658A patent/CA2783658C/en active Active
- 2010-07-16 WO PCT/US2010/042215 patent/WO2011009019A2/en active Application Filing
-
2012
- 2012-08-01 US US13/564,255 patent/US20120297280A1/en not_active Abandoned
Patent Citations (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US5737553A (en) * | 1995-07-14 | 1998-04-07 | Novell, Inc. | Colormap system for mapping pixel position and color index to executable functions |
US20090037838A1 (en) * | 2007-08-03 | 2009-02-05 | Microsoft Corporation | Fractal display advertising on computer-driven screens |
Cited By (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US20140075287A1 (en) * | 2012-09-10 | 2014-03-13 | Usablenet Inc. | Methods for facilitating web page image hotspots and devices thereof |
US9311281B2 (en) * | 2012-09-10 | 2016-04-12 | Usablenet Inc. | Methods for facilitating web page image hotspots and devices thereof |
Also Published As
Publication number | Publication date |
---|---|
US8261179B2 (en) | 2012-09-04 |
CA2783658A1 (en) | 2011-01-20 |
CA2783658C (en) | 2013-05-14 |
WO2011009019A3 (en) | 2011-04-14 |
EP2454655A4 (en) | 2013-01-09 |
WO2011009019A2 (en) | 2011-01-20 |
US20110016376A1 (en) | 2011-01-20 |
EP2454655A2 (en) | 2012-05-23 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
US8261179B2 (en) | Web page hot spots | |
US6587118B1 (en) | Image displaying processing method, medium including an image displaying processing program stored thereon, and image displaying processing apparatus | |
US9484006B2 (en) | Manipulation of textual content data for layered presentation | |
JP5290487B2 (en) | System and method for digital document processing | |
KR100743781B1 (en) | Systems and methods for digital document processing | |
US7600183B2 (en) | System and method for data publication through web pages | |
AU719368B2 (en) | Font sharing system and method, and recording medium storing program for executing font sharing method | |
US6700589B1 (en) | Method, system, and program for magnifying content downloaded from a server over a network | |
US7240294B2 (en) | Method of constructing a composite image | |
JP2003303091A (en) | Image communication device and image communication method | |
US20050188304A1 (en) | Method and system for browsing a low-resolution image | |
US20190073342A1 (en) | Presentation of electronic information | |
US20070055931A1 (en) | Document data output device capable of appropriately outputting document data containing a text and layout information | |
US11281849B2 (en) | System and method for printable document viewer optimization | |
US8269791B2 (en) | Information processing apparatus and method for processing a vector image composed of a plurality of objects described by structured document data | |
US6590674B1 (en) | Method and apparatus for creating and maintaining graphic representations of documents under a universal format | |
JP2009080573A (en) | Display method | |
JP2010049158A (en) | Image processing device | |
US20030001864A1 (en) | Method and system for manipulation of garphics information | |
JP2005182735A (en) | Document data display device, cellular phone device, document data display method, document data display program, computer-readable recording medium with it recorded, document data printer, document data output device, document data output method, document data output program, and computer-readable recording medium with it recorded | |
US20030126553A1 (en) | Document information processing method, document information processing apparatus, communication system and memory product | |
JP2007048089A (en) | Data processor, data processing method, data processing program, recording medium recorded of data processing program, and data structure of structured document data file | |
KR101160973B1 (en) | Effective Graphic Format image file forming method and device therefor | |
JP2009181450A (en) | Image processing device, image processing method, and image-processing program | |
JP2006331342A (en) | Content layout recognition program, recognition system, recognition method, content layout conversion program, conversion system, and conversion method |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
AS | Assignment |
Owner name: BENEVOLTEK, INC., MAINE Free format text: ASSIGNMENT OF ASSIGNORS INTEREST;ASSIGNOR:HINSON, DAVID;REEL/FRAME:028699/0511 Effective date: 20090716 |
|
STCB | Information on status: application discontinuation |
Free format text: ABANDONED -- FAILURE TO RESPOND TO AN OFFICE ACTION |