Навигационные карты

Лабораторная работа №8

Тема: навигационные карты

Цель: научиться использовать карту ссылок

Навигационные карты

В данной работе рассмотрим, как сделать рисунок ссылкой, о том как сделать фрагмент, область рисунка ссылкой на тот или иной документ, а так же о том как сделать различные области одного и того же рисунка ссылками на различные документы.

Для осуществления данной задачи нам не обойтись без так называемых навигационных карт.

Предположим, у нас имеется такой рисунок:

..и нам необходимо сделать, так что бы пользователь, нажав на одну из этих "кнопок" переходил по ссылке в тот или документ.. что нам для этого нужно?

В первую очередь обозначим наш рисунок не как обыкновенное графическое изображение, а как навигационную карту присвоив этому рисунку своё индивидуальное имя. Делается это при помощи атрибута usemap тега <img> (я думаю Вам не стоит напоминать о том что тег <img> имеет обязательный атрибут src который указывает путь к той или иной картинке <img src="knopki.jpg">)

Назовём наш рисунок/карту именем panel. Это будет выглядеть так:

<img src="knopki.jpg" usemap="#panel">

Не забываем по правилам синтаксиса поставить знак #решётки перед именем..

Ну а теперь, собственно, составим навигационную карту. Она задаётся тегом <map> у которого есть атрибут name - имя.. улавливаете к чему я веду? Ну как Вы наверное уже догадались, укажем на базе какого рисунка мы будем строить нашу навигационную карту указав его имя..

<map name="panel">

</map>

Теперь займемся тем, что укажем браузеру области рисунка которые будут являться ссылками, а заодно пропишем пути переходов по этим ссылкам. Эту задачу берет на себя тег <area>, закрывающего тега он не требует, и имеет следующие атрибуты, с которыми мы будем работать:

href - указывает путь к открываемому документу (точно так же как в теге <a>)

shape - форма области рисунка которая будет служить ссылкой. Может иметь одно из трёх значений:

rect - прямоугольная область

poly - область представляет собой некий многоугольник

circle - область заданная окружностью

coords - координаты формы

Поиск по сайту: