Карта изображения

Всем привет!


Данная статья не будет связанной с Joomla, но будет достаточно интересной и полезной.


Сейчас мы с Вами научимся создавать карту изображения.


Карта изображения - это изображение, которое разделено на несколько секторов и при наводе курсора на определенный сектор происходит действие (ссылка, всплывающая надпись, выделение цветом и т.д).

Давайте на примере посмотрим, как сделать такое чудо:)


Возьмите какую-то картинку, у меня будет вот такая:


Карта изображения


Теперь идем на один из онлайн-сервисов, я выбрал этот http://summerstyle.github.io/summer/.


Заходим на него, берем картинку, перетаскиваем в область вставки и нажимаем ОК.


карта изображения html


После этого, картинка загрузится и мы попадем на страницу редактирования.


создать карту изображения html

В меню будут доступны такие функции:


  • Rectangle - Прямоугольник;
  • Circle - Круг;
  • Polygon - Многоугольник;
  • Edit - Редактировать;
  • To html - Показать html код;
  • Preview - Предварительный просмотр;
  • Clear - Очистить;
  • New image - Новая картинка.


Давайте перейдем к созданию.


У нас есть картинка с двумя областями, чтобы их выделить, можно воспользоваться Rectangle - Прямоугольником.


Нажимаем на Rectangle и выделяем нужные области на картинке.


урок карты изображений


После выделения, нажимаем на Edit, наводим курсор на область №1 и заполняем нужные поля (href, title, alt), аналогично делаем и для области №2.


карта изображения html


Нажимаем на to html и снизу появится код для вставки на сайт.


создать карту изображения


Далее копируем этот код и просто вставляем к себе на сайт.


Вот что должно получиться:


1 Карта изображенияСтраница2 Страница1


В коде должно быть все понятно, единственное, usemap="#map" - это подключение карты изображения с названием map, а это имя карты - <map name="map">.


На этом все, в следующей статье мы посмотрим подключение Jquery к карте, и выделение секторов карты по наведению курсора.


Вопросы в комментарии.

Хотите комплексно решить Ваш вопрос? 

Перейдите в наш раздел видео-курсов

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

Не смогли найти, то что искали? Воспользуйтесь поиском

Популярные статьи

Последние статьи


Рекомендуем хостинг

 

 

BeGet

 

30 дней бесплатно!

 

Дополнительно Вы получаете бонусные домены, которые можно использовать как для регистрации, так и для продления доменов в зонах .RU, .РФ, .ONLINE, .SPACE, .SITE, .WEBSITE, .FUN, .HOST, .PRESS, .PW.