interactive_pic-pic
Создадим интерактивное изображение со сплывающими подсказками в нужных местах. Онлайн ресурсов по созданию интерактивных карт достаточно в сети. Все они предполагают непосредственно работу с онлайн картами. Но использование обычной растровой картинки как подложку-фон они не поддерживают.
Есть один сервис Thinglink, но его бесплатная версия крайне убогая и в итоге с водным знаком. В качестве ознакомления с работой с интерактивными изображениями — можно ее протестить.
Будет делать всё ручками! :) С помощью jQuery.

Этап 1. Подготовка информации.
Подбор изображения и интерактивные подсказки.
На примере сделаем интерактивные подсказки с заголовком и всплывающим окном.
Вывод изображения:

1
#picture{ position:relative; width:4500px; height:607px; margin:0px auto; background:#FFF url('panorama.jpg'); overflow:hidden; }

При изменении картинки необходимо поменять ссылку на него и его размеры width и height.
В примере я буду использовать панорамную фотографию Днепропетровска со всплывающей информацией о достопримечательностях.

Этап 2. Разметка подсказок.
Чтобы сделать разметку подсказок нужно ввести их координаты. Для этого применяется любая графическая программа. Отсчитать пиксели снизу и слева — вот и будет координата.
Примеры координат моих подсказок:

1
2
3
4
5
#squarem{ top:180px; left:160px;}
#pasazh{ top:205px; left:250px; }
#cym{ top:185px; left:320px; }
#troica{ top:165px; left:20px; }
#novuicenter{ top:330px; left:853px; }

За вывод подсказок отвечает:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div class="more" id="squarem">
			<a href="#"><img src="more.png"/></a>
			<span>Площадь Героев Майдана</span>
</div>
<div class="more" id="pasazh">
			<img src="more.png"/>
			<span>ТЦ Пассаж</span>
</div>
<div class="more" id="cym">
			<img src="more.png"/>
			<span>Центральный Универмаг</span>
</div>
<div class="more" id="troica">
			<img src="more.png"/>
			<span>Свято-Троицкий собор</span>
</div>
<div class="more" id="novuicenter">
			<img src="more.png"/>
			<span>ТЦ Новый Центр</span>
</div>

При добавлении новой подсказки добавляется и координата и код вывода на странице (изображении).
В коде видно, что для элемента squarem я задала пустую ссылку тегом a. Это для того, чтобы при клике на подсказку выводилось всплывающее информационное окошко.
С помощью изображения more.png задается сам внешний вид интерактивного элемента (будь-то плюсик, маркер карт и тд.). В теге span внесем заголовок подсказки.

Этап 3. Всплывающее окно.
При клике на любую из подсказок (в примере на первую) необходимо, чтобы всплывало окно, содержащее дополнительную информацию.

1
2
3
4
<div id="infobox">
<span class="close"><a href="#"><img src="close.png"/></a></span>
<br/>
<div id="squarem_info">Текст вплывающего окна.</div>

CSS вплывающего окна:

1
2
3
#infobox{ position:absolute; bottom:-200px; left: 350px; height:200px; width:300px; z-index:20; margin:0 0 -100px -150px; color:#FFF; text-align:left; padding: 10px; background: rgba(0,0,0,0.6); -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; }
#infobox a, #infobox a:visited{ font:italic 12px Tahoma, Geneva CY, sans-serif; color:#555; text-decoration:none; }
#infobox a:hover{ text-decoration:underline; }

Этап 4. Комбинирование.
Подключаем скрипт:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<script type="text/javascript" src="http://code.jquery.com/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//Blur Links (Prevents Outline)
$('a').click(function() {
this.blur();
});
//Hide all item descriptions in the info box
$("#infobox > div").css("display", "none");
//Call in the info box
$(".more a").click(function(){
$("#infobox").animate({bottom: '233px' }, 300);
$("#fade_bg").fadeIn();
return false;
});
//Expand more info button on hover
$(".more").hover(function(){
$(this).stop().animate({width: '225px' }, 200).css({'z-index' : '10'}); //Change the width increase caption size
}, function () {
$(this).stop().animate({width: '20px' }, 200).css({'z-index' : '1'});
});
//Show description for selected item
$("#squarem a").click(function(){
$("#squarem_info").show();
});
//Remove background, info box and hide all descriptions
$("#fade_bg, .close").click(function(){
$("#fade_bg").fadeOut();
$("#infobox").animate({bottom: '-200px' }, 300, function() {
("#infobox > div").css("display", "none");
});
return false;
});
});
</script>

Небольшие расшифровки:
Blur Links (Prevents Outline) — размытие ссылки (предотвращается контурность)
Hide all item descriptions in the info box — скрыть все описания в информационном окне
Call in the info box — вызов информационного окна
Expand more info button on hover — растянуть кнопку при проведении мышью
Show description for selected item — показать описание выбранного элемента
Remove background, info box and hide all descriptions — удаление фона, информационного окна и скрытие всех описаний.

Демо
(в Демо включите отображение исходного кода страницы — там и будет весь код)

http://www.seovasikaru.com/wp-content/uploads/2016/08/interactive_pic-pic.jpghttp://www.seovasikaru.com/wp-content/uploads/2016/08/interactive_pic-pic-150x150.jpgvasikaruВеб-дизайнinteractive image,tipsСоздадим интерактивное изображение со сплывающими подсказками в нужных местах. Онлайн ресурсов по созданию интерактивных карт достаточно в сети. Все они предполагают непосредственно работу с онлайн картами. Но использование обычной растровой картинки как подложку-фон они не поддерживают. Есть один сервис Thinglink, но его бесплатная версия крайне убогая и в итоге...Создание сайтов, продвижение сайтов, seo, юзабилити