Создание Image Map (карты изображений)

Из этой статьи вы узнаете, как сделать кликабельные картинки в шапке сайта с помощью Image Map (карты изображений html). Таким образом можно вставить иконки социальных сетей в шапку сайта или блога, создать навигацию, меню в header или в баннере, сделать галерею изображений и многое другое.

Image Map – карта изображений

– особый вид разметки html, при которой в изображении выделяются области, которые становятся активными ссылками.
Пример шапки сайта с иконками: 

Это цельная картинка, но из области иконок обратной связи, твиттера, facebook и vk идут ссылки на соответствующие страницы.

Так выглядит схема разметки шапки:

Как сделать картинку с иконками в фотошопе

Для того, чтобы подготовить изображение для последующего создания карты изображений, нам потребуется отредактировать его в фотошопе или другом графическом редакторе. Подойдет даже фотошоп онлайн, для создания галереи подойдут сервисы для создания коллажей. Рассмотрим конкретный пример наложения иконок на изображение
шапки в фотошопе:

Откройте изображение шапки блога и иконки социальных сетей в фотошоп. Возьмите инструмент “Перемещение” (самый верхний на панели инструментов) и перетяните иконку мышкой на шапку, поставьте ее в нужное место. То же самое проделайте с остальными иконками.

Создать Image Map онлайн

Код карты изображения (Image Map) позволяет создавать интерактивные области на изображении, которые могут быть связаны с различными ссылками. Это полезно, например, для создания навигационных карт, интерактивных диаграмм или других визуальных элементов, где разные части изображения должны вести на разные страницы или ресурсы.

Привожу код карты изображения для примера. Он состоит из двух основных частей:

1. кода изображения вида <img src="" > с атрибутом usemap, свойство которого связывает изображение с блоком <map>
2. Блока <map>, который содержит описание областей (теги <area>), которые являются интерактивными. Блок <map> в свою очередь содержит следующие атрибуты:
   • href: ссылка, на которую ведет область.
   • shape: форма области (например, rect для прямоугольника, circle для круга, poly для многоугольника)
   • coords: координаты области, которые зависят от формы. Для прямоугольника это x1,y1,x2,y2 (координаты верхнего левого и нижнего правого углов).
   • alt: альтернативный текст для области.
   • target: указывает, где открыть ссылку (например, _blank для открытия в новой вкладке)

<img  src="https://img-fotki.yandex.ru/get/9108/40839264.15/0_a8ef5_9ac3c703_XL.jpg" width="550" height="160" usemap="#image-maps1" />
<map name="image-maps1">
<area  href="https://mycrib.ru/p/blog-page_10.html" shape="rect" alt="Создание Image Map (карты изображений)" target="_self" coords="193,72,254,128" />
<area href="https://vk.com/vgrafikeru" shape="rect" alt="Создание Image Map (карты изображений)" target="_self" coords="284,75,345,131" />
<area href="https://www.facebook.com/profile.php?id=100004345658718" shape="rect" alt="Создание Image Map (карты изображений)" target="_self" coords="369,79,428,129" />
<area  href="https://twitter.com/Vgrafike" shape="rect" alt="Создание Image Map (карты изображений)" target="_self" coords="457,81,516,131" />
<area  href="http://www.image-maps.com/index.php?aff=mapped_users_2499" shape="rect" alt="Image Map" coords="548,158,550,160" /></map>

Примеры координат для областей разных фигур

• circle – окружность. Ее расположение -  координаты центра и величина радиуса coords="x1,y1,r”,
• rect – прямоугольник. Координаты левого верхнего и правого нижнего углов coords="x1,y1,x2,y2"
• poly – многоугольник. Расположение – определяются координаты каждого угла области coords="x1,y1...xN,yN",
• default – форма области по умолчанию (прямоугольник).

Мы не будет писать код вручную, а доверимся онлайн-генератору, который вы найдете чуть ниже на этой странице.

Генератор кода Image Map

Как использовать генератор:

1. Загрузите изображение.
2. Добавьте области с помощью кнопки "Add Area".
3. Введите ссылки в соответствующие input'ы.
4. Нажмите "Generate Code", чтобы сгенерировать HTML-код.
5. Кликните на сгенерированный код, чтобы скопировать его.
6. Используйте кнопку "Clear All", чтобы начать заново.

Как вставить меню imagemap на сайт

Я покажу пример, как сделать шапку для блога на Blogger с кликабельными иконками. На других платфомах imageMap вставляют аналогично.

1. Во вкладке “Дизайн” админпанели блога создайте гаджет Html / JavaScript под гаджетом заголовка.
   

   

2. Вставьте в него код, полученный в нашем генераторе. Просмотрите блог. У вас получится 2 шапки. Верхнюю шапку легко отключить – во вкладке Шаблон –> Изменить html найдите отрезок кода ]]></b:skin> и вставьте перед ним:

   .Header {display:none;}

3. Важно! Храните изображения на собственном надежном хостинге. Просто замените прямую ссылку изображения шапки на ссылку картинки, залитой в надежное место.