2014-01-22

Картинки со ссылкой в шапке сайта (Image map)

Картинки со ссылкой в шапке сайта
Из этой статьи вы узнаете, как сделать кликабельные картинки в шапке сайта с помощью Image Map (карты изображений html). Таким образом можно вставить иконки социальных сетей в шапку сайта или блога, создать навигацию, менб в header или в баннере, сделать галерею изображений и многое другое.
Оглавление
  1. Что такое Image Map, примеры карты изображения
  2. Как подготовить изображение для создания Image Map
  3. Код карты изображения
  4. Как создать карту изображения в image-maps.com
  5. Как установить картинку со ссылками в качестве шапки blogspot

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

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

    Так выглядит схема разметки шапки:
    image map html
  2. Для того, чтобы

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

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

    следующий:
    Привожу код  для общего развития, чтобы знать, что “что где лежит” в случае, если придется править код. Далее в статье вы узнаете, как генерировать код Image map в специальном сервисе. 
    <img  src="http://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="http://www.mycrib.ru/p/blog-page_10.html" shape="rect" alt="" target="_self" coords="193,72,254,128" />
    <area href="http://vk.com/vgrafikeru" shape="rect" alt="" target="_self" coords="284,75,345,131" />
    <area href="https://www.facebook.com/profile.php?id=100004345658718" shape="rect" alt="" target="_self" coords="369,79,428,129" />
    <area  href="https://twitter.com/Vgrafike" shape="rect" alt="" 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 – форма области по умолчанию (прямоугольник).
  4. В генераторе кода карты изображения

    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”. 
  5. Как вставить шапку с кликабельными картинками на блог Blogspot

    .
    Во вкладке “Дизайн” админпанели блога создайте гаджет Html / JavaScript под гаджетом заголовка.
    шапка со ссылками
    Вставьте в него код, полученный на сервисе image-maps.com. Просмотрите блог. У вас получится 2 шапки. Верхнюю шапку легко отключить – во вкладке Шаблон –> Изменить html найдите отрезок кода ]]></b:skin> и вставьте перед ним:
    .Header {display:none;}
    Важно! Храните изображения на собственном надежном хостинге, не испольуйте для этих целей сервис image-map.com. Просто замените прямую ссылку изображения шапки на ссылку картинки, залитой в надежное место (например, яндекс.фотки – мой опыт).

13 комментариев :

Анна Шефер комментирует...

Шаблон не удобный стал(. За информацию спасибо

Mycrib комментирует...

Анна, а чем неудобен новый шаблон?

Сергей комментирует...

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

Mycrib комментирует...

Спасибо, Сергей, за замечание. Шаблон новый, еще не настроила полностью под себя. Поправила.

Сергей комментирует...

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

Иванова Наталья комментирует...

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

Сергей комментирует...

Наталья, спасибо за консультацию.

Сергей Ястребов комментирует...

Автоматический генератор map area http://crazysquirrel.ru/#!image_to_map_area

Иванова Наталья комментирует...

Спасибо, Сергей, интересный сервис.

Анонимный комментирует...

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

Иванова Наталья комментирует...

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

Анонимный комментирует...

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

Анонимный комментирует...

Вот ещё один генератор, только в виде программы.
http://newjs.my1.ru/load/generator_kart_html/1-1-0-4

Отправить комментарий

Комментарии, содержащие ненормативную лексику, спам, оскорбления, публиковаться не будут. Ели вы хотите опубликовать код в комментарии, то воспользуйтесь encoder HTML