Using lists as an alternative to image maps

Some time ago I got asked how to produce an “accessible alternative to an image map“.

As long as Image Maps are implemented correctly there’s no reason why the shouldn’t be accessible however they may not always be the most appropriate or semantic way to mark up your content.

In this example I’ve used a simple unordered list to describe some of the features of the young lady on the left, and positioned the list items over the top of her photo using CSS. The list is set to display:block and the height & width are set to match the background image you want to use; position:relative is used to allow you to absolutely position the list items within the list. Each list item is given a unique id and absolutely positioned within the list, their height and width are also set in the CSS. At it’s most basic that’s all there is to it.

In this example I added borders round the list items highlight the active areas, you probably wouldn’t want to display them as they probably detract from the aesthetics of your image. I also used text-indent on the anchors to hide the text until you hover over them and then set the text-indent to 0 using the :hover pseudo class.

Here is the XHTML used to mark this list up:

<ul id="map">

         <li id="eyes"><a href="#">eyes</a></li>

         <li id="ear"><a href="#">ears</a></li>

         <li id="mouth"><a href="#">mouth</a></li>

         <li id="ilb"><a href="#">oh my!</a></li>

     </ul>

And here is the CSS:

#map {

 display:block;

 height:298px;

 width:200px;

 float:left;

 border:1px solid #FFA200;

 margin:0 10px 10px 0;

 background: URL(/images/blog/girl.jpg) no-repeat;

 position: relative;

}

#map li {

position:absolute;

display:block;

list-style:none;

border:1px solid #ffcc00;

 }#map li a {

 display:block;

 height:100%;

 width:100%;

 text-indent:-2000px;

 color:#ffcc00;

 font-weight:bold;

}

#map li a:hover {

 text-indent:0;

 text-decoration:none;

}

#eyes	{

 top:46px;

 left:71px;

 height:18px;

 width:44px;

}

#ear	{

top:46px;

left:132px;

height:26px;

width:21px;

}

#mouth	{

top:81px;

left:82px;

height:16px;

width:33px;

}

#ilb	{

top:177px;

left:80px;

height:63px;

width:81px;

}

This article is an extended version of the example I originaly published here on 30/01/2007