Контакты

Заметки Веб-разработчика

Полезная информация для исполнителей и заказчиков

Как сделать Интерактивную Карту на сайте. Работа с SVG Изображениями

Сейчас мы пошагово разберемся с тем как сделать какое либо изображение на сайте интерактивным, то есть, чтобы все части изображения можно было выбрать наведением мыши и нажать на них. Примером такого рода изображений могут выступать фото на сайтах по продаже недвижимости, сайты с картами где можно нажать на их части для перехода на другую страницу или для запуска определенного действия или для включения анимации на сайте. Начнем!
 

ШАГ 1. Подготовка базовой HTML разметки

Добавьте код ниже:




<div class = "map">
	<svg viewBox = "0 0 960 480">
		<path d = "">
	</svg>
	<img src = "images/map.png" alt = "карта мира" />
</div>



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

ШАГ 2. Создание SVG елементов

Для дальнейшей работы вам необходимо установить программу позволяющую работать с svg графикой Inkscape. После установки программы смело запускайте её. Открывайте ваше изображение в этой программе во вкладке «файл» и «открыть…» . В моём случае это изображение карты мира. Затем нажимайте на кнопку в правом нижнем углу «Просмотреть и изменить XML«. У вас после нажатия на эту кнопку в правой части экрана появится соответствующий виджет.

Далее нажмите на кнопку «Рисовать произвольные контуры» и начинайте обводить то место картинки, которое вы хотите добавить в svg елемент.

После выделения выберите появившуюся строку выделенной вами части изображения в редакторе xml. Затем выберите поле d этого елемента и скопируйте его содержимое немного ниже.

В поле d будет довольно большой объем координат. Копируйте это все и вставляйте в вашем HTML коде в атрибут d елемента path.

После добавления координат можете обновить страницу. Вы увидите, что появился черная проекция изображения, которую вы обводили ранее.

ШАГ 3. Добавление стилей

Для того, чтобы все это дело нормально отображалось, нам нужно добавить такие стили нашим елементам:


.map
{
	position: relative;
	text-align: center;
}
svg
{
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
}
path
{
	opacity: 0.4;
	fill: orange;
	cursor: pointer;
	transition: 0.3s;
}
path:hover
{
	opacity: 0.8;
	transition: 0.3s;
}

В зависимости от того, что вы за картинку использовали у вас будет немного разный вид изображения. Вот, например, у меня получилось так. Довольно криво я навел контуры картинки, но для меня главное было показать, что вышло в итоге) Я не делал всю карту интерактивной и более аккуратной ибо это заняло бы намного больше времени, а результат был бы один и тот же. Главное, что вы поняли как это работает и как это реализовывать.

Примечание. К таким интерактивным картинкам вы можете добавлять ссылки, подключать различные скрипты для увеличения общего функционала. Вы в фантазии не ограничиваетесь.

Все! Теперь вы сделали свою первую интерактивную svg карту.



Оставьте свой комментарий внизу