An image map is made up of regions, and each region has an associated hyperlink. Clicking on one area takes you to the associated link.
Here's a basic example, swiped (and slightly modified) from Patrick Corcoran's image-map tutorial.
Though this is one single image, Patrick has designated areas of the image to link to different HREFs. You see image maps like this all over the place, most frequently as a navigational element. If you're unfamiliar with them,
be sure to read Patrick's tutorial on client-side image maps. As a quick review, here's the HTML for the image map above. (I should note that the image tag in this example is broken up into multiple lines so that it displays correctly on this page. The real link is one big line. OK? OK.)
Notice that the <img src> tag has an element that says usemap="#foo". This tells the image to look for a map tag named "foo" and apply that map to the image. The map can go anywhere on the page, but it's generally a good idea to put the map near the image, just like you see here, so that it is easy for you to find and edit.
The map has a "begin" and "end" tag, with a bunch of area tags in between. Each area tag defines a region using the coords element and assigns that region an HREF. The coords element is a string of numbers, each representing a pixel in the image. When defining a square, the pixels should be listed in this order: top left, top right, bottom left, bottom right. Again, check out Patrick's tutorial if this doesn't make sense to you.
Adding JavaScript to these image maps is as easy as adding it to an HREF. In fact, JavaScript treats area tags almost exactly like it does HREFs. You can stick onClicks, onMouseOvers, and onMouseOuts in the area tag, and they will do what you expect. One caveat: onClick doesn't work in Navigator 3.0 for Windows. Here's the above example, with a little JavaScript added:
The new JavaScript-enhanced map looks like this:
<map name="javascript_foo">
<area name="yellow" href="http://www.aleeanne.org.uk/"
onMouseOver="writeInForm('All Hail Webmonkey!');" coords="20,20,70,60">
<area name="red" href="http://www.hits.org/"
onMouseOver="writeInForm('Humboldt Institute of Technological Studies');" coords="90,20,140,60">
<area name="blue" href="/surf/central/"
onMouseOver="writeInForm('The good, the bad, and the utterly useless');" coords="20,80,70,120">
<area name="green" href="http://www.animationexpress.com"
onMouseOver="writeInForm('The real animaniacs');" coords="90,80,140,120">
</map>
It's pretty much the same as the original; the only difference is that inside each <area> tag there's an
onMouseOver that calls a function that I wrote, called writeInForm(), which looks like this:
<script language="JavaScript">
<!-- hide me
function writeInForm(text_to_write)
{
window.document.the_form.the_text.value= text_to_write;
}
// show me -->
</script>
Simple, eh? For something a little more complicated, let's learn how to preload images using JavaScript.
