Навигационная карта

HTML навигация по сайту

Урок 14. Навигационная карта в HTML

HTML теги и атрибуты, определяющие навигационную карту

Навигация по сайту может осуществляться с помощью обычного изображение.

На следующем изображении стопка красных фишек и единичная зеленая являются ссылками:

Навигационная карта Красные фишки Зеленая фишка

Этот метод можно применить для навигации по своему сайту, но это в будущем, а пока разберем как устроена карта.

Система координат x y :

Схема навигационной карты

Код:

<title>Навигационная карта в HTML</title>
</head>
<body>
<img src="../images/casino.jpg" width="300" height="200" usemap="#fishki" border="0" hspace="27" />
<map id="fishki" name="fishki">
<area shape="rect" coords="192,90,230,140" alt="Красные фишки" title="Красные фишки" href="#" />
<area shape="circle" coords="275,147,18" alt="Зеленая фишка" title="Зеленая фишка" href="#" />
</map>

В данном случае изображение представлено как система координат x и y , по оси x – 300 пикселей, по y – 200, начало – в точке 0. Мы решили зделать стопку красных фишек ссылкой, эта часть изображения по форме ближе к прямоугольнику, поэтому задаем координаты для прямоугольника. Нам нужно указать x1 , y1 , x2 , y2 , – откладываем по соответствующим направлениям приблизительное количество пикселей. Почему приблизительное? – Потому что трудно угадать координаты с первого раза. Закончили с красными фишками – переходим к зеленой. Определяем центр окружности и радиус.

Так обозначаются многоугольники (shape="poly"):

Многоугольник


Определение координат навигационной карты

Код:

<a href="#">
<img ismap="ismap" src="../images/casino.jpg" width="300" height="200">
</a>

Ссылка используется, чтобы активировать курсор. Флажок ismap="ismap" внутри <img /> позволяет определить точное положение любой точки в пределах изображения.

Наведите курсор мыши на рисунок внизу и вы увидете в статус-баре координаты x и y:

Навигационная карта в HTML
Дата публикации: Октябрь 2009 | Обновление: Август 2014

Урок 13. HTML ссылки   HTML навигационная карта   Урок 15. HTML таблицы

    Сохранить в сервисы и закладки