Image Maps

It's pretty easy to make a graphical button, so that when people click on it they are sent off to another page. But what about having one image take you to different pages depending on where you click? For this, you need the Image Map. There are two flavors of Image Maps... server-side and client-side. We're only dealing with client-side maps, because server-side maps actually depend on the type of server you're using. However, the older browsers don't support client-side maps, so the best plan is to use both.

In the above image, clicking on different objects will take you to different pages. For example, clicking on 'Bot will take you back to the home page. Clicking on Emerald City will take you to WNYWeb. Finally, clicking on the Borg cube that's hovering over Emerald City will transport you to a face-to-face meeting with a Borg.

To create this map, we used this HTML:

<IMG SRC="images/emerald.jpg" WIDTH="395" HEIGHT="332" BORDER="0" USEMAP="#map">

Then, we defined the map with this HTML:

<MAP NAME="map">
<AREA SHAPE="RECT" COORDS="37,133,186,313" HREF="index.html">
<AREA SHAPE="RECT" COORDS="189,41,282,177" HREF="">
<AREA SHAPE="RECT" COORDS="295,2,359,67" HREF="images/borg.jpg">
<AREA SHAPE="RECT" COORDS="0,0,394,331" HREF="maps.html">

Return to the Home Page