Home Javascript The Tools Promoting the page Making Money Contact Me |
Image maps let you link different sections of one image to different pages. The arrows at the top and bottom of my page are image maps. This is the code I use:
<map name="nav">
<AREA href="sounds.html" shape="rect"
alt="Forward" coords="0,0,21,22">
<AREA href="frames.html" shape="rect"
alt="Back" coords="22,0,44,22">
</map>
I then have to tell the image to use the map, like this:<img src="nav.gif"
width=44 height=22 border=0 usemap="#nav">
The usemap attribute is the same as the name of the map. The # is required in the Usemap.
The <Area> tags define the different sections of the image and what they link to. You need as many of these as links. The href is the same as using a link. |
shape can be either rect (rectangle), circle, or poly (polygon). Rectangles are used most often. The first two numbers in the coords attribute for a rectangle are the coordinates of the top left corner, and the next two are the coordinates of the bottom right corner. Alt would display text when the mouse is over that part of the image map, but Netscape ignores it.
For Shape="poly", you need to define the coordinates of all the corners of the polygon. Circles are more complex, so I won't get into them.
That's it, email me with questions at tkeer@cvn.net
