Рис. 11
ZAQ32: На главную | К содержанию раздела
Когда мы говорили о ссылках внутри страницы, то в какой-то степени мы уже касались данного вопроса. Однако, в данном случае речь пойдет несколько об ином. А именно, мы рассмотрим варианты создания системы эффективной навигации по вашему сайту при помощи тэгов <map> и <area>.
Что такое навигационная карта. Она позволяет вам визуально представить структуру сайта, используя для этого, например, всего одну картинку. Допустим, заходя на главную страницу сайта, посвященного офисной мебели, вы видите небольшую картинку, на которой, с одной стороны изображен стол, а с другой стороны рисунка – шкаф. Так вот. Если вы щелкните по той части рисунка, где нарисован стол, вы попадете на страничку, которая посвящена описанию офисных столов. А если на ту часть изображения, где шкаф – описание офисной мебели более крупных форматов. Конечно, это примитивный пример, но он отображает суть вещей.
Приведем пример.
Листинг 13.
<html>
<head>
<title>навигационные карты</title>
</head>
<!-- задаем навигационную карту -->
<map name="mapname">
<area href="my.html" shape="rect" coords="0,0,70,140" alt="страница первая">
<area href="other.html" shape="rect" coords="71,0,140,140" alt="страница вторая">
</map>
<body>
<!-- рисунок будет внешним выражением навигационной карты «mapname» -->
<img src="1.gif" usemap="# mapname">
</body>
Выглядеть это будет следующим образом:
Рис. 11
Если вы поднесете курсор мыши к левой стороне рисунка, то появится подсказка «страница первая», а если к правой – «страница вторая». Соответственно, если щелкните по левой половине картинке – попадете на страницу my.html, а если по правой – то на страницу other.html.
Как видно из листинга, основным атрибутом тэга является атрибут name, который задает имя карты. Атрибут cords задает координаты расположения области навигации на карте.
Атрибуты тэга <area>
ZAQ32: На главную | К содержанию раздела