Гость !!! | RSS
Меню сайта
Оставить отзыв Гороскопы Сонник Мешок позитива Раскрутка сайта HTML HTML Формы Примеры Таблицы Таблицы цветов Генераторы Скрипты
Категории раздела
Новости [61]
Х-Новости [44]
Самое..., самое!!! [342]
ИнтересНости [241]
Праздничная [3]
Ghostly photo
Самые необычные модели компьютерной мышки
Самые необычные модели компьютерной мышки
Татуировки - преступного мира (Расшифровка татуировок)
Татуировки - преступного мира (Расшифровка татуировок)
Ученые расшифровали «внутренний голос» мозга
Ученые расшифровали «внутренний голос» мозга
Самое сильное выпучивание глаз.
Самое сильное выпучивание глаз.
Самые красивые девушки планеты
Самые красивые девушки планеты
Рекорды Гинесса за 2010 год
Рекорды Гинесса за 2010 год
Самые худые девушки планеты... (20 фото)
Самые худые девушки планеты... (20 фото)
Самые дорогие российские монеты
Самые дорогие российские монеты
Soft
Получить код блока
Mini-CHat
Они ждут - Тебя!
Аркады и экшн · Toxic Jump
Головоломки · Squiggle Squid
Аркады и экшн · Агентство талантов Лилу
Аркады и экшн · Луна-Парк

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

Баннерообмен
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.225.54.120

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



Заговор от алкоголя
Блестящие - Чао, бамбино Eminem - Like Toy Soldiers Массква - Разные Бумбокс - Наодынци Evanescence - 07-Imaginary Evanescence - Anything for You
Tag cloud
Свернуть Архив записей Развернуть
«  Сентябрь 2017  »
ПнВтСрЧтПтСбВс
    123
45678910
11121314151617
18192021222324
252627282930
Опросник
Кто Вы, по знаку зодиака?
Всего ответов: 190
Юмористический гороскоп - ужасающего характера...
Юмористический гороскоп - ужасающего характера...
Совместимость по знаку зодиака Близнецы – Лев
Совместимость по знаку зодиака Близнецы – Лев
Символика татуировки (тату) » Знаки зодиака – Козерог
Символика татуировки (тату) » Знаки зодиака – Козерог
Айтварас - Летучий дух
Айтварас - Летучий дух
Совместимость по знаку зодиака Козерог – Рак
Совместимость по знаку зодиака Козерог – Рак
Анекдоты про чукчей - 101
Анекдоты про чукчей - 101
Анекдоты - про школьников (57)
Анекдоты - про школьников (57)
Анекдоты о продавцах и покупателях (40)
Анекдоты о продавцах и покупателях (40)
Подборка анекдотов (#74)
Подборка анекдотов (#74)
Бой с карибскими бандитами
Бой с карибскими бандитами
Advertising
MeteoNova
Свернуть Statistics Развернуть
Онлайн всего: 1
Гостей: 1
Пользователей: 0

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

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