image map

For image maps in Wikipedia, see Extension:ImageMap.

In HTML, an image map is a list of coordinates relating to a specific image, created in order to hyperlink areas of the image to various destinations (as opposed to a normal image link, in which the entire area of the image links to a single destination). For example, a map of the world may have each country hyperlinked to further information about that country. The intention of an image map is to provide an easy way of linking various parts of an image without dividing the image into separate image files.

Implementation of image maps

It is possible to create image maps by hand, using a text editor, however doing so requires that the web designer knows how to code HTML and also requires them to know the coordinates of the areas that they wish to place over the image. As a result, most image maps coded by hand are simple polygons.

Because creating image maps in a text editor requires much time and effort, there are many applications that allow the web designer to quickly and easily create image maps much like they would create shapes in a Vector graphics editor. Examples of these are Adobe’s Dreamweaver and KImageMapEditor (for KDE).

Rollover effects

Image maps can be implemented so that the user is given a visual indication of what can be clicked on. This can be an indication of the position of all the hot spots, or can be a rollover indication of the currently active hot spot. This functionality cannot be implemented using pure HTML, but can be implemented when a Clickable image is built using a programming environment such as XHTML with Cascading Style Sheets, Javascript and Java.

Rollover effects can be implemented by writing Javascript code to swap out the entire image with one that has that particular area highlighted, but this technique uses a considerable amount of bandwidth.

When using Photoshop areas can be made clickable by layering them via a copy. You can then select the original background layer and drop the brightness down to make the clickable areas stand out. Alternately, you can break the image itself into separate images with their own events.

Examples

• Use of CSS and Javascript
• Use of XHTML and CSS
• Use of XHTML and CSS to display additional data
• Use of Javascript onMouseOver
• Use of Java Applet
• Use of map file called from HTML
• Use of Javascript onMouseOver image swaps

External links

• Info on Image Maps from the W3C
• 3-step Tutorial on Image Maps
• Tutorial on Image Maps
• Browser-based Image Map Creator, supports "poly" ,"circle", "rect", Firefox, Internet Explorer compatible
• Another Browser-based Image Map Creator WYSIWYG, supports "poly" only

Donate to Wikimedia