Image Maps

Section 1 - Introduction
Section 2 - Basics
Section 3 - Next Level
Section 4 - Advanced
      Fancy Lists
      Forms
      Advanced Tables
      Frames
      Style Sheets
      Image Maps
         Why Image Maps?
         Suitable Images
         Select Hot Spots
         The Code
         Examples
         You try it
Section 5 - Publishing
Section 6 - Extras
Appendices
On this page, you'll see three examples of Image Maps and their codes. The links aren't supposed to go much of anywhere, so don't be disappointed if they don't work. This is to give you ideas on how to use image maps on your sites.

<area shape="Circle" href="#imhead" coords="65,65 55" title="Head">
<area shape="rect" HREF="#body" coords="58,120 69,240" title="Body">
<area shape="polygon" href="#rightarm" coords="17,171 30,185 57,165 57,139" title="Right Arm">
<area shape="Circle" href="#righthand" coords="15,187 12" title="Right Hand">
<area shape="polygon" href="#leftarm" coords="70,132 114,162 103,175 70,151" title="Left Arm">
<area shape="circle" href="#lefthand" coords="117,177 11" title="Left Hand">
<area shape="polygon" href="#rightleg" coords="58,234 62,253 29,310 0,317 2,306 18,299" title="Right Leg">
<area shape="polygon" href="#leftleg" coords="69,236 62,253 85,313 114, 321 115,311 98,301" title="Left Leg">
</MAP>

<IMG USEMAP="#smiley" SRC="smileman.JPG" BORDER="0" align=right>



Note: On the left is a very simple image map. On the right is an I-Frame. If you can't see it, switch to Internet Explorer. The imagemap at the left triggers changes in the IFrame at the right.


<MAP NAME="MyMap">
<area shape="rect" HREF="#" coords="1,14 107,47" title="Home Page">
<area shape="rect" HREF="#" coords="1,54 107,88" title="About Us">
<area shape="rect" HREF="#" coords="1,96 107,130" title="Have Fun">
<area shape="rect" HREF="#" coords="1,138 107,172" title="Play Games">
<area shape="rect" HREF="#" coords="1,178 107,211" title="Read Stories">
<area shape="rect" HREF="#" coords="1,219 107,252" title="Learn Jokes">
<area shape="rect" HREF="#" coords="1,261 107,292" title="E-mail Me">
<area shape="rect" HREF="#" coords="1,302 107,334" title="Need Help?">
</MAP>

<IMG USEMAP="#MyMap" SRC="navi.JPG" BORDER="0" align=left>



<MAP NAME="school">
<area shape="rect" HREF="#" coords="133,14 205,62" title="pool">
<area shape="rect" HREF="#" coords="144,72 202,122" title="gym">
<area shape="rect" HREF="#" coords="137,123 163,185" title="cafeteria">
<area shape="rect" HREF="#" coords="164,123 191,203" title="200s-upper hall, 100s-lower hall">
<area shape="rect" HREF="#" coords="154,204 185,279" title="offices, library-lower hall, 200s-upper hall">
<area shape="rect" HREF="#" coords="186,262 200,287" title="main enterance">
<area shape="rect" HREF="#" coords="149,283 194,352" title="auditorium">
<area shape="rect" HREF="#" coords="120,280 148,344" title="music department">
<area shape="rect" HREF="#" coords="37,203 154,229" title="160s-lower hall, 260s-upper hall">
<area shape="rect" HREF="#" coords="39,253 146,279" title="140s-lower hall, 240s-upper hall">
<area shape="rect" HREF="#" coords="76,315 100,335" title="JAMS portable">
<area shape="rect" HREF="#" coords="10,297 66,377" title="shop building">
</MAP>
<IMG USEMAP="#school" SRC="mmsimgmap.JPG" BORDER="0" align=right>