| Ghostly photo |
| Преужаснейшие куклы Томаса Кюблера (22 фото) | | Звездное трио, которое танцует в полной тишине | | Париж: - Выставка нижнего белья в Международном салоне «Salon de la lingerie» | | Секреты британских субмарин случайно попали в интернет | | Пауки-волки поедают своих пожилых самок | | 10 САМЫХ ДОРОГИХ ДОМА МИРА | | Сила золота - 10 вещей, которые нужно знать о золоте |
|
| |
|
Изображения-карты
Навигационные карты - это способ сделать различные части одного графического изображения гиперссылками. Они позволяют выделить отдельные области изображений и определить для каждой из них свое действие.
|
В данном примере изображения-карты Вы можете безобоязненно щелкать по ссылкам, они никуда не ведут, а выводят сообщения о том, какие ссылки были нажаты. Кнопки на этом изображении я нарисовал только для того, чтобы можно было видеть ссылки, а не искать их наугад по всему рисунку.
|
 Здесь приводится HTML код данного примера. В нем исключены ссылки на script, который использовался в примере для вывода сообщений.
<IMG SRC="kartinka_map.jpg" BORDER="0" WIDTH="200" HEIGHT="160" ALT="Пример изображения-карты" USEMAP="#Map_e">
<MAP NAME="Map_e">
<AREA SHAPE="rect" COORDS="11,11,70,24" TITLE="Ссылка 1" HREF="URL">
<AREA SHAPE="rect" COORDS="70,72,128,83" TITLE="Ссылка 2" HREF="URL">
<AREA SHAPE="rect" COORDS="190,136,128,149" TITLE="Ссылка 3" HREF="URL">
</MAP>
|
Как видите, чтобы создать карту нужно вставить в тег <IMG SRC=""> атрибут USEMAP="#name", где name - имя карты (значок # обязателен). В примере использовалось название Map_e. Я пропускаю остальные атрибуты в этом теге, Вы их должны знать, т.к. о них уже рассказывалось в предыдущей статье
Далее описываем активные области карты. Начинаем с открывающегося тега <MAP NAME="name"> (здесь повторяется имя, но уже без значка #), а заканчиваем закрывающимся тегом </MAP>.
Между этими тегами помещаем описание каждой активной области изображения: <AREA SHAPE="форма" COORDS="координаты" HREF="адрес" TITLE="альтернативный текст">. Элемент <AREA> имеет следующие аттрибуты и их значения:
|
Элемент Map |
|
И так, из выше сказанного мы выяснили, что элемент <MAP> определяет коллекцию чувствительных областей в графическом изображении, при этом различные участки изображения могут быть ссылками на различные ресурсы.
Между начальным и конечным тэгами содержит один или несколько элементов "Area", определяющих навигационные области карты. Имеет один атрубут "name", который определяет имя навигационной карты, уникальное для данного документа. Используется для вызова карты с помощью атрибута "usemap" элемента "Img". Вы можете указать любое имя без пробелов с использованием латинских символов и цифр.
Закрывающий тег </MAP> обязательный.
|
Элемент Area |
|
Создает активные области карты, определенной с помощью элемента MAP, щелчком по которым можно осуществить ссылку. Элемент должен располагаться между начальным и конечным тэгами элемента MAP. Не имеет конечного тэга.
Имеет атрибуты:
Атрибут: Shape
|
| Этот атрибут задает форму активной области на карте и её координаты.
Имеет значения:
circle
|
|
Определяет активную область в виде круга.
|
poly
|
|
Определяет активную область в виде многоугольника.
|
rect
|
|
Определяет активную область в виде прямоугольника.
|
Атрибут: Coords
|
|
Определяет координаты навигационной области на карте и записывается в виде координат. Все координаты отсчитываются в пикселях от левого верхнего угла изображения. Для каждой формы области ("shape") имеет разные координаты.
Для: circle
|
|
| Записывается так: |
| coords="X,Y,R" |
| где; |
| "X" - координата центра круга по оси "x" в пикселях |
| "Y" - координата центра круга по оси "y" в пикселях |
| "R" - радиус круга в пикселях |
|
|
Для: poly
|
|
| Записывается так: |
| coords="X1, Y1, X2, Y2, X3, Y3, X4, Y4, X5, Y5, X6, Y6,..." |
| где; |
| "X1" - координата первой вершины по оси "x" в пикселях |
| "Y1" - координата первой вершины по оси "y" в пикселях |
| "X2" - координата второй вершины по оси "x" в пикселях |
| "Y2" - координата второй вершины по оси "y" в пикселях |
| "X3" - координата третьей вершины по оси "x" в пикселях |
| "Y2" - координата третьей вершины по оси "y" в пикселях |
| И т.д., сколько у многоугольника вершин, столько и координат "X" и "Y". |
|
|
Для: rect
|
|
| Записывается так: |
| coords="X1,Y1,X3,Y3" |
В прямоугольнике записывается только координата верхней левой и правой нижней вершины.
|
|
Атрибут: Href
|
|
Определяет область как гипертекстовую ссылку. Значение задается в виде ссылки (URL).
|
Атрибут: Target
|
|
Определяет в каком окне или фрейме будет открыта ссылка. Этот атрибут имеет такие же значения и свойства, что и одноименный атрибут элемента "<A>".
|
Атрибут: Alt
|
|
Определяет альтернативный текст-подсказку для данной области.
|
|
Для того, чтобы рассчитать точно координаты нужной части изображения существуют специальные программы. Одна из них называется MapEdit.
Хороший пример навигации с помощью изображений-карт Вы можете посмотреть здесь.
|
|
| Профиль |
|
|
Ваш браузер: -
IP-адрес: 3.144.249.247
|
Заговор для студента
|
| |
| |
| Совместимость по знаку зодиака Весы – Близнецы | | Апис - Известен также как; Серапис Бей, Асар-Aпuc, Осирис-Апис | | Носители магии - Лаокоон, Лаокоонт (Laokoontos) | | Толкование значения снов, на букву: «Е» |
| Анекдоты об иностранных вояках -=- (90) | | Мелкие офисные развлечения | | Если наступила ТИШИНА – это значит, что ребёнок... |
|
| |
 Statistics  |
Онлайн всего: 1 Гостей: 1 Пользователей: 0
|
| |
|
Новости
Блог
Статьи
Фото
Видео
Муз
Игры
ТВ
Радио
Форум
Чат
CSS
К-сайта
FAQ
E
