Clickable image

From Wikipedia, the free encyclopedia

A clickable image is an image that can be activated using a computer mouse. The term can be used to refer to graphical buttons in a graphical user interface (GUI) such as that found in Microsoft Windows or Apple's Mac OS X.

However, it is most often used to describe a method of superimposing hyperlinks on an image held in a webpage. Clickable image maps can be implemented in two ways: as client-side image maps and as server-side image maps.

1 Client-side image maps
2 Server-side image maps
3 Examples
4 See also
5 References

[edit] Client-side image maps

For client-side image maps, the client's browser software controls the way in which the user interacts with the image.

The simplest implementation method is to use HTML image maps. Explicit pixel co-ordinates of rectanges and other shapes representing hot spots can be defined in HTML code. When the user clicks on one of these, the browser navigates to the hyperlink that has been specified in the code. This form of image map gives no feedback to the user of the location of these hot spots, or of which one has been selected, prior to the activation of the hyperlink.

More sophisticated client-side image maps can be implemented by making use of progamming environments such as XHTML/CSS, Javascript or Java. These image maps can give an indication of where the hotspot are when the user's mouse moves over the image. They can also give a rollover effect, highting the hotspot that the user is hovering over (including the display of additional superimposed text and imagery), prior the activation of the link by the user.

Of the three techniques listed above, the use of XHTML/CSS is not as good as Javascript and Java as regards cross-platform browser compatibility. However Java may be prevented from running on machines with tight security settings or through firewalls.

[edit] Server-side image maps

For server-side image maps, When the user clicks on the image, the screen coordinates are sent directly to the server where the document resides. Mouse coordinates, expressed as screen pixel values relative to the image are picked up by the server and the server redraws the image accordingly.