W3C XHTML 1.0 Строгое совместимая карта изображений?

Проверка не удалась, потому что правильное имя атрибута - 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 и используйте CSS для их размещения. Что-то подобное (хотя и не совсем такое):

<div id="myheader">
    <a href="#" 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, который направил меня в Статья о разделении списка на CSS-спрайты. Вы можете делать то же самое, только не так прямолинейно. (Но он может быть XHTML-совместимым!)

Я действительно сделал один здесь, просто нажмите на большую красную стрелку, чтобы увидеть пример ...

Честно говоря, я признаю, что это выглядит немного дрянно ... фотография выбрана клиентом, а не мной!

Я провел небольшое исследование и, похоже, браузеры еще не поддерживают карты изображений, совместимые с XHTML Strict.

Моим последним камнем преткновения было то, что большинство браузеров для работы требуют "#" в атрибуте usemap, который теперь недействителен.

Вы можете обойти необходимость в атрибуте имени, определив, принимает ли браузер тип контента application / xhtml + xml, и только затем ответив, используя этот тип. (Затем он исправляет Chrome и, я думаю, Firefox, не нарушая IE).

Я поиграл с несколькими решениями css и в итоге воспользовался предложением Оли. Просто и это сработало.

Честно говоря, велика вероятность, что при создании карты изображений вы используете неправильную семантику XHTML. Вам действительно стоит опубликовать то, что вы пытаетесь сделать, и посмотреть, являются ли они жизнеспособными альтернативами.