Image Maps
At this stage in your learning you’ve probably seen a few image maps being used around the Internet. They allow you to turn one active image into an image with many links pointing out of it depending on where in the image you click. It’s useful when you’re using graphical navigation.
This page was last updated on 2012-08-21
Image Maps Explained
First, we’re going to need a decent-sized graphic. Personally, I can’t resist using this great desktop-background of Samus from the rather wonderful Metroid series. It has some parts that I can easily make into clickable shapes. The shapes you can have are: Rectangle, Circle and the catch-all Polygon, by which you can make multiple-sided shape.
All you’ll be doing is placing code on your page with the co-ordinates of your shapes inputted. This will be the image map code, and you will apply that to the image you have placed on your page. The type of image map I’m creating here is a client-side image map. You can also do server-side image maps using CGI, but there are many problems getting in the way of that. This method will work on any version 2+ browser and doesn’t need any special server setup.
Pass your mouse around the image on the right there. Try her helmet, shoulder and gun-arm. You should see some different URLs moving around in the status bar. When you get a hand-cursor, try holding down a click. You should get a dotted outline of the active area.
Putting the pieces together
So, the first thing we’ll be doing to get an image-map on your page is to add the image to your page. Your image can be either a gif or a jpg. The code is the same as it is for all images, but with the addition of a single, stand-alone attribute, ismap. This just tells the browser that the image will be using an image map. Here’s what that looks like:
<img src="media/image1.jpg" ismap="ismap">
Next you’ll be laying the map over this image. Have a look at your image and make sure your clickable areas are blatant and clear. If your image map isn’t easy to use you’re better off sticking with text-navigation. Also, if it’s too big filesize-wise, you should either crop it a bit more or optimise the graphic. Your navigation is useless if it’s not quickly displayed. A good way to make it appear that your map is downloading quickly is to slice, or cut up your image into many smaller parts and then splice (reassemble) them on the page with a table. With many small parts downloading at once your reader will be able to mentally fill in many of the blanks and so your map becomes usable in a shorter time.
Map Code
Next we’ll need some image map code. You can imagine what it would be like to have to work out the co-ordinates for your own shapes, so I advise you to use a specialised program for this. Most programs will have their own overlay editor, and it’s just a matter of drawing shapes onto it. These shapes, once given an url to point to, are called “hot spots”.
Once you’ve done that, your program should have outputted the image map source code. The code for my map above looked like this:
<map name="metroid">
<area shape="rect" coords="4,14,39,116" href="http://www.rareware.com" alt="">
<area shape="circle" coords="84,47,22" href="http://www.retrostudios.com" alt="" >
<area shape="circle" coords="139,58,31" href="http://www.nintendo.com" alt="">
<area shape="poly" coords="119,154,100,154,97,166,109,176,128,164,119,154" href="http://www.yourhtmlsource.com" alt="">
</map>
See how it works? You start with a map element, and give the map a name. Then for each individual shape you use a nested area element, which includes the shape, the co-ordinates, the url, and the alt text of the hot spot. The code for the shapes are:
pointfor a single point.- This is rarely used, as they’re very difficult to click on.
rectfor rectangle.- You only need two co-ordinates to make a rectangle: the points at its top-left and bottom-right corners. So the value
coords="4,14,39,116"refers to the points 4,14 and 39,116. circlefor circle.- A circle needs to be described by three values; the co-ordinates of its centre-point, and a radius (size) for the circle.
polyfor polygon (any multi-sided shape you want).- A polgon can be made up of any number of points, which will all join together into one shape. Think of the co-ordinates as sets of pairs, a pair for each point.
Co-ordinates of the shape’s corner points follow the familar x-axis, y-axis rules of graphs, with one caveat: in the mathematical graphs that you may have had taught to you in school, y starts at 0 and increases as you go up the graph. However, on computer screens, we measure y from the top of the screen down. The top-left corner’s co-ordinates are thus 0,0. The co-ordinates 50,23 mean 50 pixels from the left and 23 down. Again, I wouldn’t advise you to try typing the co-ordinates out yourself, a program will be much more reliable.
sourcetip: For anyone who absolutely has to create their own image map code, most graphics editors (even Paint!) will display the co-ordinates that your mouse is hovering over somewhere in their interface.
Image Code
Now to assign this map to your image, your img code should look like this:
<img src="media/image1.jpg" usemap="#metroid" ismap="ismap" border="0">
See the usemap tag? That follows the internal links syntax of using the name you had given your map and preceding it with a hash mark (#). This tells the browser which map code you’re using for this image. Don’t forget it.
Also note that the main image can have an alt of its own and can even be active as a link. The hot spots will always take precedence over the rest of the image, so you can have all the normal areas linked to something too.
sourcetip: When you’re using an image map as your page navigation, you should always include a row of links to the respective pages underneath, for those readers who surf with images turned off. Also, your image might be un-readable to a reader surfing in 256 colour mode. Think about accessibility.
