Clickable image

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.

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 rectangles 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 hotspots are when the user's mouse moves over the image. They can also give a rollover effect, highlighting the hotspot that the user is hovering over (including the display of additional superimposed text and imagery), prior to 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 in regards to cross-platform browser compatibility. However Java may be prevented from running on machines with tight security settings or through firewalls.

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.

Examples

Good examples of clickable images can be found on the web at the following locations:

* [http://www.frankmanno.com/ideas/css-imagemap/index_js.html Use of CSS and Javascript]
* [http://www.cssplay.co.uk/menu/imap.html Use of XHTML and CSS]
* [http://www.webreference.com/programming/image_map/examples/index.htm Use of XHTML and CSS to display additional data]
* [http://www.w3schools.com/js/tryit.asp?filename=tryjs_imagemap Use of Javascript onMouseOver]
* [http://java.sun.com/applets/jdk/1.4/demo/applets/ImageMap/example1.html Use of Java Applet]
* [http://www.extension.iastate.edu/HTML/IMAP/ Use of map file called from HTML]
* [http://www.nigelbee.pwp.blueyonder.co.uk/image_map.htm Use of Javascript onMouseOver image swaps]

See also

* Graphical user interface
* hyperlink

References

* [http://encarta.msn.com/dictionary_701705054/clickable.html Clickable at MSN Encarta]