What's an image map you ask? Well, it's exactly what it sounds like. It's a image with a map that overlays it that tells us what the various spots on the image represent. These various hot spots are usually hyperlinks (links) and are defined by rectangular sections. There are many other shapes that can be used to identify a hot spot, such as polygons and circles, but rectangles are the easies to map. Image maps are commonly used with navigation sections of Web sites, where it's easier to keep the navigation section as one image rather than breaking it apart into several images.
Here's an example of some of the fun things to can do with Image Maps. Click on various parts of Sqweekers, my Cat, to make her make noises. Hint, pull her tail! (Note that no cats were abused in any way to make this Image Map)
And here's the HTML code that made it:
<area shape="rect" coords="0,180 104,222" href="wav_cat.wav" alt="">
<area shape="rect" coords="286,79 362,124" href="wav_wahoo.wav" alt="">
<area shape="rect" coords="296,155 399,209" href="wav_neeh.wav" alt="">
<area shape="rect" coords="99,92 280,160" href="wav_ohjoy.wav" alt="">
<img src="sqweekers.jpg" usemap="#sqweekers" alt="This is Sqweekers. Click on her to make sounds." width="411" height="247">
Unfortunately, Sweekers past away in November 23rd of 2005 due to natural causes. After fighting several year with diabetes, her age finally cuaght up to her at over 16 years old. She lived a very happy life and bless many people with joy and love. She is greatly missed.
Did you find this tutorial helpful? If so, please help me to share it with others by linking to it. Just place the HTML code below onto your own Web page to create a link to this tutorial.
Bookmark this tutorial page on your favorite Social Bookmarking site.