Learn HTML Code Tutorial Reference Guide

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:

test map

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:

Contacts Products New! map of GH site
[ Contacts ] [ Products ] [ New! ]



 

Home
  |   Tutorials   |   Forum   |   Quick List   |   Link Directory   |   Privacy Policy   |   About
Copyright ©1997-2002 Idocs and ©2002-2014 HTML Code Tutorial