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

Разделы

Этот раздел предназначен для опытных. Используя карту-изображение можно создать графическую гиперссылку, которая будет срабатывать при нажатии на определенный участок рисунка. Причем не на огромный кусок, как при использовании таблицы, а на участок любой формы (к примеру на правое ухо вашего портрета). К тому же этот метод имеет преимущество перед табличным в том, что изображение не рассыпается на куски при уменьшении пользователем окна браузера.
Карты распознают рабочие поля трех форм: круг, прямоугольник и многоугольник.
Внимание важно! Для начала вам необходимо:
участок где будет расположен рисунок обозвать картой с некоторым именем:
<map name="Karta_1">

обозначить координаты и адреса всех ваших будущих ссылок: (см. ниже)
закрыть участок данной карты:
</map>

только потом дать адрес рисунка, объявив его использование в виде этой карты:
<img src="Image.jpg" usemap="#Karta_1">

А теперь разберем подробно все что касается второго пункта:
Самое простое- круглое поле: После описания в специальном теге area самой ссылки (на документ с именем papa.htm), задается тип рабочего поля(circle) и даются координаты центра круга по осям координат(два первых числа) а затем его радиус(все разумеется в пикселах) :
<area href="papa.htm" shape="circle" coords="350,200,100">

Чуть сложнее с координатами прямоугольника- задаются координаты сперва верхнего левого, а затем, так же через запятую, противоположного угла :
<area href="mama.htm" shape="rect" coords="34,67,125,280">

Совсем запутаться в цифрах можно при создании многоугольного поля- координаты всех точек поочереди (в порядке их соединения (последняя точка соеденится с первой)) просто перечисляются через запятую. Представляю как вы будете пересчитывать координаты какого-нибудь осьминога :) :
<area href="baba.htm" shape="polygon" coords="56,175,347,61,98,56,11,37,57,27,250,99">

Если вам необходимо создать ссылку например в виде бублика, то вам пригодится еще одна возможность карты-изображения. Рабочие поля ссылок могут перекрывать друг друга в любом месте изображения. Если так случилось, то срабатывать будет та ссылка, которая в HTML-коде описана первой. Вы можете объявить любое поле на карте мертвым (нерабочим), для этого необходимо описать координаты этого поля в том же теге area, но с параметром NOHREF вместо например href="aaa.htm". Следовательно, в нашем примере с бубликом , сначала необходимо описать внутреннее(нерабочее) круглое поле с параметром nohref, и только затем задать круг большего радиуса с тем-же центром, и ссылкой на нужный документ.

Кто не знает откуда достают координаты сообщаю: Берете чистый лист бумаги, открываете необходимую фотографию в Adobe Photoshop(это такая программа), тычете фотошоповским! карандашом в точки где будут находится необходимые углы ваших рабочих полей и считываете по боковой и верхней линейкам или в инфо их координаты. Не забудьте записывать их на бумаге, а лучше даже набросать эскизик, чтоб не запутаться.
МЕСТО ДЛЯ РЕКЛАМЫ
Главная страница
 

Статьи про заработок

Русские спонсоры
Зарубежные спонсоры
Собери бонусы
Биржа Форекс
Статьи темы
 

Начинающему Web - мастеру

Создать свой первый сайт
Как раскрутить свой сайт
Как заработать на сайте
Что такое ТИЦ и PR
Статьи темы
 

Виды обмана в интернет

Халява бред
 

Остальное

Новости сайта
Друзья сайта
След для истории
 
 
 
   
 
назад | содержание | вперед