- •Лекция 1 Основные сведения о языке html. Гиперссылки. Внедрение изображения.
- •Понятие тега
- •Структура html-документа.
- •Заголовочная часть документа Заголовок html-документа
- •Тело документа
- •Гиперссылки
- •Элемент a
- •Навигационные карты
- •Элемент map
- •Элемент area
- •Внедрение изображения
- •Элемент img не имеет конечного тега.
Навигационные карты
Карты, обрабатываемые на клиентской машине браузером, создаются с помощью элементов MAP и AREA и представляют собой гиперссылки, офомленные в виде активных областей на изображении. Применить созданную карту к изображению можно вызвав ее по имени с помощью атрибута USEMAP элемента IMG.
Пример: |
|
|
<!-- Создаем карту с именем ImageMap: --> <MAP NAME="ImageMap"> <AREA HREF="something.html" SHAPE="rect" COORDS="0,0,70,140" ALT="Левая половинка"> <AREA HREF="anything.html" SHAPE="rect" COORDS="71,0,140,140" ALT="Правая половинка"> </MAP> <!-- Создали. --> <BODY> <!-- Привинчиваем ее к изображению --> <IMG src="/img/block.gif" USEMAP="#ImageMap" HEIGHT="140" WIDTH="140" BORDER="0"> ... |
В данном примере мы создали квадратное изображение размером 140x140 пикселов, левая часть которого является ссылкой на файл something.html, а правая – на файл anything.html.
Примечание:
Для создания карт, обрабатываемых на сервере, используется атрибут ISMAP элемента IMG.
Элемент map
(HTML 3.2) – Map
Создает новую навигационную карту. Между начальным и конечным тегами содержит один или несколько элементов AREA, определяющих навигационные области карты.
Атрибуты:
NAME – единственный и обязательный атрибут. Определяет имя навигационной карты, уникальное для данного документа. Используется для вызова карты с помощью атрибута USEMAP элемента IMG. Вы можете указать любое имя без пробелов с использованием латинских символов и цифр.
Пример: |
|
|
<!-- Создаем карту Map1 : --> <MAP NAME="Map1"> <!-- Задаем области --> <AREA HREF="...> <AREA HREF="...> ... </MAP> <!-- Карта готова. Применим её к картинке: --> <IMG SRC="image.gif" USEMAP="#Map1" WIDTH=200 HEIGHT=100 ALT="Картинка"> |
Элемент area
(HTML 3.2) – Map Area
Создает область карты, определенной с помощью элемента MAP. Элемент должен располагаться между начальным и конечным тегами элемента MAP. Не имеет конечного тега.
Атрибуты:
SHAPE – определяет форму навигационной области. Возможные значения:
rect – прямоугольник; circle – окружность; poly – многоугольник.
В зависимости от выбранной формы меняется способ задания ее координат в атрибуте COORDS.
COORDS – определяет координаты навигационной области на карте. Используется в паре с атрибутом SHAPE. Способы задания координат для разных типов областей:
SHAPE="rect" COORDS="левый x, верхний y, правый x, нижний y"; SHAPE="circle" COORDS="центр x, центр y, радиус"; SHAPE="poly" COORDS="x1,y1,x2,y2,x3,y3,...";
HREF – определяет область как гипертекстовую ссылку. Значение задается в виде ссылки (URL).
TARGET – определяет окно (фрейм), на которое указывает гипертекстовая ссылка. Этот атрибут используется только совместно с атрибутом HREF. В качестве значения необходимо задать либо имя одного из существующих фреймов (см. элемент FRAME) либо одно из зарезевированных имен, подробно описанных в атрибуте TARGETэлемента A.
NOHREF – определяет область как неактивную (невосприимчивую к нажатию). Данный атрибут противоположен атрибуту HREF и используется для отмены действия последнего.
ALT – определяет альтернативный текст-подсказку для данной области.
Пример: |
|
|
<!-- Создаем хитрую карту с круглой дыркой посередине --> <MAP NAME="map1"> <AREA NOHREF SHAPE="circle" COORDS="80,70,40"> <AREA HREF="guide.html" ALT="Путеводитель" SHAPE="rect" COORDS="0,0,167,140"> </MAP> ... <!-- Применяем ее к картинке --> <IMG src="/img/logo.gif" WIDTH="167" HEIGHT="140" BORDER="0" ALT="Путеводитель" USEMAP="#map1"> |
Примечания:
В последовательности из нескольких элементов AREA наибольший приоритет имеют те, которые были определены первыми. Они перекрывают области, определенные позже. Именно поэтому в приведенном выше примере сначала создается пассивная область (отверстие) и лишь потом – активная со ссылкой.
Старайтесь всегда указывать атрибут ALT. Пользователи, работающие в текстовом режиме (а таких немало!), скажут вам спасибо.