Чувствительные картинки

Просматривая сайты роботландского конкурса, Петр Мячиков заинтересовался картинкой-ссылкой топ-работы “Шесть плюс одна”. Удивительно, но картинка обеспечивала не один гипертекстовый переход, а несколько, в зависимости от места мышиного курсора! Стоило только щелкнуть по лихой шляпке Оксаны Соломахи, как браузер услужливо загружал новую страницу, и мы узнавали, что Оксана любит классическую музыку и пишет стихи:

Мы и теги

Замечание 1
В примере ссылки “заглушены” таким значением атрибута href:
href="javascript:void(0)"
Гипертекстовые области ведут себя как настоящие ссылки, курсор превращается в “указующий перст”, при щелчке активная часть выделяется пунктиром, но самого гипертекстового перехода не происходит, и никакие сообщения браузером не выдаются.

Замечание 2
Исходная картинка в работе “весила” 24 килобайта, а это слишком много для сайта. Пришлось немного с ней поработать и уменьшить до 13 килобайт. Качество, конечно, немного пострадало, но не сильно. Думаю, что Григорьев Вячеслав (автор этой картинки) не будет на меня в обиде.

Я сказал Мячикову, что в теге IMG, выводящему эту композицию на экран, использован атрибут usemap и блок <MAP>…</MAP> в котором, собственно, и задана гипертекстовая разметка.

На это Мячиков резонно заметил, что в книге “HTML-конструирование” данная тема никак не затрагивается.

Гипертекстовая разметка картинки

Гипертекстовая разметка картинки работает в браузерах, начиная с третьих версий.

Разметка задается следующим образом. В теге IMG записывается атрибут usemap со значением-ссылкой на описание “чувствительных” областей картинки:

<IMG src=./pic/map1.jpg width=385 height=399
     usemap=#map1 alt="Мы и теги" border=0>

Как видите, значение атрибута usemap записывается аналогично ссылке-якорю, то есть, представляет собой конструкцию:

#идентификатор

В нашем случае в качестве идентификатора выбрано имя “map1”.

Описание “чувствительных” областей размещается в любом месте внутри <BODY>…</BODY> и записывается в виде блока <MAP>…</MAP>:

<MAP name=map1>
 <AREA shape=circle coords="57,45,30"   href=file1.htm
       alt="Пузанкевич Илья" title="Пузанкевич Илья">
 <AREA shape=circle coords="203,29,30"  href=file2.htm
       alt="Сопунцов Артем" title="Сопунцов Артем">
 <AREA shape=circle coords="337,96,30"  href=file3.htm
       alt="Косицын Сергей" title="Косицын Сергей">
 <AREA shape=circle coords="39,196,30"  href=file4.htm
       alt="Пшеничников Виталий" title="Пшеничников Виталий">
 <AREA shape=circle coords="178,266,30" href=file5.htm
       alt="Потапчук Валерий" title="Потапчук Валерий">
 <AREA shape=circle coords="33,314,30"  href=file6.htm
       alt="Григорьев Вячеслав" title="Григорьев Вячеслав">
 <AREA shape=circle coords="305,285,30" href=file7.htm
       alt="Соломаха Оксана" title="Соломаха Оксана">
 <AREA shape=default nohref
       alt="Мы и теги" title="Мы и теги">
</MAP>

В открывающем теге MAP указывается атрибут name со значением, равным идентификатору ссылки, размещенной в соответствующем теге IMG.

Блок MAP содержит теги AREA с описанием “чувствительных” областей.

Атрибуты тега AREA

shape

Этот атрибут задает вид “чувствительной” области. Он может принимать значения:

`shape=rect`	—	прямоугольник
`shape=circle`	—	окружность
`shape=poly`	—	многоугольник
`shape=default`	—	оставшаяся область

coords

Этот атрибут задает координаты области в пикселах. За начало отсчета принимается верхний левый угол картинки. Координаты задаются через запятые.

Для прямоугольника (shape=rect) задаются две пары чисел — координаты верхнего левого и правого нижнего угла (пример: coords="0,0,100,200").

Для окружности (shape=circle) задаются три числа — координаты центра и радиус (пример: coords="50,50,50").

Для многоугольника (shape=poly) задаются пары точек, соответствующие координатам вершин в порядке их построения. Последняя точка автоматически замыкается на первую (пример: coords="0,0,99,49,49,49").

Для shape=default атрибут coords не используется.

href

Этот атрибут задает ссылку для гипертекстового перехода.

nohref

Этот атрибут (он используется одиночно без значений) говорит, что при щелчке по данной области перехода не происходит (область не является гиперссылкой). Атрибут полезен, если необходимо в “чувствительной” области вырезать “нечувствительную” дырку. Атрибут используют также и в сочетании с атрибутом shape=default, закрывая (на всякий случай!) “чувствительность” оставшихся после разметки участков картинки.

alt

Атрибут задает альтернативный текст для области. Работает в NN, но почему-то не работает в IE.

title

Задает заголовок элементу. Работает аналогично альтернативному тексту в IE, но почему-то не работает в NN.

Рекомендация
Для задания альтернативного текста используйте одновременно alt и title. Это обеспечит показ альтернативного текста в обоих браузерах.

Животный мир

Вот еще пример картинки, размеченной “чувствительными” прямоугольниками:

Животный мир

Вывод этой картинки выполнен при помощи следующего кода:

<IMG src=./pic/map2.gif width=211 height=102
     usemap=#map2 alt="Животный мир" border=1><BR>
<MAP name=map2>
 <AREA shape=rect coords="2,10,95,95"
       href="javascript:void(0)" alt=Ежик title=Ежик>
 <AREA shape=rect coords="122,10,205,95"
       href="javascript:void(0)" alt=Жук title=Жук>
 <AREA shape=default nohref
       alt="Животный мир" title="Животный мир">
</MAP>

Вместо реальных ссылок поставлены “заглушки” javascript:void(0).

Как создавался “Животный мир”

Разметка выполнялась вручную, на глазок. Для прямоугольников это просто. Если на гипертекстовой области нажать мышиную кнопку, то появится контур “чувствительного” прямоугольника. Если теперь, не отпуская кнопку, увести курсор с картинки, то прямоугольник на ней останется. Немного проб и ошибок с числами, задающими координаты, и разметка выполнена. Старайтесь делать область с небольшим запасом, не рассчитывая на пользователя-снайпера.

А если нужно размечать круглые области или многоугольные? Да, мороки много. И вот здесь я двумя руками за визуальное редактирование. Существуют огромное количество программ (загляните в Интернет по поиску), которые позволяют выполнить разметку, шутя. Мы просто рисуем на картинке нужные области, а визуальный редактор услужливо записывает в файл теги AREA с нужным набором координат.

Холодный душ

Не используйте гипертекстовую карту как основу для навигации по сайту. Такой навигационный элемент может быть только второстепенным средством, дублирующим основное. Ведь пользователь может смотреть сайт с отключенной графикой или слушать его через голосовой браузер. С целью поддержки таких пользователей, обязательно записывайте краткие и содержательные значения для alt и title.

Часто бывает предпочтительнее вместо гипертекстовых карт просто порезать исходную картинку на несколько частей, сделав каждую из них отдельной ссылкой. При этом можно добиться существенного уменьшения общего “веса” картинки, так как маленькие графические кусочки лучше оптимизируются.

Иван Сидоров kurs@robotland.pereslavl.ru