HTML Создание карты изображенийhttp://htmlweb.ru/html/imagemap.php#area4
Создание карты изображения является одной из
привлекательнейших возможностей HTML, позволяющей пользователю
привязывать ссылки на другие документы к отдельным частям
изображений. Щелкая мышью на отдельных частях
изображения, пользователь может выполнять те или иные действия,
переходить по той или иной ссылке на другие документы и т.п.
Чтобы включить поддержку карты для изображения, необходимо
ввести дополнительный параметр в тэг IMG:
<IMG src="url"
USEMAP="url#
map_name
">
Параметр USEMAP указывает, в каком месте находится карта
описываемого изображения. Карта изображения определяет, какому
участку изображения какой URL соответствует. Карта изображения
может находиться в том же документе, что и изображение, или в
другом документе. Помещение карты в другой документ позволяет собрать
все карты изображений в одном документе (если у вас их несколько в
различных документах), но добавляет еще одну итерацию в сети, когда за
перыую итерацию выясняется местонахождение карты, а за вторую -
выполнение действия, предписанного URL для данного участка изображения.
Параметр map_name
указывает имя карты для изображения, а предшествующий ему
URL определяет местонахождение карты. Если данный URL отсутствует,
то карта с указанным именем ищется в текущем документе.
Рассмотрим синтаксис определения карты изображения:
<MAP NAME="
map_name">
<AREA [SHAPE=" shape "] COORDS="x,y,..."
[href=" reference "] [NOHREF]>
</MAP>
Параметры:
<MAP NAME="map_name">
- Данный тэг определяет начало описания карты с именем map_name.
<AREA...>
Описывает участок изображения и ставит ему в
соответствие URL.
Возможные атрибуты
имя атрибута |
возможные значения |
смысл |
примечания |
SHAPE |
RECT, CIRCLE, POLY |
очертания области> |
по умолчанию RECT |
COORDS |
строка или форма, определяемая SHAPE |
координаты области |
обязателен, за исключением используемого по умолчанию SHAPE |
HREF |
URL |
адрес документа |
действует, как гипертекстовая связь |
NOHREF |
|
означает, что этот регион не действует |
используется, когда Вы хотите вырезать дыру в "горячей" зоне |
ALT |
строка |
текстовое описание области |
обязателен |
Значения SHAPE и синтаксис и семантика COORDS для каждой
формы следующие:
значение SHAPE |
форма области |
синтаксис COORDS |
значения COORDS |
RECT |
прямоугольник |
COORDS="x1, y1, x2, y2" |
x и y задают координаты верхнего левого и нижнего правого углов |
CIRCLE |
круг |
COORDS="x0, y0, r" |
x и y - координаты центра, r - радиус |
POLY |
многоугольник |
COORDS="x1, y1, x2, y2, x3, y3, ..." |
x и y - координаты вершин |
Значения x и y
координат измеряются в пикселях от верхнего левого угла
соответствующего образа. Это означает, что значение y
возрастает вниз.
В альтернативном варианте x или y могут быть также определены в процентах, со знаком процентов,
добавляемым к числу, причем проценты берутся соответственно относительной
ширине или высоте образа. Пример:
SHAPE=RECT COORDS="0, 0, 50%,100%"
Примеры различных форм:
SHAPE=RECT COORDS="0, 0, 9, 9" |
прямоугольник 10 на 10 пикселей в верхнем левом углу изображения |
SHAPE=CIRCLE COORDS="10, 10, 5" |
круг с радиусом в 5 пикселей и центром, расположенном в точке (10, 10) |
SHAPE=POLY COORDS="10, 50, 15, 20, 20, 50" |
многоугольник (в данном случае, треугольник) с координатами вершин (10, 50), (15, 20) и (20, 50) |
Если две описанных области накладываются друг на друга,
то используется ссылка, принадлежащая первой из описанных областей.
Проектная версия HTML 3.2 содержала DEFAULT, как возможное значение
атрибута SHAPE, для использования при спецификации, когда пользователь
отбирает точку, которая не принадлежит какой-нибудь области,
специфицированной в другом элементе AREA.
Это было удалено из окончательного варианта спецификаций.
Тот же эффект можно получить используя SHAPE=RECT COORDS="0, 0, 100%, 100%".
Такой элемент AREA должен быть последним в пределах элемента MAP.
Атрибут ALT используется, чтобы показывать текстовые метки,
которые могут высвечиваться в строке статуса, когда мышь или
другое устройство управления курсором находится над горячей зоной,
или же для создания текстовой строки для неграфической программы просмотра.
</MAP>
- Данный тэг завершает описание карты изображения.
Пример использования Image Map
Данный пример демонстрирует использование технологии Image Map
(вы можете проследить изменение ссылок в строке состояния внизу окна броузера):
Различные зоны данного изображения:
1. Область 1
2. Область 2
3. Область 3
4. Область 4
Еще один пример
Применение технологии Image Map
Технология Image Map применяется в самых различных областях. Однако
наиболее часто ее применение можно увидеть при создании графических
меню, когда создается одно большое изображение с элементами меню, и
каждому участку изображения предписывается какое либо действие.
Читать дальше: Таблицы стилей (CSS)
|
