XHTML Image Maps

“Use both name and id in XHTML image maps”

This has run across my desk before but I thought it was worth mentioning simply because it’s one of those oddities that make life interesting for others at some time or other. An image map is simply where you give co-ordinates for areas of an image to become clickable links.

<img src="graphics/title_bar.gif" usemap="#title_bar_Map" alt="" />

<map name="title_bar_Map">

<area shape="rect" alt="Contact" coords="709,11,744,20" href="mailto:info" />

<area shape="rect" alt="Archives" coords="662,11,702,20" href="about.html" />

<area shape="rect" alt="About" coords="626,11,652,20" href="index.html" />


As an odd twist you’ll notice that this doesn’t validate as XHTML and so any smart cookie jumps right in and changes the name attribute into an id to pass validation. So what’s the issue?

Well the problem you’ll find is that Firefox won’t recognise your image map. And the cure? That one’s simple.

<map name="title_bar_Map"

just becomes

<map name="title_bar_Map" id="title_bar_Map">

and having both the name and the id gets you past both the validator and Firefox. Its probably only going to catch a newcomer to XHTML but that in itself means this one is worth mentioning.

Comments are closed.