re-
VISION
PHOTOGRAPHY AND GRAPHICS BY JAY BOERSMA
|
 Client-Side Image Maps |
|
|
An image map is a combination of an image with a bit of HTML coding that designates certain parts of the image 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. |
The coordinates for the above Treasure Map look like this:
<map name="treasure-map">
<area shape="rect" coords="97,75,142,106" href="www.geosociety.org/">
<area shape="rect" coords="48,38,87,76" href="http://www.palms.org/">
<area shape="rect" coords="120,17,155,50" 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 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.
