Image maps
Note that image maps can cause significant accessibility problems (and can be hard work to maintain), so you should restrict their use to places where they are really appropriate, such as (surprise) a map, where clicking on the parts of the map gives information about the relevant area. If you plan to make an image map out of a list of words just to make your navigation prettier, then you are using them for the wrong reason, and you should use a normal list styled with CSS.
Image maps allow you to make certain areas of an image into links. There are two types of image maps; server side and client side.
Server side image maps
For a server side image map, put an image inside a link, and set the ISMAP attribute on the
IMG (just the name, it does not need a value). When the link is clicked, the browser will request the given
link, and add ?x,y on the end of it, as the click offset from the left,top corner of the image (such as
foo.html?47,8). If the user is not using a mouse (or equivalent), then the coordinates will be 0,0.
<a href="foo.html"><img src="bar.gif" alt="" ismap></a>Client side image maps
- Internet Explorer only understands image maps that use AREA elements, not A elements.
Client side image maps are generally more popular. With a client side image map, you can specify a list of areas that will be used as the links. This gives the user the chance to see immediately if where they are about to click is somewhere useful, as opposed to the server-side image map where they must wait for the reply from the server to tell them. There are four types of these areas; rectangles, circles, polygons and default.
Firstly, you need to create the map that will be associated with the image. This is created using the MAP element, which must have a NAME attribute set, with a name that will be used to reference the map. Images that use the map should have their USEMAP attributes set to the same as the map name, with a '#' character in front of it. The closing tag is required. The MAP is a little strange, since it is an inline element, but it can contain block level contents.
Note; in theory, the map can contain a mix of AREA elements, and block level content. The block level content will always be displayed, even if image maps are supported. Any links within the block level content will be interpreted by the map in the same way as AREA elements, so they can have the AREA and COORDS attributes. This allows you to use part of the normal content as the map areas, hopefully ending up with a more accessible document. Unfortunately, this capability is not well supported, and Internet Explorer in particular does not support it. Since that means that the majority of Web users cannot use these A areas, I recommend you stick with basic areas.
Image maps can be placed anywhere in the document (inside elements where inline content is allowed), and can be before or after the image(s) that use them.
The AREA element should be treated as a block level element, and must be directly inside the MAP element, not inside any of the other block level content inside it. If you intend to use normal block level content inside the map, I recommend you only put it where it makes sense, since it will be rendered, and also only put it inside an element where that sort of content is allowed (such as inside a DIV or LI element). Personally, I think the idea that a map should be inline is wrong, considering the way it is used, but that is what the spec says.
Areas are not rendered visually if image maps are supported. They remain invisible, and only create an area of the map that can be clicked. Browsers that cannot display image maps generally display a list of all the links and areas inside the map. To allow them to display the areas, each AREA needs the ALT attribute set, giving the text that should be displayed as the link content in these browsers. They will usually be displayed in the order that they are defined in the source, so make sure that it makes sense.
Creating areas
- Internet Explorer does not understand the default shape.
- No major browsers understand percentage coordinates correctly, and all interpret percentage coordinates as pixel coordinates.
For now, I will concentrate on the AREA element, but just remember that the SHAPE and COORDS attributes also apply to links inside the map (although again, I recommend that you do not use them).
Firstly, you need to plan what shapes you intend to use, and where they will go. Try to make sure the shapes make sense, and that the user will be able to recognise where those shapes might be on the map. In most browsers, the only way they will know there is an area is that their mouse cursor will change when they hover over it. Image map areas accept almost no styling. The three main shapes are rectangles, circles and polygons. You can use percentages for any of these, but most image maps use exact pixel values, as they work with fixed size images. Firstly create the AREA tag. Use the SHAPE attribute to define the shape; one of "rect", "circle" or "poly". Then use the COORDS attribute to specify the comma separated list of coordinates:
- Rectangle
- This expects four coordinates. The horizontal position of the top-left corner, the vertical position (from the
top of the image) of the top-left corner, the horizontal position of the bottom-right corner and the vertical position
of the bottom-right corner. An example would be:
shape="rect" coords="10,20,75,40" - Circle
- This expects three coordinates. The horizontal position of the centre, the vertical position of the centre
and the radius of the circle (percentage radii are taken as a percentage of the shorter side of the image). An
example would be:
shape="circle" coords="50,80,20" - Polygon
- This expects as many pairs of coordinates as you need to make your polygon. These can make any polygon shapes you
need, and can have sloping lines. All coordinates are specified as horizontal position then vertical position, with all
of them in a long comma separated list. The last pair of coordinates can optionally match the first. An example would
be:
shape="poly" coords="217,305,218,306,218,306,228,316,243,316,243,325,229,325,229,322,217,310"
If any of these areas overlap, the one that is defined first will be used in the places where they overlap. There is also a "default" shape, which covers the entire image, and does not need the coords attribute. However, I advise you not to use this shape, as it makes it impossible for a user to know when they are over a proper area, since the mouse cursor will always show as an area link.
It is possible to use an AREA to puch a hole out of another one. Instead of giving it an HREF attribute, set the NOHREF attribute (without giving it a value). Then make sure that it appears before the other area in the source code, and it will be placed on top of it, as a dead space where the other area will not react.
Remember that every area must have an ALT attribute giving the alternative text to display. For areas with no HREF, it is best to provide an empty ALT attribute. If you use A elements instead, these cannot have an ALT attribute, but browsers can use their contents instead. I also recommend giving every area a TITLE attribute, that most browsers will display as a tooltip when hovering the area. This makes it much more easy to see what the area represents.
An image map example
In this example, I create four areas. One is a rectangle, representing a flag. One is a circle with another circle overlaying it. This creates the doughnut representing a life ring. Lastly there is the polygon representing a beach hut.
<div>
<map name="beachmap">
<area href="/" shape="poly" coords="17,51,42,35,66,51,66,89,17,89"
alt="Beach hut" title="Beach hut - where you get changed">
<area shape="circle" coords="99,92,12" nohref alt="">
<area href="/" shape="circle" coords="99,92,23"
alt="Life ring" title="Life ring - to help you swim">
<area href="/" shape="rect" coords="129,27,171,52"
alt="Flag" title="Flag - says if it safe to swim">
</map>
</div>
<p><img src="../jsexamples/imagemap.png" alt="" usemap="#beachmap"></p>
Last modified: 13 February 2011