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

Question

Есть ли способ сделать карту изображений совместимой с W3C XHTML 1.0 Strict?

Я работаю над этой страницей , и когда я щелкаю свой значок W3C Validator, я получаю ошибку проверки.

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

Существуют ли какие-либо теги для XHTML 1.0 Strict, которые заменили теги карты

и ?

Я пошел на w3c и посмотрел их спецификации, и единственное, что я смог найти, это тег с вложенным

, но я попробовал их, и они не работали ни в одном из браузеров, которые я пробовал. .

Answer 1

Проверка не пройдена, поскольку правильное имя атрибута shape, т.е. строка должна быть

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

Тем не менее, rect по умолчанию в любом случае, так что вы можете просто удалить атрибут type.

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

Answer 2

Карты изображений используются не так часто, как раньше, но несколько веб-сайтов (Facebook, MySpace, Flickr) используют их для маркировки фотографий. Вот ссылка, чтобы показать вам метод достижения аналогичного результата.

Карты изображений CSS

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

Список отдельно: Ночь карты изображений

Answer 3

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

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

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

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

Answer 4

Успех!

Я нашел ответ благодаря кому-то из Ozone Asylum , который направил меня к статье List Apart о css sprites . Вы можете сделать то же самое, но это не так просто. (Но это может быть XHTML-совместимым!)

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

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

Answer 5

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

Answer 6

Вместо этого используйте 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}