Это цитата сообщения Akina_Tera Оригинальное сообщение
Создание графической карты ссылок
Существует возможность создания графической карты ссылок для Web-сайта (группы Web-страниц).
Для этого необходимо сопоставить одному изображению сопоставить несколько ссылок, сопоставив каждую из них к какой-либо области этого изображения. Эти области могут быть различной формы: прямоугольной, многоугольной, в виде окружности.
Это очень удобный прием оформления группы ссылок.
При выборе изображения, служащего основой карты ссылок, необходимо стремиться к тому, чтобы границы областей были хорошо очерченными и не пересекались.
Используйте пояснительные тексты, для того, чтобы пользователь понял, что это карта ссылок, а не просто красивая картинка.
При наведении на область ссылки курсор мыши изменяет свою форму, как и при использовании обычных ссылок. При щелчке мыши на этой области ее границы становятся видимыми.
Графическая карта создается с помощью нескольких тегов.
Первым является тег <map> с атрибутом name для указания имени карты. Имя карты выбирается как имя переменной. В контейнере внешних тегов <map> и </map> содержатся теги <area> (область) для задания областей ссылок.
Тег <area> имеет атрибуты, определяющие ссылку, форму и положение области ссылки.
- href - строка, определяющая адрес ссылки
-
shape - определяет форму области; возможны значения
- rect - прямоугольник
- polygone - мноугольник
- circle - круг
- coords - координаты области, которые задаются в виде перечня чисел, разделенных запятыми. Весь перечень заключается в кавычки (для прямоугольника задаются четыре числа - координаты верхнего левого и правого нижнего угла; для мноугольника - задаются координаты каждого угла; для круга задаются три числа - координаты цента и радиус).
После закрывающего тега следует указать тег, вставляющий графическое изображение и реализующий привязку карты к нему - тег <img>, подробно описанный в документе "добавление изображений"
Кроме атрибутов, описанных раннее в этом случае в теге <img> добавляется атрибут связи с картой:
usemap="имя_карты"
В качестве имени карты указывается аргумент атрибута name тега </map>
Рассмотрим пример:
Перед вами усеченный вариант карты ссылок этого сайта. Попробуйте подвести курсор мыши к прямоугольной или круглой области и вы увидите "всплывающее" название страницы. Щелкнув мышкой по любому из выбранных объектов вы можете перейти на интересующую вас страницу. В HTML-код это записано так:
<P align=center><IMG height=337 alt="карта сайта" src="images/map.jpg" width=693 useMap="#sitemap" border=0><MAP name=sitemap> <AREA shape=RECT alt="Изучение HTML" coords="234,16,420,86" href="http://www.html-exp.narod.ru/content.htm"> <AREA shape=RECT alt="Основы HTML" coords="19,166,190,279" href="http://www.html-exp.narod.ru./base.htm"> <AREA shape=CIRCLE alt="Каскадные таблицы стилей" coords="320,240,60" href="http://www.html-exp.narod.ru./css.htm"> <AREA shape=RECT alt="Полезные советы" coords="414,160,616,272" href="http://www.html-exp.narod.ru./advice.htm"> </MAP> </P>
Здесь атрибут src тега img определяет графический элемент "map.jpg".
Атрибут usemap ссылается на элемент карты как на Web-адрес, следовательно указывается символ #. В качестве атрибута границы border указан "0".
В теге map указывается какие области графического элемента (карты) "работают" как гиперссылки. Атрибут name соответствует атрибуту usemap тега img и "работает" как атрибут name в теге якоря <a>.
Желательно, чтобы все элементы карты находились в том же файле, что и графический элемент, определяемый в теге img.
Теги area используется для определения областей на карте графических ссылок, которые будут связаны с Web-адрессами. Атрибуты shape определяют типы областей, в данном случае "rect" и "circle". В этом же теге area определяются координаты объектов (различные для каждого типа объекта) с помощью атрибута coords.
Если две или более областей на карте перекрывают друг друга, то преимущество имеет та область, описание которой появилось в HTML-документе раньше (т.е. пользователю будет предоставлена возможность использовать описание и ссылку первой появившейся в документе области.
В некоторых случаях удобно создавать перекрывающиеся области, делая одну из них неактивной используя атрибут nohref, например:
<area shape="circle" coords="320,240,30" nohref>
<area shape="circle" coords="320,240,60"
href="css.htm" alt="Каскадные таблицы стилей">
В этом случае первая окружность создает неактивную область, находящуюся в пределах большой окружности - созданной вторым тегом area. Чтобы получить ожидаемый эффект, необходимо, чтобы неактивная область была описана первой (иначе она будет скрыта активной формой).
Посмотрим, что получится?