How to Make an Image Map
An image map is a picture in which areas within the picture are links. Creating an image involves using the
<IMG ...>, <MAP ...>, and <AREA ...> tags.
Suppose we want to make an image map using this image:
To make this image into an image map, we use this code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22 |
<DIV ALIGN=CENTER>
<MAP NAME="map1">
<AREA
HREF="contacts.html" ALT="Contacts" TITLE="Contacts"
SHAPE=RECT COORDS="6,116,97,184">
<AREA
HREF="products.html" ALT="Products" TITLE="Products"
SHAPE=CIRCLE COORDS="251,143,47">
<AREA
HREF="new.html" ALT="New!" TITLE="New!"
SHAPE=POLY COORDS="150,217, 190,257, 150,297,110,257">
</MAP>
<IMG SRC="testmap.gif"
ALT="map of GH site" BORDER=0 WIDTH=300 HEIGHT=300
USEMAP="#map1"><BR>
[ <A HREF="contacts.html" ALT="Contacts">Contacts</A> ]
[ <A HREF="products.html" ALT="Products">Products</A> ]
[ <A HREF="new.html" ALT="New!">New!</A> ]
</DIV> |
which gives us this image map:
| 
