Image map
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.
Software implemented in the creation of image maps
It is possible to create image maps by hand, using a text editor, however doing so requires that the web designer know 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 JImageMapper, and Mapedit. The GIMP also ships with an image map creator plugin
Limitations
As many have pointed out before, 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 Firefox). 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).
Another limitation to consider when working with image maps is the ease of identifying what can be clicked on. For instance, there is no easy way of highlighting a specified area within the image map. A web designer can use a Javascript event to swap out the entire image with one that has that particular area highlighted, but the disadvantage of using this technique is that it uses a considerable amount of bandwidth. Often, having the clickable regions stand out in the original image is the better choice.
External links
- Tutorial on Image Maps
- Info on Image Maps from the W3C