Тема: Навигационные карты ссылок (Image map)
Лабораторная работа №7 по HTML
Ранее по картинке мы могли задавать ссылку только на один документ.
Возможность, используя один тот же рисунок, перемещаться в различные документы позволяет Карта ссылок.
Она будто разбивает изображение (готовое или созданное самим пользователем) на отдельные участки, каждому из которых будет соответствовать своя гиперссылка.
Навигационные карты задаются тэгом <Map>.
Тэг <Map> включает себя тэг(и) <Area>, которые определяют геометрические области внутри карты и ссылки, связанные с каждой областью (т.е. куда вы попадете при нажатии на какую-либо часть нашей карты).
Для создания карты выполните следующие действия:
- Загрузите любой графический редактор (в нашем случае – это Paint).
- Установите ширину и высоту страницы 200х200 точек (Рисунок- Атрибуты)
- Зарисуйте картинку (без рамки) по примеру:
 |
- Определите координаты верхнего- левого и нижнего- правого углов прямоугольной области №1.
 |
- Сохраните файл под именем Области.bmp на своем диске в каталоге HTML.
6. В конце ранее созданного файла prf.html в центре новой строки задайте вывод созданной картинки на экран при помощи тега <img>
- Просмотрите результат в браузере и предъявите преподавателю.
- Введите в конце документа prf.html теги для определения браузером карты ссылок:
<map>
<area><! тег <area> определяет зону отображаемой карты >
</map>
- Внутри тега <area> введите параметры для определения геометрического вида области:
<area shape=?><! атрибут <shape> определяет форму области>
вместо знака вопроса проставьте одно из значений, соответствующее виду вашей области:
rect (прямоугольник) , circle (окружность), poly (многоугольник)
- Добавьте в тег <area> атрибут coords=? для задания координат области (в пикселах,
1 точка=1 пикселу). Вместо знака вопроса проставьте координаты области, определенные ранее, выбрав необходимый вариант:
Coords=x1,y1,x2,y2 –координаты верхнего- левого (x1,y1) и нижнего- правого углов (x2,y2) прямоугольника
Coords=x0,y0,r –координаты центра (x0,y0) и радиуса (r) окружности
Coords=x1,y1,x2,y2,x3,y3,…,xN,yN –координаты всех углов прямоугольника.
- Задайте переход с первой области карты на сайт института http://iubip.ru/ ,прописав параметры команды Href=?внутри тега <area>,
знак вопроса заменятся адресом Web – страницы (сайта), подлежащей (го) воспроизведению после щелчка по зоне. - В теле тега <area> определите атрибут Alt=?, позволяющий выводить на экран текстовое описание области (всплывающую подсказку).
Вместо знака вопроса запишите для данного случая: «Здесь вы можете попасть на сайт института» - В общем случае ваша команда должна выглядеть так:
<area shape=? coords? Href=? Alt= Здесь вы можете попасть на сайт института>,
где на месте вопросов - соответствующие значения вашей области (см. выше).
- Чтобы картинка стала ссылкой, необходимо указать имя карты:
<map name=”?”>
где ? – это произвольно заданное пользователем имя карты ссылок, н-р: karta_1
15. Свяжите название карты с картинкой при помощи атрибута usemap=”#?”в теле тега <img>
знак вопроса – это установленное в <map> имя карты.
- Задайте в <body> цвет основных, ранее выбиравшихся и текущих ссылок.
- Сохраните все внесенные изменения.
- Просмотрите и проверьте действие ссылок в браузере.
- Результат предъявите преподавателю.
- Самостоятельно внесите новым тегом <area> параметры остальных двух областей (в тегах указывайте ссылки на различные HTML-документы).
- Результат предъявите преподавателю.
- Введите в <map> новую команду:
<area shape=circle coords=x, y, z href=prf.html alt = произвольная область>
(вместо переменных X, Y, Z подберите «на глаз» такие координаты, чтобы эта область описывала центр рисунка).
При подборе координат учитывайте, что:
Начало координат (0,0) находится в левом верхнем углу монитора; по оси ОХ примерно 800 точек (пиксел); по оси ОУ приблизительно 600 точек.
|
|
|
0,0  | |||||
 | |||||
| |||||
24. Остальные теги <area> возьмите в скобки комментария, для временного прекращения их действия.
- Сохраните документ, перейдите в окно браузера и проверьте действие ссылки, щелкнув по центру вашего рисунка (обратите внимание на действие ссылки).
- Самостоятельно измените координаты новой области так, чтобы она описывала правый верхний угол картинки.
Самостоятельно:
Создайте в файле Моя_Карта.html свою навигационную карту в виде меню (см. рис), по нажатию на какую-либо область вашей карты должно происходить перемещение на различные странички, отвечающие содержимому карты.
