Using Image Maps

An Image Map is a medium to large graphic which is cleverly subdivided into precisely defined sub-elements called 'hot spots'. The reason for doing this is to create multiple links from a single graphic image. Each 'hot spot' is a discrete set of pixel coordinates which are mapped to a specific link.

Lest this become too confusing, I'm going to create a very simple image and create only two hot spots. Then I'll show you the HTML that's created. Let's use a fun graphic for this. In fact we'll use an animated GIF just to prove that it too can have hot spots. I've made each eye a hot spot.
When your  mouse cursor is on the spot it will change its shape, like it does on any link. (Javascript is required for this little exercise.)  Go ahead now and click an eye. Here's the HTML that made this happen:

<MAP name="FPMap0">
<AREA href="javascript:alert('You poked me in my right eye!');" shape="circle" coords="15, 21, 8">
<AREA href="javascript:alert('You poked me in my left eye!');" shape="circle" coords="36, 21, 9">
</MAP>
<IMG border="0" src="images/wd_imgmap_glasses.gif" align="top" usemap="#FPMap0" width="50" height="40">

You've seen many image maps on various web sites and may not always recognize them. They hide very well when they're used as navigation bars, which they frequently are. The more exotic use of image maps is when they represent a picture where the sub-elements are intuitively going to link somewhere if you click them. Something like a map of the United States where each state is a link to some information about that state.

If I were writing a tutorial about Windows 98's control panel (which I hope I would never do), I would just snapshot the thing and make it an image map with every icon a hot spot. It would look and behave something like this. (Again, Javascript is required so that I can dynamically created specially sized windows.) If you missed it in my Javascript topic, you can peek at the source and see how we can use Javascript to write HTML to our page dyamically, and also see how we can create the popup windows without the normal navigation controls.


 

Well, I just wanted to cover the basics of image maps and I've done that. But I do have a very interesting tip as to how you, the designer, can take advantage of image maps as a productivity tool. I do this all the time and it works great for me. Remember, it's for you and not your guests.

Let's say you've got an application like the CGI script which I use for my Sites to Visit topic which uses a text file. Fairly often you want to see what that file looks like but you're weary of entering the URL of that file's location. So ... do this. Make a teeney, tiny hot spot on some graphic on that page so that when you click it, it will show you your file. If you're clever enough, it would be a most rare circumstance  for a user to stumble upon it. And if one did, so what? You're not giving them the keys to your safe deposit box.

If you'd like to try this, go to Sites to Visit (we're finished here anyway) and mouse over to the dot over the 'i' in the word Sites. It's your 'hot spot'. I think you'll agree that this is a pretty useful 'trick' and if you don't think so now, remember it for the future. You will, I bet!