BobbyeM71hxwHow 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 alt=”” />,<map>, and <area /> tags. </map>

Steps to creating an image map-

  • Select the image on which you would like to make multiple links. Click on the rectangular hotspot tool found in the Properties Inspector. Select the rectangle tool and drag the pointer over the image to create a rectangular hotspot. You can also choose the oval or polygon hotspot tool to make an oval or polygon selection.
  • In the hotspot Property inspector’s Link field, click the folder icon to browse to the file you want opened when the hotspot is clicked. Alternatively, type the file name.
  • Repeat the above steps to define additional hotspots in the image map.
  • That’s it! You have now successfully created an image map.

For example-

<map name=”map1″>
<area title=”Contacts” shape=”RECT” coords=”6,116,97,184″ href=”contacts.html” alt=”Contacts” />
<area title=”Products” shape=”CIRCLE” coords=”251,143,47″ href=”products.html” alt=”Products” />
<area title=”New!” shape=”POLY” coords=”150,217, 190,257, 150,297,110,257″ href=”new.html” alt=”New!” />
<img usemap=”#map1″ src=”testmap.gif” border=”0″ alt=”map of GH site” width=”300″ height=”300″ />
[ <a href=”contacts.html”>Contacts</a> ]
[ <a href=”products.html”>Products</a> ]
[ <a href=”new.html”>New!</a> ]</div>


<MAP NAME=”map1″>


HREF=”contacts.html” ALT=”Contacts” TITLE=”Contacts”

SHAPE=RECT COORDS=”6,116,97,184″>


HREF=”products.html” ALT=”Products” TITLE=”Products”



HREF=”new.html” ALT=”New!” TITLE=”New!”

SHAPE=POLY COORDS=”150,217, 190,257, 150,297,110,257″>


<IMG SRC=”testmap.gif”

ALT=”map of GH site” BORDER=0 WIDTH=300 HEIGHT=300


[ <A HREF=”contacts.html” ALT=”Contacts”>Contacts</A> ]

[ <A HREF=”products.html” ALT=”Products”>Products</A> ]

[ <A HREF=”new.html”      ALT=”New!”>New!</A> ]


Using this, you can create an image map.

Tags: , , , , ,