Image Maps - HTML Central

HTML Guides Image Maps

Image maps are those clever things where an image is divided into sections and each section links to a different page. A common use of image maps is for geographic maps, where clicking on a region takes you to more details of that area.

There are two stages to implementing an image map - defining the map (what sections link to what pages) and then adding the map code. Let's start with the definition:

Map Definitions

A map definition does not need to be placed with the map itself, and so can be reused many times on the same page if necessary. Common practice is to put all your map definitions together at the top of your page (after the BODY tag), but it really doesn't matter.

The map definition all goes in the MAP tag, and the first thing you need to tell the browser is the name of the map - you'll use this to refer to the definition from the IMG tag. In this example, the map is named "navbar":

The next thing to do is define the sections and what they should link to. There are three shapes you can use - circle, rectangle and polygon. You'll need to know the co-ordinates on the picture where you want the sections to be - most graphics applications will show you this, even PaintBrush (but that can't read GIFs and JPEGs).

The easiest way to explain these shapes is to demonstrate, so here are some examples:

The first bits are obvious. The coords attribute tells the browser about your circle - the first figure is x co-ordinate of the centre, the next is the y co-ordinate and the third and final number is the radius (all in pixels). Now that the shape is made clear, you just use HREF to specify the path (internal or external) to the page you want to link the circle to. Easy!

The coords for the rectangle shape are the co-ordinates of the top left and bottom right corners respectively, x co-ordinates coming first. This one is actually a square, but it can be in any proportions you like.

The polygon shape can be messy, but it's quite easy as long as you're careful. Just specify the co-ordinates of each corner / point (as many as you like) in turn, in the normal (x,y) format. The browser will hopefully suss it out!

Personally I wouldn't use the polygon shape, but it's realy the only option when it comes to complicated areas, for example on a map.

By the way, you can also specify ALT text for each section of the image. Just put ALT="whatever" at the end of the AREA tag. Again, this is useful for anyone who can't see your image for some reason.

Once you've defined all your shapes (you don't necessarily have to cover the whole image by the way), end it all by putting </MAP>. That's the definition done!

Map Code

To use the image map, start by putting in the image in the normal way with the IMG tag - use the usual HEIGHT, WIDTH, ALT etc. Once you're done, go back and add the following attributes to the IMG tag:

ISMAP USEMAP="#navbar"

Change "#navbar" to whatever you named your map (with a # at the front). The ISMAP is there as well to catch some bizarre browsers that don't realise it's an image map - you'd think the USEMAP would give it away!

And that's it - one image map ready to go!

Example

A perfect example of an image map is the navigation bar on this very site (at the top and bottom of every page). Here's the code that produces it (the definition followed by the image tag). Note that I've removed the ALT attributes to save a bit of space - I think you can understand that bit OK!

Make sense now? I hope so - image maps can be very useful for all sorts of things, so they're worth knowing about.

HTML Central Home
HTML Guides
Images

< 1 | 2 | 3 >




Please send any comments, questions or complaints via this form HTML Central is part of j-robinson.co.uk © James Robinson 2001