W3C XHTML 1.0 Strict Compliant Image Map?

Проверката е неуспешна, защото правилното име на атрибута е shape, т.е. редът трябва да бъде

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

Въпреки това, rect е по подразбиране така или иначе, така че можете просто да премахнете атрибута type.

Източник: XHTML 1.0 Trans DTD, потърсете ELEMENT area

Картите на изображенията не се използват толкова много, колкото преди, но няколко уебсайта (Facebook, MySpace, Flickr) ги използват за маркиране на снимки. Ето връзка, която да ви покаже метод за постигане на подобен резултат.

CSS карти на изображения

CSS Карти на изображения, Redux

A List Apart: Night of the Image Map

Вместо това използвайте a елементи на връзката и използвайте CSS, за да ги позиционирате. Нещо като (макар и не точно като) това:

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

и

#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}

Успех!

Намерих отговора благодарение на някой от Ozone Asylum, който ме насочи към, Статия за List Apart на css спрайтове. Можете да направите същото нещо, но не е толкова пряко напред. (Но може да бъде XHTML съвместим!)

Всъщност направих едно тук, просто щракнете върху голямата червена стрелка, за да видите примера...

За да бъда честен обаче ще призная, че изглежда малко скъпарско...избор на снимка на клиента, не мой!

Направих някои проучвания и изглежда, че браузърите все още не поддържат XHTML Strict съвместими изображения.

Последният ми препъни камък беше, че повечето браузъри изискват "#" в атрибута usemap, за да работят, което сега е невалидно.

Можете да заобиколите необходимостта от атрибут на име, като откриете дали даден браузър приема типа съдържание application/xhtml+xml и едва след това отговорите, използвайки този тип. (След това коригира Chrome и мисля, че Firefox, без да нарушава IE).

Играх с няколко от css решенията и накрая използвах предложението на Oli. Просто и работеше.

Честно казано, шансовете са, че ако правите карта на изображение, използвате неправилна XHTML семантика. Трябва наистина да публикувате това, което се опитвате да направите, и да видите дали те са жизнеспособни алтернативи.