Гость !!! | RSS
Меню сайта
Оставить отзыв Гороскопы Сонник Мешок позитива Раскрутка сайта HTML HTML Формы Примеры Таблицы Таблицы цветов Генераторы Скрипты
Категории раздела
Новости [61]
Х-Новости [44]
Самое..., самое!!! [342]
ИнтересНости [241]
Праздничная [3]
Ghostly photo
Boeing представил самый длинный самолет в мире...
Boeing представил самый длинный самолет в мире...
Самые медленные, и самые быстрые животные...
Самые медленные, и самые быстрые животные...
Топ-7 самых лечебных трав
Топ-7 самых лечебных трав
Списком страшно-ядовиты животных, которых стоит знать в лицо, и опасаться.
Списком страшно-ядовиты животных, которых стоит знать в лицо, и опасаться.
Все красавицы мира без одежды. Скандальные эротические фото и видео
Все красавицы мира без одежды. Скандальные эротические фото и видео
Рекордный прыжок над крышами Монмартра
Рекордный прыжок над крышами Монмартра
Самые маленькие люди планеты
Самые маленькие люди планеты
В России прорастили семена возрастом 30 тысяч лет
В России прорастили семена возрастом 30 тысяч лет
Soft
Получить код блока
Mini-CHat
Они ждут - Тебя!
Головоломки · Tilt
Аркады и экшн · Веселая ферма. Печем пиццу
Головоломки · Волшебные пузыри
Головоломки · Trap the Mouse Puzzle

Катай!!!
Корифаны сайта

Баннерообмен
Our button

[ Получить код баннера ]
Изображения-карты

Изображения-карты

Навигационные карты - это способ сделать различные части одного графического изображения гиперссылками. Они позволяют выделить отдельные области изображений и определить для каждой из них свое действие.

Пример изображения-карты В данном примере изображения-карты Вы можете безобоязненно щелкать по ссылкам, они никуда не ведут, а выводят сообщения о том, какие ссылки были нажаты. Кнопки на этом изображении я нарисовал только для того, чтобы можно было видеть ссылки, а не искать их наугад по всему рисунку.


Здесь приводится 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-адрес: 54.162.44.105

Логин:uID поддержка
Пароль:
Забыл пароль || Регистрация



Заговор от беременности
Стас Михаилов - По Тонкому ... Наутилус Помпилиус - Три Хита Беломорканал - Брат Eminem - Not Afraid Стас Михаилов - Приди Ко Мне Бумбокс - Наодынци
Tag cloud
Свернуть Архив записей Развернуть
«  Май 2017  »
ПнВтСрЧтПтСбВс
1234567
891011121314
15161718192021
22232425262728
293031
Опросник
Физическая Сила — это …???
Всего ответов: 96
Архангел Гавриил - Известен также как Абруил, Серафил, Джибрил, Джибурили
Архангел Гавриил - Известен также как Абруил, Серафил, Джибрил, Джибурили
Толкование значения снов, на букву: «Ж»
Толкование значения снов, на букву: «Ж»
Толкование значения снов на букву: «О»
Толкование значения снов на букву: «О»
Статуя Зевса Олимпийского
Статуя Зевса Олимпийского
Совместимость по знаку зодиака Водолей – Рыбы
Совместимость по знаку зодиака Водолей – Рыбы
Анекдоты из серии: "кучка 1"
Анекдоты из серии: "кучка 1"
Анекдоты про учёных - (31)
Анекдоты про учёных - (31)
Формула счастья
Формула счастья
Как заняться сексом (пособие для начинающих и ни разу не кончивших).
Как заняться сексом (пособие для начинающих и ни разу не кончивших).
Анекдоты о российских военнослужащих -=- (70)
Анекдоты о российских военнослужащих -=- (70)
Advertising
MeteoNova
Свернуть Statistics Развернуть
Онлайн всего: 1
Гостей: 1
Пользователей: 0

Tagis Балаболка
Инфо сайта
Инфо форума

Все права защищены! shalbuzdag-666.ucoz.ru © 2009 – 2017 ()
уЧётчик сайта