Скрыть сайт
Показать сайт

Карта с выподающими списками

Карта с точками городов, при наведение на точку выпадает блок с описанием.

Точка изображена в виде блока с фоном, круглую её делаю бордери с закругленными углами. Размеры можно в настройках менять. Также можно добавить стиль описания города рядом с точкой. Менять описание в блоке див, например можно рассказывать какой менеджер в этом городе работает.

Скрипт не идеален, но это хорошая база, что бы понять как работает механизм.

Ниже пример и код разметки.

карта России

 

Описание под точкой
<style>
/*Сбросим отступы*/
.risia_rf h3,.risia_rf h3 a{padding:0;margin:0;}

/*Блок с точкой*/
.risia_rf {position:absolute;}

/*Cиний кружочек с белыми */
.risia_rf h3 a{
 display:block; 
 background-color:#0693E2;
 text-decoration:none; 
 border: 2px solid #ffffff;
 -moz-border-radius: 30px;/*Firefox*/
 -webkit-border-radius: 30px;/*Safari, Chrome*/
 border-radius: 30px;  
 width:13px;
 height:13px;
}
/*Синий кружочек при наведение становиться красным при наведении*/
.risia_rf:hover h3 a {
 color:#FFF;
 font-weight:bold;
 position:absolute;
 background-color:#FB0200;
}

/*Сам блок с описанием, который появляеться при наведение*/
.risia_rf div.bl{ 
 display:none;
 margin:25px 0 0 0;
 padding:5px;
 border: 2px solid #ffffff;
 -moz-border-radius: 10px;/*Firefox*/
 -webkit-border-radius: 10px;/*Safari, Chrome*/
 border-radius: 10px;  
 min-width:130px;
 min-height:50px; 
 background-color:#F2A413;
}
/*Механизм появления блока при наведения на точку*/
.risia_rf:hover div.bl{display:block;}
</style>

<div  style=" width: 700px; height: 409px;" >
	<img src="/file/109/russian.jpg" border="0" title="" alt="карта России" style="position:absolute;">
	<div class="risia_rf" style="margin: 200px 0 0 135px; ">
		<h3><a href="#">&nbsp;</a></h3>
		<div class="bl">Описание под точкой</div>
	</div>
</div>
 
345
344
1
Пишем культурно и не нарушая законы РФ.
 

2016 год.