Image maps

[0002] The present invention relates to an image map component and a method of determining user selection from an image.

[0003] As Internet connectivity rates increase, web pages can include more information, and as the number of users of the Internet diversifies to include less experienced computer users, web pages are becoming more and more interactive as user expectations for web page user friendliness are raised. Users no longer wish to use menus, scroll bars or to type options when a more intuitive alternative may be available.

[0004] For this reason, web page designers are turning to images to represent a set of options from which a user may choose. For example, a company producing a range of products, for example, household accessories, may wish to include an image showing each accessory in the range rather than having a user select from a menu of products or click on a product number. The company wants a user, on seeing their required choice in an image, simply to click on the required accessory and be brought to the relevant page.

[0005] An image map is a mechanism that enables a user to select one of several semantically distinct regions in a picture.

[0006] The best known implementation of an image map is provided as an HTML construct. To use an HTML image map, a content author uses an <IMG> tag to define an image and specifies the USEMAP attribute to identify the image as a client-side image map. A series of <MAP> and <AREA> tags are then coded to define a series of geometrical shapes that define the regions within the image. The supported geometrical shapes are circles, rectangles, and polygons. HTML also provides equivalent support for server side image maps.

[0007] Some utilities do exist to allow an author to specify the geometrical shapes visually. However, these are still difficult and time-consuming to use for mapping complex, irregular regions.

[0008] Other examples of image maps, are tessellated rectangular images driven by JavaScript.

[0009] In any case, the definition of regions using geometrical primitives does not adequately support mapping of images with the following characteristics:

[0010] I. regions with complex, irregular shapes;

[0011] II. discontiguous regions belonging to the same semantic region; and

[0012] III. where highly accurate mapping is required to support exact visual feedback such as: rollover emphasis (a region is accurately highlighted to show mouse proximity) or selection emphasis (a region is accurately highlighted to show selection status)

[0013] Characteristics I and II are typical of complex images such as maps, images, or creative artwork. The lack of support for such images may place restrictions on the choice of image and the creativity of visual designers. Criterion III is related to usability. It is clear that, as well as a pleasing display, good visual feedback is a key factor in the usability of applications.

[0014] A technique that overcomes some of these prior art problems in providing “hot-spots” in an image is PanoramIX from IBM which varies the red component of each pixel in a mapping image and uses an external lookup table to translate that red component to a unique link. See http://blackburn.watson.ibm.com/panoramix/example.html and related pages for further information.

[0015] The present invention on the other hand provides an image map component an image map component comprising: means for reading a display image and for causing said display image to be displayed; means for reading a mapping image comprising a plurality of regions coloured from a pre-determined sequence of colours; means, responsive to user interaction with said display image, for obtaining a coordinate in said display image and for reading an index colour of a corresponding coordinate in said mapping image; means, responsive to said index colour being from said pre-determined sequence of colours, for indicating user selection of a region of said display image.

[0016] The present invention provides a general purpose component solution to be adapted to solve a range of different business problems by collaborating with other components. It supports both selection in other components in response to user interactions and selection within itself in response to calls from other components. The Panoramix technique is implemented within a specialized, dedicated application intended to navigate panoramas. It is not a Java Bean, ActiveX control, or component and does not appear to interact with external components.

[0017] The invention exploits accurate region definition to support precise, visually attractive highlighting. The Panoramix technique appears to use the mapping image simply to correlate mouse clicks to identify hot spots.

[0018] The invention emphasises the use of a predetermined sequences of colors to support a natural and direct definition process. The Panoramix technique does not use a predetermined sequence of colors. Disadvantages of the PanoramIX method include less visual discrimination between mapping colors for large numbers of regions, and the additional effort, cognitive load, and potential for errors introduced by the additional step of manually editing a lookup table using a proprietary syntax.

[0019] It also appears that cutaway emphasis and pluggable emphasis techniques are not addressed by the Panoramix technique.

[0020] Embodiments of the invention will now be described with reference to the accompanying drawings, in which:

[0021] FIG. 1 is a schematic diagram.illustrating the operation of an image map component according to the invention;

[0022] FIG. 2 is an example of a display image for the image map component of FIG. 1;

[0023] FIG. 3 is a corresponding mapping image including a color sequence for the display image of FIG. 2;

[0024] FIGS. 4(a) and 4(b) are examples of portions of the display image in use showing the representations of regions modified by selection and rollover emphases;

[0025] FIG. 5(a) shows a cutaway pattern image; and

[0026] FIG. 5(b) shows an alternative embodiment of the invention in operation with the cutaway pattern image of FIG. 5(a).

[0027] The present invention provides an image map component implementing a mapping technique that does not rely on describing regions in terms of geometrical shapes. It supports highly accurate mapping through a direct, natural user interface.

[0028] The invention is preferably implemented as a Java Bean, although it will be seen that the invention is equally applicable to Microsoft's ActiveX technology or any other application building technology, in which self contained components can be assembled together with other components to create application solutions.

[0029] Referring to FIG. 1, the invention essentially involves passing a display image and a mapping image or a reference thereto to the image map component. In describing the preferred embodiment, an image map component is used to display a map of Europe, FIG. 2, and to enable a user to select a country from that map in order to, for example, display a list of wines.

[0030] The display image contains the artwork to be displayed to the user. This image is typically acquired or created by a graphic designer. It should be noted that this image contains no semantic information that can be used by the image map component.

[0031] The mapping image is a version of the display image in which regions of interest are filled with a color selected from a pre-determined sequenced set of index colors. The regions do not have to be contiguous as in the case of the regions coloured with the index colour#n in FIG. 1.

[0032] In the example of FIG. 3 which is the mapping image corresponding to the display image of FIG. 2, the sequenced set of predetermined index colors begins with, for example, Magenta=0 to Yellow=4. This image is typically created by a graphic designer by copying and adapting the display image using a graphics software application, for example, Adobe Photoshop.

[0033] Graphics applications support the task of creating the mapping image through design-time tools to support the detection and enhancement of images and smart flood-fill of bounded areas. The colors applied to regions of the mapping image are used to define the corresponding regions of the display image. The sequence of each of the applied colors within the set of colors also implies a sequence number for the region defined by that color.

[0034] It should be noted at this stage that the mapping image is never seen by the user and so need not relate directly to the display image as in the case of FIGS. 2 and 3. It should also be seen that the designer does not need to alter regions in the mapping image corresponding to regions of the display image which are of no interest, as in the case of Russia or Finland in FIG. 3. This may cause the image map component to return less than intuitively correct values if the user clicks on pixels from such regions which happen to be from the pre-determined sequence of colours, but nonetheless makes the generation of the mapping image quicker.

[0035] Alternatively, a colour from the sequence may be associated with regions of no interest so that the image map component can suppress event generation from such regions.

[0036] The operation of the invention is first explained broadly according to the user's view.

[0037] 1. When the application is a web page, the HTML page is downloaded to a client web browser and an applet including an instance of the image map component is instantiated. (It should be seen that the component may be part of a stand-alone application not necessarily used in a web context.) The instance of the image map component causes the display image to be displayed, FIG. 2, in an area of the screen defined by the <APPLET> tags parameters.

[0038] 2. FIG. 4(a) shows, in detail, the display image as the user moves the mouse over Portugal. The entire region for Portugal is highlighted in a lighter color to show a rollover emphasis.

[0039] 3. FIG. 4(b) shows, in detail, the display image when the user clicks on France. The entire region for France is highlighted in a darker color to show a selection emphasis.

[0040] 4. Usually, one or more components of the application (not shown) will be listening for the generation of an event indicating that the user has made a selection.

[0041] Preferably, such listener components are prompted by the image map component, and they interrogate the properties of the image map component to determine the user selection. In the present example, these listener components might use the property value to display a list of wines for sale, in this case French wines or perhaps to display a photograph of the region or even to jump to a further web page specific to the region.

[0042] In more detail:

[0043] 1. The application including the image map component starts and the image map component causes the display image to be shown.

[0044] 2. When a user moves the mouse pointer into the image map screen display, the map component gains focus and begins to respond to mouse events:

[0045] 2.1 Whenever the mouse moves, the image map component determines the coordinates of the mouse within the display image, say point x in FIG. 1.

[0046] 2.2 The image map component then retrieves a mapping color, by examining the color of the pixel x at the corresponding coordinates in the mapping image. In the case of FIG. 1 this will return the colour#n, in the case of FIG. 4(a) the colour will be yellow.

[0047] 2.3 If the mapping color matches any of the colors within the set of predetermined index colors . . .

[0048] 2.4 . . . the mouse is considered to be within a region of interest, in this case Portugal. The extent of the region is all pixels of the display image where the corresponding pixel of the mapping image is set to that mapping color.

[0049] 2.5 . . . the sequence number of that region is derived from the sequence of the mapping color within the sequenced set of predetermined index colors.

[0050] 2.6 . . . optionally, a visual effect is applied to emphasize all pixels in the display image for which the corresponding color in the mapping image is the same as the color in mapping image under the mouse. Thus, Portugal is displayed lighter.

[0051] 3. When user clicks the mouse within the image map:

[0052] 3.1 The image map component determines coordinates of mouse within display image.

[0053] 3.2 The image map component retrieves a mapping color by examining the color of the pixel at the corresponding coordinates in the mapping image.

[0054] 3.3 If the mapping color matches any of the colors within the set of predetermined index colors . . .

[0055] 3.4 . . . the mouse is considered to be within a region, in the case of FIG. 4(b) this is France.

[0056] 3.5 . . . the sequence number of that region is derived from the sequence of the mapping color within the sequenced set of predetermined index colors.

[0057] 3.6 . . . preferably, other listener components are notified that the user has selected the region with that sequence number. In this case, a notified listener could display a list of wines from France.

[0058] 3.7 . . . preferably, a visual effect is applied to emphasize all pixels in the display image for which the corresponding color in the mapping image is the same as the color in the mapping image under the mouse. (France is displayed darker).

[0059] Steps 2.7 and 3.7 above enable the image map component to support a variety of highlighting techniques to show rollover and selection emphasis. These techniques programmatically inspect and modify each pixel in a region of the display image. For example, as described above, on rollover or selection, the image map can modify the display image to show a region lighter or darker, or with modified or inverted colors.

[0060] It also enables an additional emphasis technique known as trap-door or cutaway emphasis.

[0061] In an alternative embodiment, trap-door emphasis uses an additional emphasis image, FIG. 5(a), to define an arbitrary emphasis designed by a graphic designer. The image map displays the emphasis image underneath the display image. Because the display image is usually opaque, the emphasis image is not normally seen by the user.

[0062] To emphasise the display in response to rollover or selection in a region, that region in the display image is made transparent or partially transparent to allow the emphasis image to be revealed in that region only. FIG. 5(b), shows the selection emphasis for France applied using trap-door emphasis.

[0063] The interface to a Java bean image map component implementing the invention is described below in terms of its properties, events and methods.

[0064] Properties

[0065] displayImage A string containing the file name of the image to be displayed by the component.

[0066] colorMapImage A string containing the file name of the image that defines the discrete regions of the display image by filling those regions with predefined colors. This image is not displayed by the component.

[0067] cutawayImage A string containing the file name of the image to be used for cutaway emphasis. Only required if cutaway emphasis is used.

[0068] rolloverEmphasisStyle An integer defining a style of emphasis to be applied to a region when user moves the mouse over that region. The integer value identifies one of a set of predefined emphasis styles such as darken, lighten, negative, or cutaway.

[0069] selectionEmphasisStyle Another integer defining a style of emphasis to be applied to a region when the user selects a point within that region. The integer value identifies one of a set of predefined emphasis styles such as darken, lighten, negative, or cutaway.

[0070] selectedRegion An integer containing the Index of selected region. It is this value that is used by listener components.

[0071] tooltips An array of strings to be displayed as tooltips for each respective region when the user leaves the mouse over a point within that region for more than a pre-determined time.

[0072] Methods

[0073] ImagePicker A constructor which causes the display image to be displayed.

[0074] add/remove ItemListener Methods called by another component to register or unregister that component as a listener.

[0075] get/set DisplayImage Methods for returning or setting displayImage.

[0076] get/set ColorMapImage Methods for returning or setting colorMapImage.

[0077] get/set CutawayImage Methods for returning or setting cutawayImage.

[0078] get/set SelectionEmphasisStyle Methods for returning or setting selectionEmphasisStyle.

[0079] get/set RolloverEmphasisStyle Methods for returning and setting rolloverEmphasisStyle.

[0080] get/set Tooltips Methods for returning and setting toolTips.

[0081] get/set SelectedRegion Methods for returning or setting selectedRegion. getSelectedRegion is primarily used by listener components to determine the selection once they have been notified of an ItemEvent. setSelectedRegion could be used by the constructor class to set a default region, perhaps to show to a use that the display image is interactive. It could also be used by other components to set a selected region. For example, a user may pick a name of a wine from a first list box component, this could be checked by another component to determine the country of origin of the wine which in turn sets the selected region accordingly, to cause the country to be highlighted.

[0082] Events

[0083] ItemEvent Notifies another registered listener component that a region has been selected or deselected.

[0084] It should be seen that while the preferred embodiments have been described with reference to a mouse, the invention is applicable to any pointing device.