Изображение-карта на CSS

Изображение-карта на CSS

Изображение-карта на CSS
Используется, чтобы сделать любое изображение интерактивным – при наведении курсора на заданный фрагмент возникает изображение, текст, цветной блок
Можно сделать интерактивным, что угодно – интерактивную географическую карту, схему механизма, фасад здания – любое изображение

Изображение-карта на CSS
Существует множество технологий создания карт – можно «кодить», используя svg, Java Script + css, html
Есть специальные приложения для работы с картами с визуальным интерфейсом
Можно работать с Яндекс и Google картами

Изображение-карта на CSS
Мы будем разбирать самый доступный способ:
!!! Чистый CSS + HTML !!!

Изображение-карта на CSS
Подготовка – есть 2 картинки: основное изображение (карта), изображение метки (png с прозрачным фоном)

Изображение-карта на CSS
Подготовка – есть 2 картинки: основное изображение (карта), изображение метки (png с прозрачным фоном)

Изображение-карта на CSS
Добавляем блок карты с id="mapcss". В него вкладываем 4 блока – фон и 3 блока метками на карте map1, map2, map3. в блоки с метками вложены гипер-ссылки, ведущие в разные разделы сайта. class="tooltip” будет отвечать за внешний вид подложки меток.
на главную
новости

Изображение-карта на CSS
Начинаем разрабатывать стиль в файле style.css. Добавляем ссылку на стилевой файл

Изображение-карта на CSS
Начинаем разрабатывать стиль в файле style.css. Работаем с оформлением тэга body. У гипер-ссылок отключаем подчеркивание
body {
font-weight: bold;
font-style: normal;
font-size: 10px;
vertical-align: top;
outline: none; - запрет на обводку элемента
}
a:link, a:visited, a:active {
text-decoration: none;
}

Изображение-карта на CSS
class="tooltip” будет отвечать за внешний вид подложки меток. Работаем с оформлением класса tooltip
/*--tooltip for page--*/
a.tooltip span {
position: relative;
width: 130px;
display: none;
background: #ddd;
border: 1px solid #818181;
padding: 2px 2px;
line-height: normal;
text-align: center;
color: #000;
transition: all 1s ease-in-out;
opacity:0;filter:alpha(opacity=0)
}

Изображение-карта на CSS
class="tooltip” будет отвечать за внешний вид подложки меток. Работаем с оформлением класса tooltip:hover
a.tooltip:hover span {
position: relative;
display: block;
KHTMLOpacity: 0.90; /* прозрачность*/
MozOpacity: 0.90;
opacity: 0.90;
-webkit-border-radius: 5px; /* скругленные углы */
-moz-border-radius: 5px;
border-radius: 5px;
z-index: 100;
transition: all 1s ease-in-out;
opacity:1;filter:alpha(opacity=100);
}

Изображение-карта на CSS
Работаем с оформлением блока mapcss
/*--map navigation for page--*/
#mapcss {
width:1024px;
height:768px;
position: absolute;
}

Изображение-карта на CSS
Работаем с оформлением блока fon1 в блоке mapcss
#mapcss div.fon1 {
display:block;
background: url(karta.png) 0 0 no-repeat;
width:1024px;
height:768px;
position: relative;
}

Изображение-карта на CSS
Работаем с оформлением активных областей карты
#mapcss div.map1 a {
display: block;
width: 113px; /*размер активной области*/
height: 113px; /*размер активной области*/
left: 191px; /*координаты точки относительно картинки*/
top: 509px; /*координаты точки относительно картинки*/
position: absolute;
}

Изображение-карта на CSS
Работаем с оформлением активных областей карты
#mapcss div.map2 a {
display: block;
width: 113px; /*размер активной области*/
height: 113px; /*размер активной области*/
left: 325px; /*координаты точки относительно картинки*/
top: 148px; /*координаты точки относительно картинки*/
position: absolute;
}

Изображение-карта на CSS
Работаем с оформлением активных областей карты
#mapcss div.map3 a {
display: block;
width: 113px; /*размер активной области*/
height: 113px; /*размер активной области*/
left: 86px; /*координаты точки относительно картинки*/
top: 240px; /*координаты точки относительно картинки*/
position: absolute;
}

Изображение-карта на CSS
Чтобы добавить еще одну область, добавляем блок с id map4 в html файл