|
 Image Maps |
|
|
|
|
|
Image Maps |
|
|
An image map is a combination of an image with a bit of HTML coding that designates certain parts of it as "clickable" hypertext links.
|
In this "Treasure Map" (not an obvious example or anything, eh?), clicking the rock, the tree, or the letter X will each take you to a different place. |
Image maps come in two flavors:
- Server-side image maps, which have been around for a while, require that a separate file be installed on the server. This file contains the coordinates that determine what areas of the image are "hot."
- Client-side image maps are a relatively new browser feature and do not require server interaction to operate (which makes it possible to test them off-line).
Of the two, the client-side variety is much more convenient to implement and more net-efficient in use but it is not available in all browsers. Fortunately, you can construct pages (like this one) which will use client-side mapping if it is available and fall back on server-side if it isn't.
The coordinates for the above Treasure Map look like this:
<map name="treasure-map">
<area shape="rect" coords="97,75,142,106"
target="_self" href="http://agi.umd.edu/agi/agi.html">
<area shape="rect" coords="48,38,87,76"
target="_self" href="http://www.palms.org/">
<area shape="rect" coords="120,17,155,50"
target="_self" href="http://www.thex-files.com/">
</map>The coordinates define three rectangular "hot spots" on the map image:
The image tag for a client-side image map would look like this:
<img usemap=#treasure-map src="images/map.gif" width="189" height="155" border="0" alt="treasure map">
To make it work for both client and server-side options:
<a href="map.gif.map"> <img usemap=#treasure-map src="images/map.gif" width="189" height="155" border="0" alt="treasure map" ismap></a>
(The HREF anchor points to a separate document called "map.gif.map" that is installed on the server - this document contains the map coordinates for server-based mapping.)
To create the list of coordinates for making image maps an application like Adobe ImageReady or Marcomedia Fireworks is helpful. These apps allow you to load an image and view it while drawing shapes on it that determine what areas will be clickable links.
