HTML5 tutorial - the  map and area elements

The map and area elements - image maps

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.

<a href="index.htm>
  <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.

On Off

<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.
<map name="on-off">
Third I setup the two areas I want to be "hot":
  1. <area shape="rect" coords="0,0,50,50" href=".." alt="..">
  2. <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 – name="on-off".
  • 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 alt="" attribute.

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,y1x2,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.

First example of the area element Second example of the area element

         U L    L R 


coords=" 0, 050,50"

         U L    L R 


coords="50, 0,100,50"

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.

On Off Left area Right area
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:
Yes No
<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:
World map
<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.

Image maps are not limited to just links. Clicking on an image map button can also trigger a program or script to run. Below I use some basic javascript to open alert windows – however the possibilities are truly unlimited.

On Off

Learning javascript (not to mention PHP, jQuery, Python, your program) is down the road. For now let's not push our luck – you only just discovered your inner geek.

* 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.