Making Image Maps

What's an Image Map?
HTML Tutorials
By Jeffrey J. Walters

What's an Image Map:

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.

Some Fun Stuff with Image Maps:

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)

This is Sqweekers. Click on her to make sounds.

And here's the HTML code that made it:

<map name="sqweekers">
<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="">
</map>
<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.

Link to this Tutorial!

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!

Bookmark this tutorial page on your favorite Social Bookmarking site.