Image map

From Wikipedia, the free encyclopedia

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 resorting to dividing the image into separate parts.

1 Implementation of image maps
2 Rollover effects
3 Limitations
4 Examples
5 External links

[edit] 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 Raster graphics editor. Examples of these are Macromedia's Dreamweaver, the free Imapic, and Mapedit. The GIMP also ships with an image map creator plugin

[edit] 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.

[edit] Limitations

Internet Explorer is limited when assigning image maps to dynamic content. For instance, a common method of adding an image to a web page that was not there when the page loaded is by use of Javascript and innerHTML. An image that is added to the page with this method will NOT be able to use an image map in the current version of Internet Explorer, although it works fine in most other modern browsers. If a web designer wants to use an image map with dynamic images, the best option is most likely to have the image already in a division that is hidden by default and revealed based upon an event (similar to a Javascript onMouseOver).