Основы работы с XHTML и CSS
Кодирование карты ссылок
Изображение, которое станет картой ссылок, помещается на страницу с помощью тега <img/>. Кроме своих стандартных атрибутов этот тег содержит атрибут usemap="mapname", который указывает на названный этим именем тег <map>, задающий описания активных областей изображения для создания ссылок. Общий формат тегов <img/> и <map> показан на листинге 7.14.
<img src="url" alt="text" usemap="#mapname"/>
<map id="mapname"> <area shape="rect|circle|poly" coords="coordinates" href="url" alt="text" /> ... </map>
Листинг 7.14. Связывание выводимого изображения с картой ссылок (html, txt)
В теге <img/> задается #mapname, чтобы связать изображение с тегом <map>, определенным с помощью mapname. Внутри тега <map> имеются теги <area/>, по одному для каждой отображаемой области в изображении. Эти теги определяют форму, координаты в пикселях и страницу ссылки для всех активных областей.
Следующий код определяет изображение, показанное на рисунке 7.11, как карту ссылок со ссылками на различные заголовки текущей страницы Web.
<img src="MyMap.gif" alt="Image Map" usemap="#MyImageMap">
<map id="MyImageMap"> <area shape="rect" coords="8,13,130,123" href="#LINK1" alt="Determining Mapped Areas"/> <area shape="circle" coords="228,123,62" href="#LINK2" alt="Coding an Image Map"/> <area shape="poly" coords="100,144 175,200 155,255 50,250 45,175" href="#LINK3" alt="Overlapped Mapped Areas"/> </map>
Листинг 7.15. Код создания карты ссылок (html, txt)
Обратите внимание на связь между usemap="#MyImageMap" в теге <img/> и id="MyImageMap" в теге <map>. Идентификатор id="MyImageMap" соединяет карту ссылок с графическим изображением. Также при кодировании окончательной страницы оба тега <img/> и <map> должны быть внутри блочного тега, такого, как <p> или <div>.
Теги <area/> задают координаты (cords) для определения отдельных геометрических фигур и для соединения адресов URL со щелчком мыши на этой фигуре. В этом примере адреса URL являются ссылками внутри страницы; но можно соединяться с другими страницами на сайте или с внешними сайтами Web.
Когда shape="rect" (прямоугольник), cords определяют четырьмя числами, разделенными запятыми. Эта запись представляет две пары координат h,v, первая пара задает координаты верхнего левого угла прямоугольника, а вторая - координаты нижнего правого угла (8,13,130,123).
Когда shape="circle" (круг), cords определяют тремя числами, разделенными запятыми. Первые два числа представляют координаты h,v центра круга, а последнее число является величиной радиуса в пикселях (228,123,62).
Когда shape="poly" (многоугольник), cords определяют координатами h,v вершин многоугольника. Числовые пары можно перечислять по часовой или против часовой стрелки вдоль периметра многоугольника; они разделяются пробелами (100,144 175,200 155,255 50,250 45,175).
Тег <map> может появиться на странице в любом месте. Где бы он не появился в теле документа, он связывается с соответствующим тегом <img> через имя отображения.
Даже если карта ссылок создается с атрибутом alt для каждой активной области вместе с текстом alt для самого тега <img/>, тем не менее, желательно предоставить множество сопоставимых текстовых ссылок для посетителей с программным обеспечением для чтения текста или для тех, кто отключает вывод графики в браузере.
