Web Builder

Главная
Введение в HTML
Выбор хостинга
Раскрутка сайта
О зароботке в сети
Webmoney & E-gold
Партнерские програмы
Показ баннеров
Практика вебмастера
Файловый архив
Графика для сайта
Готовые JavaScripts
Карта сайта
Услуги
Форум
Гостевая книга

On-Line учебник по HTML - Изображения-карты

Что такое изображения-карта? Это - рисунок, разные части которого имеют различные ссылки или же выполняют различные скрипты. Чтобы вам было понятнее, я приготовил вам следущую карту. Проексперементируйте, кликая по разным частям рисунка.

Вот код етой карты:

<IMG SRC="im/imap.jpg" BORDER="0" WIDTH="307" HEIGHT="230" ALT="Здесь изображения-карта" align=center USEMAP="#Mmap">
    <MAP NAME="Mmap">
    <AREA SHAPE="poly" COORDS="0,145,152,104,306,135,306,156,0,205" OnClick="alert('Здесь скалы!!!'); return false" LANGUAGE="Javascript" TITLE="Скалы">
     <AREA SHAPE="poly" COORDS="0,0,307,0,306,135,152,104,0,215" OnClick="alert('Небо!!!'); return false" LANGUAGE="Javascript" TITLE="Небо">
    <AREA SHAPE="poly" COORDS="0,205,306,156,307,230,0,230" OnClick="alert('Море!!!'); return false" LANGUAGE="Javascript" TITLE="Море">

Чтобы создать карту нужно вставить в тег <IMG""> с нужными атрибутами и обязательным USEMAP="#name", где name - имя карты (значок # обязателен).

Вслед за ерим идет описания активных областей карты. Начинаем с открывающегося тега <MAP NAME="name"> (здесь повторяется имя, но уже без значка #, а заканчиваем закрывающимся тегом </MAP>.

Между этими тегами помещаем описание каждой активной области изображения: <AREA SHAPE="форма" COORDS="координаты" HREF="адрес" TITLE="альтернативный текст">. Элемент <AREA> имеет следующие аттрибуты и их значения:

SHAPE Описывает форму выделяемой области, возможные значения:
RECT - прямоугольник
CIRCLE - круг
POLY - многоугольник
DEFAULT - определяет всю область, т.е весь рисунок может стать ссылкой.

COORDS Координаты, определяющие размеры и положение области на изображении. Все координаты отсчитываются в пикселях от левого верхнего угла изображения. Количество и порядок значений зависит от значения аттрибута SHAPE:
RECT: - левый-X, верхний-Y, правый-X, нижний-Y (т.е. сначала координаты левого верхнего угла, затем правого нижнего)
CIRCLE: - центр-X, центр-Y, радиус (т.е. горизонтальная и вертикальная координаты центра круга и радиус)
POLY: - X1, Y1, X2, Y2, ..., Xn, Yn (просто перечисляются координаты всех вершин многоугольника).

NOHREF Определяет, что данной области не соответствует никакая ссылка. Где это может пригодиться? Ну, например, если вы хотите сделать ссылку не в виде круга, а в виде кольца

ALT Альтернативный текст для выделенной области, используется невизуальными браузерами.

TITLE Название выделенной области, выводится в виде подсказки, всплывающей при наведении курсора на область рисунка.

TARGET Значение этого аттрибута ("_top", "_blank", "_self" или "_parent") определяет, в каком окне будет открыт документ

Для того, чтобы рассчитать точно координаты нужной части изображения существуют специальные программы. Одна из них называется MapEdit. Например я пользуюсь редактором изображений ACD Foto Canvas в нем видно координаты курсора.

Полезные ссылки:

Хостинг от uCoz