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

upgrade to the handset you want on vodafone – for free!

vodafone logoMy Vodafone contract is now at a point where I can upgrade my handset, so after a lot research I decided I was going to go for the V1605 (HTC Hermes).

I really liked the look of the v1605, My previous handset (before my current N-70) was an i-mate jam (also an HTC device) I really liked it. The only drawback with the Jam was that it had no keyboard – dialling a number or sending a text with the touch screen could be a right pain, so when I upgraded last year I decided to go back to a Nokia handset until a decent Windows Mobile handset came along.

A couple of weeks back I was in my local Vodafone store upgrading Laura’s phone and got talking to the guy about my imminent upgrade, he told me that I would be able to have “any handset I wanted” as a free upgrade. So imagine my annoyance when I walked into the Vodafone store in Crawley today and they told me it’d be £200 to upgrade to the V1605!

I decided to call Vodafone customer services on 191, I spoke to someone in the upgrades department that said that the best price they could do the handset for was £150, I could however have the V1415 (HTC Vox) free. I my opinion the v1415 is not as good as the V1605, despite the fact that it’s a Windows Mobile 6 device (the 1605 is WM5), it has a slower processor & no touch screen.

I said that this wasn’t prepared to accept anything except a free upgrade to the V1605 and I’d go to T-mobile to get it otherwise. They put me through to someone in their customer retention department. He asked why I wanted that particular handset, I explained that I wanted a Windows Mobile device with a touch screen, keyboard & wi-fi. Vodafone don’t have any other handsets (currently) that meet that spec at the moment and eventually he agreed to upgrade me to the handset I want for free, it’ll be delivered tomorrow.

So to summarise, when upgrading your Vodafone handset:

  1. Do your homework, decide exactly what you want before you talk to Vodafone
  2. Call 191, don’t upgrade in store
  3. Be as specific about why you want the handset as you can; this limits the customer service rep’s chances of being able to persuade you to take another model
  4. Stick to your guns
  5. Threaten to go to another network

And with any luck you’ll be successful too.