If you click the logo at the top of this page you go to my home page. To do that I simply put an image tag inside anchor tags.
<img src=".." alt="..">
The whole image is a link, but there is also a way to assign different links to distinct areas of an image through the use of a client side image map. *
It sounds geeky – alright, it is a little geeky – but nothing you can't handle. Besides, if you have gotten this far into the tutorial there is a bit of the geek in you. Admit it. It's not so bad. I've lived with it for years.
Below is an image 100px wide by 50px high. Below that is the image tag that displays it.
<img src="images/on-off.gif" alt="On Off" width="100" height="50">
- Here is the process I go through to make that image an image map:
- First I add usemap="#on-off" to the image tag.
<img src="images/on-off.gif" alt="On Off" width="100" height="50"
- Second I open the map element with the name attribute.
- Third I setup the two areas I want to be "hot":
<area shape="rect" coords="0,0,50,50" href=".." alt="..">
<area shape="rect" coords="50,0,100,50" href=".." alt="..">
- Lastly I close the map element.
- There are a few things you need to remember:
- The map name must match what is in usemap.
- Usemap has a hashmark (#) –
usemap="#on-off", but name doesn't –
- There can be multiple image maps on a page, but each must have a unique name.
- The area element doesn't have a closing tag.
- If the area tag has an
href=""attribute it should also have an
All that looks relatively straightforward except the coords part, which I will admit, is not all that straightforward – but don't panic. Take a moment to close your eyes, take a deep breath and embrace your inner geek.
The x,y co-ordinates of the upper left hand corner of the image is 0,0. Starting there, x counts from left to right and y from the top down.
When the shape is set to rect, coords creates a rectangle. In
coords="x1,y1, x2,y2" the first two digits are the x,y co-ordinates of the upper left corner of the box and the second two are the co-ordinates of the lower right corner.
Below you can see the code in action. Rather that take you to another page I set it so that clicking "1" or "0" below will simply reopen this page, but I could have linked to any page on this site or, for that matter, anywhere on the net.
- Here's the area tags:
<area shape="rect" coords="0,0,50,50" href="map-and-area-elements.htm" alt="Left" title="Left">
<area shape="rect" coords="50,0,100,50" href="map-and-area-elements.htm" alt="Right" title="Right">
Many sites use image maps for navigation.
This is just one simple example of something that can get quite complex. The areas you select as "hot" can be anywhere on the image. You don't have to start in the upper left. The order of the area tags is unimportant.
- The shape can also be a circle:
<area shape="circle" coords="x,y,radius" title="..">
<area shape="circle" coords="25,25,25" title="Yes">
<area shape="circle" coords="75,25,25" title="No">
- or a polygon:
<area shape="poly" coords="x1,y1,x2,y2,..,xn,yn" title="..">
<area shape="poly" coords="2,5,32,1,33,22,51,36,33,57" title="The Americas">
<area shape="poly" coords="57,14,70,2,111,3,114,23,97,34" title="Eurasia">
<area shape="poly" coords="57,14,86,29,73,52,66,49,50,28" title="Africa">
<area shape="poly" coords="105,40,108,49,122,52,127,41,117,34" title="Australia">
There are any number of tools that can help you layout image maps. The image editor GIMP (recommended on the previous page) has a handy tool that does the hard work for you. Polygons in particular can be a real chore without such a tool.
* Usually they are called "image maps", but technically they are "client side image maps", as opposed to a "server side image map", in that it runs on your computer (the client), not the server. There is such a thing as a server side image map, but as far as I know no one ever uses them.