Как сделать карту ссылок изображений

Карта ссылок изображений представляет собой обычное изображение в html (тег <img>), но с областями-ссылками. Причем таких областей можно создать очень много практически любой формы.

Рассмотрим пример как выглядит карта изображений в html:


При наведении курсора мышкой на области зеленого прямоугольника видно, что она является ссылкой на “#green_link” (метка выбрана для примера, можно сделать ссылку на любую страницу в интернете). У красного квадрата на “#red_link“, а у синего круга соответственно на “#blue_link“.

Код этого примера:

<img usemap="#primer1" src="img/primer-kartu-izobrazheniy-1.jpg">
<map name="primer1">
<area shape="rect" coords="20,20,71,61" title="Зеленый прямоугольник" href="#green_link">
<area shape="rect" coords="100,15,162,77" title="Красный квадрат" href="#red_link">
<area shape="circle" coords="61,111,21" title="Синий круг" href="#blue_link">
</map>

Как видно из примера код не такой уж и сложный. Разберем теги для создания карты ссылок изображения.

Описание примера

1. Необходимо создать связку изображения <img> и карты <map>. В изображении нужно сослаться на карту с помощью атрибута usemap=”#primer1″. А ниже нужно описать код карты.

При создании карты ссылок атрибут usemap является обязательным для тега img.

2. Описание карты <map> состоит из обязательного атрибута name, с помощью которого будет осуществляться привязка к изображению.

3. Каждый элемент карты описывается с помощью тега <area>, в котором указывается тип объекта с помощью атрибута shape (прямоугольник, круг или многоугольник) и его координаты.

Примечание

Области могут перекрывать друг друга. В этом случае ссылка будет вести на тот объект, что описан последним.



Атрибуты тега <area>

1. Атрибут shape=”тип_объекта” — задает тип объекта. Может принимать следующие значения:

  • circle — круг;
  • rect — прямоугольник;
  • poly — многоугольник;

2. Атрибут coords=”значения_координат” — определяет геометрическое расположение объекта и его размеры.

Точкой отчета изображения является верхний левый угол. Т.е. если вы указали отступ 10 по высоте, то это означает 10 пикселей вниз.

В зависимости от типа объекта нужно задавать значения координат в разных форматах. Все значения указывается в пикселях (пометку px писать не нужно).

  • Для типа circle: coords = (x,y,r), где x,y координаты центра круга, а r – радиус круга;
  • Для типа rect: coords = (x1,y1,x2,y2), где x1,y1 координаты левой верхней точки прямоугольника, x2,y2 – координаты нижний правой точки прямоугольника;
  • Для типа poly: coords = (x1,y1,x2,y2,…,xn,yn), последовательно указываются координаты x,y каждой точки многоугольника;

3. Атрибут href=”адрес_перехода” — задает ссылка для перехода (аналогично тегу <a>). Помимо адреса перехода можно использовать функции JavaScript для выполнения какого-то действия.

4. Атрибут target=”значение” — аналогично тегу <a> определяет действие перехода по ссылке. Может принимать значения:

  • _blank — открывает страницу в новом окне
  • _self — загружает страницу в текущее окно
  • _parent — загружает страницу во фрейм-родитель
  • _top — отменяет все фреймы и загружает страницу в полном окне браузера

5. Атрибут title=”подсказка” — выводит всплывающую подсказку. можно также сделать более красивую всплывающую подсказку: как сделать красивую всплывающую подсказку для ссылки »

6. Атрибут nohref — делает область неактивной. Используется при перекрытии объектов. Используется довольно редко, но иногда это может стать незаменимым решением. Например можно сделать маленький круг внутри большого круга неактивным.

Обязательно область nohref должна идти первой.


Пример кода:

<area shape="circle" coords="50,50,20" title="Белый круг" nohref>
<area shape="circle" coords="50,50,50" title="Синий круг" href="#blue_link">

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




Читайте также:

Как создать карту сайта

• Как убрать подчеркивание ссылки

• Как сделать якорь ссылки

• Как скруглить углы в HTML через CSS

• Как вставить музыку на сайте

• Как сделать слайдер

• Как сделать обтекание картинки текстом

• Как открыть ссылку в новом окне

← Перейти в каталог html уроков и советов

Читайте также:

Copy Protected by Chetan's WP-Copyprotect.