Четверг, 05 Июля 2012 11:34

Карта Украины

Written by 
Оцени эту запись
(12 Голоса)

Хочу предоставить вашему вниманию карту Украины, прорисованную по областям, с подсветкой области при наведении, с селектором по областям, с информацией о области, появляющейся при клике на нее.

 

 

 

Демо

 

 

Для реализации этой карты я использовала:

 

  • html map
  • jQuery
  • картинку карты Украины без активной области и картинки для каждой области в активном состоянии

 

 

<map id="mapsvg" name="mapsvg">
      <area shape="poly" coords="92,62,114,64,121,91,90,86" href="javascript: void(0);" id="Vinnytsya" alt="Vinnytsya" />
      <area shape="poly" coords="28,22,60,15,65,30,49,47,30,32" href="javascript: void(0);" id="Lutsk" alt="Lutsk" />
      <area shape="poly" coords="185,77,202,71,228,83,222,98,200,93,188,105,172,95" href="javascript: void(0);" id="Dniepropetrivsk" alt="Dniepropetrivsk" />
      <area shape="poly" coords="243,70,262,97,251,114,234,118,234,99,230,92,228,81" href="javascript: void(0);" id="Donetsk" alt="Donetsk" />
      <area shape="poly" coords="93,22,116,24,118,62,90,57,85,41" href="javascript: void(0);" id="Zhytomyr" alt="Zhytomyr" />
      <area shape="poly" coords="15,72,44,91,44,97,20,97,6,85" href="javascript: void(0);" id="Uzhgorod" alt="Uzhgorod" />
      <area shape="poly" coords="189,105,202,93,234,104,232,118,204,130" href="javascript: void(0);" id="Zaporizhzhya" alt="Zaporizhzhya" />
      <area shape="poly" coords="29,80,44,64,63,82,45,93" href="javascript: void(0);" id="Ivanofrankivsk" alt="Ivanofrankivsk" />
      <area shape="poly" coords="116,25,131,24,138,38,155,44,153,58,141,65,120,70" href="javascript: void(0);" id="Kyivska" alt="Kyivska" />
      <area shape="poly" coords="123,87,169,73,181,79,189,78,160,100,142,91,124,89" href="javascript: void(0);" id="Kyrovograd" alt="Kyrovograd" />
      <area shape="poly" coords="162,147,181,131,209,147,223,145,224,155,210,154,185,168,176,183,178,153" href="javascript: void(0);" id="Crimea" alt="Crimea" />
      <area shape="poly" coords="249,52,279,62,274,82,274,99,263,98,245,71" href="javascript: void(0);" id="Lugansk" alt="Lugansk" />
      <area shape="poly" coords="14,63,36,42,57,55,42,66,41,71,33,71,28,80,15,72" href="javascript: void(0);" id="Lviv" alt="Lviv" />
      <area shape="poly" coords="130,92,142,92,156,99,159,100,171,95,173,104,169,118,159,118,152,126,144,123,143,110" href="javascript: void(0);" id="Mykolaiv" alt="Mykolaiv" />
      <area shape="poly" coords="107,93,129,92,139,105,144,124,107,152,98,145,111,124,121,124,125,120,111,105" href="javascript: void(0);" id="Odessa" alt="Odessa" />
      <area shape="poly" coords="158,48,189,45,208,62,185,77,169,69" href="javascript: void(0);" id="Poltava" alt="Poltava" />
      <area shape="poly" coords="62,15,93,22,84,36,84,43,70,50,56,53,52,46,60,41,64,42,67,32" href="javascript: void(0);" id="Rivne" alt="Rivne" />
      <area shape="poly" coords="184,7,193,19,192,28,202,30,211,46,195,52,189,44,173,44" href="javascript: void(0);" id="Sumy" alt="Sumy" />
      <area shape="poly" coords="46,64,68,49,70,83,62,83,51,75" href="javascript: void(0);" id="Ternopil" alt="Ternopil" />
       <area shape="poly" coords="200,54,217,45,225,49,238,45,248,55,245,70,226,82,202,71,209,64" href="javascript: void(0);" id="Kharkiv" alt="Kharkiv" />
       <area shape="poly" coords="180,103,190,106,206,130,199,138,182,130,163,135,152,127,161,118,170,118" href="javascript: void(0);" id="Kherson" alt="Kherson" />
       <area shape="poly" coords="84,44,94,71,87,73,87,83,70,83,70,50" href="javascript: void(0);" id="Khmelnytsky" alt="Khmelnytsky" />
       <area shape="poly" coords="122,71,139,67,152,59,159,51,167,65,169,72,127,84" href="javascript: void(0);" id="Cherkasy" alt="Cherkasy" />
       <area shape="poly" coords="134,34,134,20,142,12,157,12,177,6,171,32,172,44,159,47,154,42" href="javascript: void(0);" id="Chernigiv" alt="Chernigiv" />
       <area shape="poly" coords="45,94,67,83,79,88,67,96,57,97,51,100" href="javascript: void(0);" id="Chernivtsi" alt="Chernivtsi" />
</map>
 
<img src="/images/map/map.jpg" width="288" height="177" alt="" usemap="#mapsvg"  style="position: relative; top: 0px; left: 0px; z-index:1; visibility: visible;" />
 
 
Это реализация стандартного тега map для html, внутри которого находяься кликабельные области прописанные по координатам внутри тега area. В нашем случае, координаты описывают границы областей Украины.
Картинка, которую вы видите ниже тега map - это картинка Украины, на которой прорисованы области. На странице будет отображаться только картинка, но при клике на опеределенную ее область пользователь сможет перейти по нужной ссылке, которая прописана в атрибуте href тега area:
 
 
<area shape="poly" coords="134,34,134,20,142,12,157,12,177,6,171,32,172,44,159,47,154,42" href="/" id="Chernigiv" alt="Chernigiv" />
 
У нас там написано "javascript: void(0);", потому что мы не будем переходить никуда по клику, а будем показывать некоторую информацию на этой же странице.
 
 
Далее мы указываем картинку на каждую область:
 
 
<img src="/images/map/chernigov.jpg" width="288" height="177" alt="" class="reg_img" usemap="#mapsvg" id="ID_Chernigiv" style="position: absolute; top: 0px; left: 0px; visibility: hidden; z-index: 2;">
<img src="/images/map/kiev.jpg" width="288" height="177" alt="" class="reg_img" usemap="#mapsvg" id="ID_Kyivska" style="position: absolute; top: 0px; left: 0px; visibility: hidden; z-index: 2;">
<img src="/images/map/cherkasi.jpg" width="288" height="177" alt="" class="reg_img" usemap="#mapsvg" id="ID_Cherkasy" style="position: absolute; top: 0px; left: 0px; visibility: hidden; z-index: 2;">
<img src="/images/map/poltava.jpg" width="288" height="177" alt="" class="reg_img" usemap="#mapsvg" id="ID_Poltava" style="position: absolute; top: 0px; left: 0px; visibility: hidden; z-index: 2;">
<img src="/images/map/dnepropetrovsk.jpg" width="288" height="177" alt="" class="reg_img" usemap="#mapsvg" id="ID_Dniepropetrivsk" style="position: absolute; top: 0px; left: 0px; visibility: hidden; z-index: 2;">
...
 
 
 
У каждой картинки есть идентификатор, вида ID_Dniepropetrivsk, где Dniepropetrivsk - это идентификатор сообветствующей области карты, прописаный в теге area. То есть, у них такая связь:
 
 
<area shape="poly" coords="" href="/" id="Chernigiv" alt="Chernigiv" />
<img src="/images/map/chernigov.jpg" width="288" height="177" class="reg_img" usemap="#mapsvg" id="ID_Chernigiv" style="">
 
При наведении на какую-то область, мы будем вместо просто картинки Украины показывать картинку Украины с подсвеченной этой областью. Аналогично, при клике на область, мы будем видеть картинку с этой областью.
 
 
Далее мы делаем подписи областей:
 
<div id="Layer_city_text" style="position: absolute; top: 0px; left: 0px; width: 300px; height: 175px; z-index: 3; font-size: 10px; color: #858585;">
<span data-value="Vinnytsya" style="position: absolute; top: 75px; left: 95px;">Винница</span>
<span data-value="Lutsk" style="position: absolute; top: 24px; left: 37px;">Луцк</span>
<span data-value="Dniepropetrivsk" style="position: absolute; top: 85px; left: 162px;">Днепропетровск</span>
<span data-value="Donetsk" style="position: absolute; top: 96px; left: 227px;">Донецк</span>
<span data-value="Zhytomyr" style="position: absolute; top: 36px; left: 80px;">Житомир</span>
<span data-value="Uzhgorod" style="position: absolute; top: 83px; left: 4px;">Ужгород</span>
...
</div>
 
 
 
Блок, содержащий все подписи абсолютно спозиционирован и расположен поверх карты. Внутри него в span'ах находятся сами подписи областей. Они также абсолютно спозиционированны и при помощи отступов сверху и слева раположены над нужными областями. Текст выводится текстом, то есть его можно менять, переводить на другие языки и т.д. Ему можно задавать любой стиль в обычном состоянии и при наведении.
 
 
Далее выводим информацию об области, которая будет отображаться под картой при клике на область:
 
 
<div id="short-region-info">
                                <div class="region-short contact_reg" id="Crimea" style="display:none">
                                <p>г. Симферополь<br />Контактные данные</p>
                                <a class="readmore_reg" href="#"><span></span>Детально</a>
                </div>
                                <div class="region-short contact_reg" id="Vinnytsya" style="display:none">
                                    <p>г. Винница<br />Контактные данные</p>
                                    <a class="readmore_reg" href="#"><span></span>Детально</a>
                </div>
                                <div class="region-short contact_reg" id="Lutsk" style="display:none">
                                <p>г. Луцк<br />Контактные данные</p>
                                    <a class="readmore_reg" href="#"><span></span>Детально</a>
                </div>
                                <div class="region-short contact_reg" id="Dniepropetrivsk" style="display:none">
                                <p>г.Днепропетровск<br />Контактные данные</p>
                                    <a class="readmore_reg" href="#"><span></span>Детально</a>
                </div>
                ...
</div>
 
 
Я не привожу весь код, а только часть, потому что у нас 24 области + Крым. Полный код можно посмотреть в просмотре кода страницы.
 
Как видем, блоки с информацией скрыты:   style="display:none"
 
Они будут показаны только при клике.
 
В каждом блоке с информацией есть ссылка 
 

<a class="readmore_reg" href="#"><span></span>Детально</a>

 

Вы можете в информации об области вывести краткую информацию, а в эту ссылку поместить ссылку на страницу с полным описанием.

 

Еще у нас есть селектор по областям:

 

 

<div class="select_reg">
      <select id="selected_region" name="selected_region">
             <option value="0">Выберите область</option>
             <option value="Crimea">Автономная республика Крым</option>
             <option value="Vinnytsya">Винницкая область</option>
             <option value="Lutsk">Волынская область</option>
             <option value="Dniepropetrivsk">Днепропетровская область</option>
              ...
       </select>
</div>
 
При выборе области в селекторе, она выбирается и на карте.
 
 
Привожу основной скрипт, который все это счастье объединяет:
 
 
 
<script type="text/javascript">
$(document).ready(function (){
$.each($('#mapsvg area'), function(idx, el) {
$(el).on('mouseover', function()
{
$('#ID_'+$(this).attr('id')).css('visibility', 'visible');
});
$(el).on('mouseout', function()
{
refresh_region_short_description();
});
$(el).on('click', function()
{
var id = $(this).attr('id');
$('#selected_region').children().attr('selected', false);
$('#selected_region').children('option[value='+id+']').attr('selected', true);
refresh_region_short_description();
});
});
 
$('#selected_region').on('change', function() {
refresh_region_short_description();
});
$('#Layer_city_text span').on('click', function(){
var id = $(this).attr('data-value');
$('#selected_region').children().attr('selected', false);
$('#selected_region').children('option[value='+id+']').attr('selected', true);
refresh_region_short_description();
$('.reg_img').css('visibility', 'hidden');
$('#Layer_city_text span').css('color', '#858585').css('cursor', 'pointer');
$(this).css('color', '#fff').css('cursor', 'pointer');
$('#ID_'+id).css('visibility', 'visible');
});
$('#Layer_city_text span').on('mouseover', function(){
var id = $(this).attr('data-value');
$('.reg_img').css('visibility', 'hidden');
$('#Layer_city_text span').css('color', '#858585').css('cursor', 'pointer');
$(this).css('color', '#fff').css('cursor', 'pointer');
$('#ID_'+id).css('visibility', 'visible');
});
});
 
function refresh_region_short_description() {
var id = $('#selected_region').children(':selected').val();
$('.reg_img').css('visibility', 'hidden');
$('#short-region-info').children('.region-short').css('display', 'none');
if (id) {
$('#short-region-info').children('#'+id).css('display', 'block'); 
$('#ID_'+id).css('visibility', 'visible');
}
}
</script>
 
 
 
Для начала о функции refresh_region_short_description, которую будем использовать. В этой функции мы для заданного идентификатора области скрываем все картинки областей и описания к ним и показываем только те, что подходят по id.
 
 
$.each($('#mapsvg area'), function(idx, el) {
$(el).on('mouseover', function()
{
$('#ID_'+$(this).attr('id')).css('visibility', 'visible');
});
$(el).on('mouseout', function()
{
refresh_region_short_description();
});
$(el).on('click', function()
{
var id = $(this).attr('id');
$('#selected_region').children().attr('selected', false);
$('#selected_region').children('option[value='+id+']').attr('selected', true);
refresh_region_short_description();
});
});
 
 
Для каждой области  $.each($('#mapsvg area') при наведении мы отображаем соответсвующую картинку, при уходе курсора выполняем вышеописанную функцию. При клике на область мы выделяем соответсвующую область в селекте и опять таки выполняем функцию refresh_region_short_description.
 
 
$('#Layer_city_text span').on('click', function(){
var id = $(this).attr('data-value');
$('#selected_region').children().attr('selected', false);
$('#selected_region').children('option[value='+id+']').attr('selected', true);
refresh_region_short_description();
$('.reg_img').css('visibility', 'hidden');
$('#Layer_city_text span').css('color', '#858585').css('cursor', 'pointer');
$(this).css('color', '#fff').css('cursor', 'pointer');
$('#ID_'+id).css('visibility', 'visible');
});
$('#Layer_city_text span').on('mouseover', function(){
var id = $(this).attr('data-value');
$('.reg_img').css('visibility', 'hidden');
$('#Layer_city_text span').css('color', '#858585').css('cursor', 'pointer');
$(this).css('color', '#fff').css('cursor', 'pointer');
$('#ID_'+id).css('visibility', 'visible');
});
 
 
Далее работаем с текстом, поскольку блок, его содержащий, находится поверх всего. При клике на определенное название области, мы определяем к какой области этот текст относится и работаем уже с ней. Для этой области мы делаем его активной в селекте, показываем соответствующую картинку и выводим описание. Также текст, по котором был клик, выделяем белым цветом.
 
При наведении на некоторый текст, бы убираем выделение с любого другого текста, скрываем картинки с другими областями и показываем картинку с нужной областью.
 
 
 
 

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов