W3C XHTML 1.0 Strict Compliant Image Map?

Question

Is there anyway to make an image map W3C XHTML 1.0 Strict compliant?

I'm working on this page and when I click my W3C Validator badge I receive a validation error.

There is no attribute "type", <area type="rect" coords="21,19,155,76" ...

Are there any tags for the XHTML 1.0 Strict compliant that have replaced the image map <map> and <area> tags?

I did go to the w3c and look at their specification, and the only thing I could find was <nl> tag with nested <li>, but I tried them and they did not work in any of the browsers that I tried.

Answer 1

Image Maps aren't used as much as they used to be, but a couple of websites (Facebook, MySpace, Flickr) use them to tag photos. Here's a link to show you a method of achieving a similar result.

CSS Image Maps

CSS Image Maps, Redux

A List Apart: Night of the Image Map

Answer 2

The validation fails because the correct name of the attribute is shape, i.e. the line should be

<area shape="rect" coords="21,19,155,76" ...

However, rect is the default anyway, so you can just remove the type attribute.

Source: XHTML 1.0 Trans DTD, search for ELEMENT area

Answer 3

Use a link elements instead and use CSS to position them. Something like (though not exactly as) this:

<div id="myheader">
    <a href="#" class="link1"><span>Link text for people without CSS</span></a>
</div>

and

#myheader {position:relative}
#myheader a {position:absolute;display:block}
#myheader a.link1 {top:5px;left:10px;width:20px;height:50px}
#myheader a span {display:none}

Answer 4

Honestly, chances are if you're doing an image map you are using incorrect XHTML semantics. You should really post what you're trying to do and see if they are viable alternatives.

Answer 5

Success!

I found the answer thanks to someone at Ozone Asylum who directed me to a, A List Apart article on css sprites. You can do the same thing it's just not as strait forward. (But it can be XHTML Compliant!)

I actually did one here, just click on the big red arrow to see the example...

To be fair though I'll admit, it looks a little cheesy...client's choice of photo, not mine!

Answer 6

I've done some research and it seems the browsers don't yet support XHTML Strict compliant imagemaps.

My final stumbling block was that most browsers require "#" in the usemap attribute to work, which is now invalid.

You can get around the need for a name attribute by detecting if a browser accepts the content type application/xhtml+xml and only then responding using that type. (It then fixes Chrome and I think Firefox without breaking IE).

I played with several of the css solutions and ended up using Oli's suggestion. Simple and it worked.