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

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

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

– особый вид разметки html, при которой в изображении выделяются области, которые становятся активными ссылками.
Пример шапки сайта с иконками: 
Создание Image Map (карты изображений)
Это цельная картинка, но из области иконок обратной связи, твиттера, facebook и vk идут ссылки на соответствующие страницы.

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

  1. Для того, чтобы

    подготовить изображение для последующего создания карты изображений

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

  2. Код карты изображения (Image map)

    Привожу код  для общего развития, чтобы знать, что “что где лежит” в случае, если придется править код. Далее в статье вы узнаете, как генерировать код Image map в специальном сервисе.

    <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>

    Вначале прописывают код изображения (в примере, шапки блога) с заданными размерами (шириной и высотой) и заданным usemap.
    где map – контейнер, в котором заключены элементы area. Последние задают координаты, форму области, ее размеры и ссылки.
    Формы областей задают при помощи share, различают:

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

    Image-maps.com вы быстро получите код. В начале необходимо зарегистрироваться на сайте, регистрация не займет у вас много времени. Теперь вам нужно загрузить ваше изображение одним из двух способов:

    • по url – вставьте адрес картинки в специальную строку “paste URL”
    • загрузить из компьютера – нажмите кнопку “Browse for file”

    image-maps.com
    Загружаем картинку, нажав на кнопку
    сделать карту изображения в генераторе
    Через некоторое время вы увидите загруженное изображение, нажмите на ссылку “click to continue”:
    image-map генератор
    В редакторе Image Map жмите правой кнопкой мыши, чтобы вызвать меню:
    image-maps.com как работать
    Расшифрую все пункты меню:

    • Create Rect – создать прямоугольную область,
    • Create Poly – создать многоугольник,
    • Create Circle – содать овальную область,
    • Options – опции. Задаем название карты изображения, ссылка на изображение. Настройки image map.
    • Account – редактируем данные аккаунта – логин, пароль и пр.
    • Get Code – получить код html image map.
    • Comments, Help – помощь,
    • Refresh Page – обновить страницу,
    • Home Page – Главная страница.

    Для примера создадим прямоугольную область вокруг иконки “Письмо”.  Выберите пункт Create Rect и с помощью мышки создайте область вокруг выбранной иконки:
    создать карту изображения html
    Появилось окно с вкладками, где мы будем прописывать настройки области image map:

    • Option. Здесь в графе Map URL прописываем адрес страницы, на которую будет ссылаться данная прямоугольная область карты изображения (в примере – иконка “Письмо”). Желательно прописать title, alt и ID.
    • Events. Главное здесь – в каком окне будет открываться ссылка. Вбираем _blank для открытия в новом окне.
    • Setting. Background color – цвет заливки области, opacity – непрозрачность заливки (выбираем значение 0, если хотите отменить заливку), Border – цвет обводки и толщина, font color – цвет шрифта (при подписи областей, что доступно лишь в pro аккаунте).

    Когда все иконки шапки блога будут выделены, все настройки заданы, получаем код html Image map. Клик правой кнопкой мыши –> пункт “Get code”.

  4. Как вставить шапку с кликабельными картинками на блог Blogspot

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

    .Header {display:none;}

    Важно! Храните изображения на собственном надежном хостинге, не используйте для этих целей сервис image-map.com. Просто замените прямую ссылку изображения шапки на ссылку картинки, залитой в надежное место.

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

  1. Почему-то наезжают буквы друг на друга http://f6.s.qip.ru/w5qyEmXl.png Думал дело в браузере, но одинаково и в Мозилле и в Хроме смотрится.

    1. Теперь хорошо!
      Ещё хотел спросить, можно ли использовать данный способ на других блогосервисах, конкретно на MyPage.ru ( у Вас же есть там блог, если я не ошибаюсь).

    2. Сергей, этот image map можно использовать практически на всех блогосервисах, где возможно вставлять html-код.
      Конкретно про MyPage.ru ничего не могу сказать, у мне там нет блога. Можно протестировать — вставить мой код, который я предлагаю в качестве примера. Если будет работать, то тогда можно его удалить и создать свою карту изображений.

  2. Здравствуйте. Проверил, сервис отлично работает. Но я хочу сделать меню. Не подскажите как сделать чтобы при наведение на слово оно подчеркивалось или меняло цвет?

  3. Посмотрите готовые меню для блога можно взять здесь, а настроить подчеркивание ссылок в меню можно при помощи css — смотреть здесь

  4. Статья хорошая и полезная, но руками долго, и нужно понимать что делаешь, в программе всё проще и инет не нужен.
    _http://newjs.my1.ru/load/generator_kart_html/1-1-0-4

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *