Карты изображений на CSS

Пример карты изображений на CSS

В этом посте хочу показать, как создать карту изображений средствами только CSS, не прибегая к помощи устаревших тегов <map>, <area>, JavaScript или Flash. Подход давно испробованный и изученный у них, но почему-то совершенно не распространенный у нас.

Подготовка к работе

Для примера возьму карту одной никому неизвестной страны :) При наведении курсора мыши на одну из областей, должен измениться ее цвет и появиться краткое описание под картой.

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

Итак, для работы понадобится одно фоновое изображение, с несколькими рисунками, чтобы загружать всю карту сразу и избежать эффекта мигания фона при наведении мыши. Например, такое (в уменьшенном варианте):

Исходник для создания карты изображений на CSS

Реализация

Вся карта будет базироваться на нескольких CSS-принципах: абсолютная позиция элементов, замена фоновых изображений при наведении мыши и изменение видимости display.

Структуру карты изображений можно построить с помощью ненумерованного списка <ul> или списка определений <dl>. Для примера я выбрал первое.

Для начала создадим контейнер для карты и укажем его основные свойства:

XHTML:

<div id="map"></div>

CSS:

1
2
3
4
5
6
7
#map {
	border: 1px solid black;
	width: 401px;
	height: 328px;
	background: url(cities.gif) left bottom no-repeat;
	position: relative;
}

Сейчас у нас есть <div> нужной нам ширины и высоты, с фоновым изображением карты. Создадим структуру для карты (XHTML):

1
2
3
4
5
6
7
8
9
10
<div id="map">
	<ul>
		<li id="brest"><a href="#brest"><span>Бресткая область. Площадь 32 700 км<sup>2</sup>, население 1 471 000 чел.</span></a></li>
		<li id="vitebsk"><a href="#vitebsk"><span>Витебская область. Площадь 40 100 км<sup>2</sup>, население 1 369 100 чел.</span></a></li>
		<li id="gomel"><a href="#gomel"><span>Гомельская область. Площадь 40 400 км<sup>2</sup>, население 1 516 000 чел.</span></a></li>
		<li id="grodno"><a href="#grodno"><span>Гродненская область. Площадь 25 000 км<sup>2</sup>, население 1 173 900 чел.</span></a></li>
		<li id="minsk"><a href="#minsk"><span>Минская область. Площадь 40 200 км<sup>2</sup>, население 1 479 400 чел.</span></a></li>
		<li id="mogilev"><a href="#mogilev"><span>Могилевская область. Площадь 29 000 км<sup>2</sup>, население 1 208 600 чел.</span></a></li>
	</ul>
</div>

Лишние <span> в ссылках понадобятся позже для реализации подписей к изображениям.

Задаем стили для списка и прячем пока ненужные ссылки (CSS):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
ul li {
	position: absolute; /* чтобы элементы li не "мешали" в IE6 */
}
a:link, a:visited, a:hover {
	text-decoration: none;
}
a span {
	display: none;
	font: normal x-small/1.4em verdana, tahoma, sans-serif;
	width: 395px;
	color: #fff;
	background: #000;
	padding: 0 4px 2px 4px;
}

Теперь поясняю. У списка сбрасываем стандартные установки отступов (конечно лучше сбрасывать через reset.css или универсальный селектор *, но тут я так, для наглядности), «убираем» появляющиеся в IE6 над картой элементы списка <li> и прячем с помощью display:none ссылки. Еще обратите внимание на ширину <span>, она указана меньше ширины самой карты (<div id="map">), так как в ней теперь есть внутренние отступы padding.

Далее начнется самое долгое, но совсем не сложное занятие — нужно задать всем ссылкам абсолютную позицию над картой, используя CSS (покажу на одном примере):

1
2
3
4
5
6
7
#brest a {
	position: absolute;
	width: 176px;
	height: 133px;
	left: 7px;
	top: 185px;
}

Здесь ширина и высота для ссылки равны размерам фонового изображения для этой ссылки. Так как для <div id="map"> задано позиционирование relative, то все элементы списка будут оставаться в этом контейнере. Позиции left и top рассчитаны так, чтобы цветная версия изображения совпадала с серой фоновой.

Дальше все просто, при наведении курсора подставляем фоновое изображение и делаем ссылку видимой через CSS:

1
2
3
4
#brest a:hover {
	background: url(cities.gif) -137px 0 no-repeat;
	display: block;
}

Теперь при наведении мыши на карте подсвечивается нужная облать. Осталось только вывести описание для каждой ссылки. Опять же, в этом нам поможет абсолютное позиционирование и отрицательные margin, чтобы вывести описание за пределы родительского контейнера (в моем случае — под блок с картой).

Пишем CSS для всех <span>:

1
2
3
4
5
6
a:hover span {
	position: absolute;
	left: 0;
	top: 0;
	display: block;
}

И затем настраиваем отдельные ссылки:

1
2
3
4
#brest a:hover span {
	margin-top: 144px;
	margin-left: -8px;
}

Все настройки нужно повторить для остальных пяти ссылок, высчитывая отдельно для каждой абсолютное позиционирование над картой и расположение фонового рисунка в background. На самом деле это не так долго, как кажется, у меня на это ушло всего полчаса. Высчитавать положение проще всего на скриншоте в Photoshop, с помощью линеек (Ctrl+R) и направляющих (Ctrl+H), а потом уже корректировать погрешность на пару пикселей «вживую».

Рабочий код

Дальше приведу код моего примера полностью (XHTML):

1
2
3
4
5
6
7
8
9
10
<div id="map">
	<ul>
		<li id="brest"><a href="#brest"><span>Бресткая область. Площадь 32 700 км<sup>2</sup>, население 1 471 000 чел.</span></a></li>
		<li id="vitebsk"><a href="#vitebsk"><span>Витебская область. Площадь 40 100 км<sup>2</sup>, население 1 369 100 чел.</span></a></li>
		<li id="gomel"><a href="#gomel"><span>Гомельская область. Площадь 40 400 км<sup>2</sup>, население 1 516 000 чел.</span></a></li>
		<li id="grodno"><a href="#grodno"><span>Гродненская область. Площадь 25 000 км<sup>2</sup>, население 1 173 900 чел.</span></a></li>
		<li id="minsk"><a href="#minsk"><span>Минская область. Площадь 40 200 км<sup>2</sup>, население 1 479 400 чел.</span></a></li>
		<li id="mogilev"><a href="#mogilev"><span>Могилевская область. Площадь 29 000 км<sup>2</sup>, население 1 208 600 чел.</span></a></li>
	</ul>
</div>

CSS:

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
#map {
	border: 1px solid black;
	width: 401px;
	height: 328px;
	background: url(cities.gif) left bottom no-repeat;
	position: relative;
}
ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
ul li {
	position: absolute; /* чтобы элементы li не "мешали" в IE6 */
}
a:link, a:visited, a:hover {
	text-decoration: none;
}
a span {
	display: none;
	font: normal x-small/1.4em verdana, tahoma, sans-serif;
	width: 395px;
	color: #fff;
	background: #000;
	padding: 0 4px 2px 4px;
}
a:hover span {
	position: absolute;
	left: 0;
	top: 0;
	display: block;
}
#brest a {
	position: absolute;
	width: 176px;
	height: 133px;
	left: 7px;
	top: 185px;
}
#brest a:hover {
	background: url(cities.gif) -137px 0 no-repeat;
	display: block;
}
#brest a:hover span {
	margin-top: 144px;
	margin-left: -8px;
}
#vitebsk a {
	position: absolute;
	width: 205px;
	height: 129px;
	left: 129px;
	top: 0;
}
#vitebsk a:hover {
	background: url(cities.gif) -542px 0 no-repeat;
	display: block;
}
#vitebsk a:hover span {
	margin-top: 329px;
	margin-left: -130px;
}
#gomel a {
	position: absolute;
	width: 201px;
	height: 145px;
	left: 170px;
	top: 183px;
}
#gomel a:hover {
	background: url(cities.gif) -330px 0 no-repeat;
	display: block;
}
#gomel a:hover span {
	margin-top: 146px;
	margin-left: -171px;
}
#grodno a {
	position: absolute;
	width: 119px;
	height: 156px;
	left: 24px;
	top: 82px;
}
#grodno a:hover {
	background: url(cities.gif) 0 0 no-repeat;
	display: block;
}
#grodno a:hover span {
	margin-top: 247px;
	margin-left: -25px;
}
#minsk a {
	position: absolute;
	width: 156px;
	height: 185px;
	left: 116px;
	top: 84px;
}
#minsk a:hover {
	background: url(cities.gif) -987px 0 no-repeat;
	display: block;
}
#minsk a:hover span {
	margin-top: 245px;
	margin-left: -117px;
}
#mogilev a {
	position: absolute;
	width: 204px;
	height: 129px;
	left: 197px;
	top: 110px;
}
#mogilev a:hover {
	background: url(cities.gif) -762px 0 no-repeat;
	display: block;
}
#mogilev a:hover span {
	margin-top: 219px;
	margin-left: -198px;
}

Напомню, что рабочий пример можно посмотреть здесь. Еще его можно скачать в архиве, чтобы самостоятельно во всем разобраться.

Если кто-то что-то не понял по реализации, прошу в комменты. Критики тоже туда :)

Плюсы и минусы

Чего тут больше на самом деле решать вам. Я перечислю некоторые спорные и достойные моменты на мой взгляд.

  • при отключенных стилях пользователь увидит просто список со ссылками;
  • при отключенной графике — те же ссылки, но придется постараться их поискать :) (на самом деле минус);
  • плюс, что можно обойтись лишь CSS, без помощи JavaScript;
  • минус: нельзя писать сложные вещи из-за того, что IE6 поддерживает :hover только для ссылок, реализация же этой поддержки с помощью JavaScript может ввергнуть разработчика в такую пучину ошибок и несоответствий в браузерах, что придется дополнительно писать кучу хаков.

Где применять

Такое решение отлично подойдет для реализации карты проезда, чтобы сделать ее более динамической и user frendly, со множеством подсказок и пояснений. Также для компаний, имеющих филиалы в разных странах (почему бы и не прикрутить карту мира) или регионах, и желающих сэкономить средства на создании флэш-роликов.

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

Как вариант можно использовать с юмором на коллективных фотках, чтобы показать высказывания или мысли отдельных людей, как в комиксах.

Примеры создания различных потрясающих карт изображений с помощью CSS можно посмотреть на cssplay.co.uk.

Креативьте!

* * *

Сканер блогов:

На chernev.ru наткнулся на интересный линк онлайн-генератора фоновых паттернов. dimox.name поделился новостями о полезной программе, которая одним кликом добавляет статьи в 20+ сервисов социальных закладок. Вещь однозначно полезная.

* * *

Понравилась статья?

Тогда помогите мне сделать её доступной для других, или будьте в курсе последних событий:

* * *

Статьи по теме:

Комментариев: 65

  1. Николай, 08.07.2008 в 20:10

    Однозначно в избранные «сочинения» :)

    Ответить

  2. минский дизайнер, 10.07.2008 в 21:36

    Сердце кольнуло — «Стью»... и точно он. Но какой отличный пример!

    Всем бы верстальщикам твою аккуратность (это я про сайт в целом), стало бы не стыдно говорить «байнет».

    Ответить

  3. rotor, 10.07.2008 в 21:45

    Спасибо, я старался :)

    А пример такой, потому что я из Гродно.

    Ответить

  4. Octane, 11.07.2008 в 12:32

    ыыы) недавно таким способом делал подсветку районов города в проекте vlg-nav.ru. Правда из-за использования png-24 убрал эффект в IE6. Был удивлен сегодня, увидев подробное описание этого способа :-)

    Ответить

  5. Вячеслав, 16.07.2008 в 11:50

    Отличный способ, спасибо!

    Увы, есть и еще один очевидный минус — области ссылок по прежнему прямоугольные в отличие от того же .

    Ответить

  6. Гена, 18.07.2008 в 13:12

    Спасибо большое. Как раз то что я искал.

    Ответить

  7. Zigzag, 14.08.2008 в 12:28

    Спасибо за статью. Достаточно интересное решение.

    Ответить

  8. yAnTar, 19.09.2008 в 18:42

    Очень интересное решение. Но вижу здесь один минус — много областей, он влечет за собой все остальные минусы:

    1) надо в фотошопе долго все области разделять;

    2) в цсс все отступы считать;

    3) файл цсс раздуется сильно.

    Ответить

  9. пчела, 21.09.2008 в 19:55

    отличная статья. Очень интересные методы. Теперь совершенно по другому смотрю на css)

    Ответить

  10. Саня, 11.10.2008 в 23:46

    Подскажите, как сделать подсказку не внизу всей карты, а рядом с указанным мышкой объектом.

    Спасибо

    Ответить

  11. rotor, 12.10.2008 в 0:22

    Подсказка выводится с помощью тега span с абсолютной позицией, который находится внутри ссылки. Например:

    #grodno a:hover span {
    	margin-top: 247px;
    	margin-left: -25px;
    }

    чтобы выводить рядом с указанным объектом сначала обнулите оба margin, тогда span будет выровнен по левому верхнему углу нужного объекта, а затем задайте нужные значения для отступов.

    Ширину и высоту для всех подсказок сразу, можно задать в блоке

    a span {...}

    Ответить

  12. Саня, 12.10.2008 в 13:23

    Rotor, спасибо за ответ:

    #brest a {
    	position: absolute;
    	width: 0;
    	height: 0;
    	left: 7px;
    	top: 185px;
    }
    #brest a:hover {
    	background: url(cities.gif) -137px 0 no-repeat;
    	display: block;
    }
    #brest a:hover span {
    	margin-top: 144px;
    	margin-left: -8px;
    }

    Посмотри, так я исправила или нет?

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

    Спасибисссимо!

    Ответить

  13. Саня, 12.10.2008 в 14:53

    Спасибо за быстрый ответ! )))

    Буду пробовать.

    Ответить

  14. rotor, 12.10.2008 в 14:11

    Совершенно не так.

    Перечитайте внимательнее статью и мой комментарий выше. Нужно было обнулить отступы margin-top и margin-left, а не ширину и высоту ссылки.

    Координаты объекта (нужной вам ссылки) задаются в блоке:

    #brest a {
    	position: absolute;
    	width: 176px;
    	height: 133px;
    	left: 7px;
    	top: 185px;
    }

    с помощью left и top. Для каждой ссылки придется настраивать отдельно.

    Скачайте исходник и поэкспериментируйте с ним, тогда вам не составит труда сделать что-то подобное для себя.

    Ответить

  15. Саня, 12.10.2008 в 15:23

    Rotor, еще можно спросить?

    Мой вариант наверное проще, т.к. у меня имеется только фоновая картинка с изображениями объектов и я буду к их координатам задавать подсказки... и поэтому не поняла, где прописать адрес картинки-карты? (((

    Ответить

  16. Саня, 12.10.2008 в 18:52

    ой, или надо через a href="//////"?

    Ответить

  17. rotor, 12.10.2008 в 18:10

    Картинку можно вставить в div:

    #map {
    	border: 1px solid black;
    	width: 401px;
    	height: 328px;
    	background: url(ваша_картинка.gif) left bottom no-repeat;
    	position: relative;
    }

    Ответить

  18. Саня, 12.10.2008 в 19:13

    Дело в том, что сами подсказки я вижу, а картинку карты — нет, и в подсказках только квадратики вместо слов... (((

    Ответить

  19. Саня, 12.10.2008 в 18:50

    Ахха, тогда для моего варианта (когда нет меняющихся по цвету объектов) в них прописывать не надо?

    Вот тут:

    #minsk a {
    	position: absolute;
    	width: 156px;
    	height: 185px;
    	show: hidden;
    	left: 116px;
    	top: 84px;
    }
    #minsk a:hover {
    	background: url(cities.gif) -987px 0 no-repeat;
    	display: block;
    }
    #minsk a:hover span {
    	margin-top: 245px;
    	margin-left: -117px;
    }

    Я правильно пишу для: url= или надо по-другому?

    Ответить

  20. rotor, 13.10.2008 в 10:32

    Саня

    Для начала почитайте какой-нибудь справочник по CSS (например тут).

    А квадратики потому, что не объявлена кодировка в документе:

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    И сам документ тоже должен быть сохранён в этой же кодировке (смотрите в опциях своего редактора).

    Ответить

  21. Саня, 13.10.2008 в 16:55

    Я понимаю, что моя задача гораздо проще, чем ваш пример, но для новичков и это сложно (сайт Мержевича я читала, но про всплывающие подсказки там почти нет, только alt и title). У меня к вам предложение: может попробовать выложить вариант не такой сложный, как в вашем примере (хотя бы чтоб могли сделать начинающие, особенно «чайницы»)))).

    Например: есть фоновая картинка с изображениями зданий и объектов, надо подводя к ним мышкой вызвать подсказку в виде красного прямоугольника (или уже сложнее??? готовую картинку овальную с надписью).

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

    Спасибо.

    Ответить

  22. rotor, 13.10.2008 в 22:58

    Стучитесь в аську, помогу в вашей проблеме.

    Ответить

  23. Саня, 14.10.2008 в 22:04

    Аххха... )))

    соопчаю, что вариант с подсказкой в виде цветного прямоугольника и текста к объектам на моей карте удачно сверстался (самое сложное оказалось правильно прописать url картинки — надо в скобках и одинарных кавычах, этого же не указано)

    Терь буду пробовать ставить подсказку в виде заготовленной картинки с надписью... а куда-чего вписать еще не догоняю.

    *номер вашей аси можно мне на майл?

    Ответить

  24. rotor, 15.10.2008 в 12:48

    Номер icq есть в контактах.

    Ответить

  25. Саня, 04.11.2008 в 12:37

    Доброе время суток!

    Я продолжаю модернизировать свой сайтик... с помощью вашей статьи у меня получилось создать всплывающие подсказки в нужном месте и в виде любой картинки... но! В FF (в IE этого нет) у меня все вплывающие картинки выходят в рамке, а она нигде не задана (особенно это не хорошо выглядит для gif стрелок).

    Если у вас есть решение для этой проблемы, то буду очень вам благодарна!

    Ответить

  26. rotor, 04.11.2008 в 20:31

    Саня, давайте решать личные вопросы в ICQ или почте. Я об этом написал выше.

    Ответить

  27. milax, 11.11.2008 в 12:06

    Хороший способ. Только, жаль что подсвечиваемые блоки могут быть только прямоугольными и при построении карты с непрямоугольными объектами отчетливо заметны «бока».

    Ответить

  28. skif, 23.12.2008 в 12:18

    Проблема в том что из-за квадратных блоков, могут не работать маленькие участки на более детальных картах.

    надо сделать также, но подсветы (появление картинок) сделать при наведения на точные области .

    Ответить

  29. Lex Nevermind, 26.04.2009 в 19:19

    Жаль, что ссылки до сих пор квадратные :(

    Ответить

  30. sunlord, 26.04.2009 в 23:15

    Даёшь не квадратные ссылки! =)

    Ответить

  31. Lex Nevermind, 27.04.2009 в 16:38

    Думаю, мой коммент понятен веб-мастерам.

    Имеется в виду: область ссылки — прямоугольный блок. Из-за этого карта получается немного некорректной.

    Ответить

  32. rotor, 30.04.2009 в 10:15

    Всех огорчу, но «неквадратных» ссылок на карте не будет. Пока что, в CSS нет средств для их реализации.

    Ответить

  33. Саня, 04.01.2010 в 17:15

    Евгений, вы могли бы предложить туториал по применению «всплывающих» изображений на HTML-странице?

    Т.к. то, что я нашла не кроссбраузерно и не позиционирует в точности, как необходимо, а «раскидывает».

    Желательно не оччч громоздкое решение. )))

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

    Сенькую!

    Ответить

    • rotor, 04.01.2010 в 17:35

      Ну хоть маленький пример покажите. Как они должны «всплывать»?

      Ответить

  34. Саня, 04.01.2010 в 19:12

    Аххха, показываю страничку - www.sun-place.com/html-h14.htm

    «Всплывает» хорошо и рядом только второе изображение, остальные убрала, т.е.:

    — в остальных браузерах (например, в Опере — уносит все вверх странички, а рядом не показывает)

    — нет одинакового позиционирования, т.е. все одинаково не отступают от превью на одинаково заданное количество px

    Если предложишь работающий вариант, то буду безмерно благодарна...

    Т.к. все, что было найдено, имело множество минусов

    Ответить

    • rotor, 04.01.2010 в 23:08

      Без проблем, но лучше по скайпу/аське.

      Ответить

  35. Саня, 04.01.2010 в 23:21

    Хммм... а если написать об этом Туториал, я понимаю, что это не в рамках данной темы... ;)

    *буду ждать

    **в асе задам вопросы по ходу реализации...

    Ответить

  36. @ Юля, 01.06.2010 в 19:07

    Как-то косячно отправилось. Еще раз:

    Здравствуйте, посмотрела карту изображений на СSS. Хорошая вещь. Но! У вас на DIVах верстка, а я на таблицах делаю, если содержимое между ul вставить например в строку таблицы, то не работает в IE6, там фон показывается вместе с фрагментами цветных рисунков. Можно как то это на таблицы перевести?

    Ответить

    • rotor, 01.06.2010 в 19:51

      Теоретически, наверное, можно. Главное правильно выбрать контейнеры для абсолютного позиционирования.

      Но я бы не стал смешивать список с таблицей. В вашем коде не будет логики.

      А в IE может не работать, потому, что стили нужно применять к ячейкам таблицы td, а не к строкам tr.

      Ответить

  37. @ Юля, 02.06.2010 в 9:22

    Знаете, я попробовала сделать и почти получилось, вместо div — table, ul — tr, li — td и все бы хорошо, в IE во всех версиях работает, в Опере, Гугле, еще 2-3 браузерах, но! В Mozilla Firefox не работает. То есть, если просто написать таблицу как я предложила, то и в Мозиле работает, но у меня идет структура в несколько таблиц, вложенных друг в друга и вдобавок они все вложены в один единственный div, чтобы heght 100% работал. И по какой-то причине только в Мозиле идет сдвиг цветных картинок влево. У вас случайно нет идей что с Мозилой делать, у меня уже просто сил нет биться с этим кодом.

    Ответить

  38. @ Юля, 02.06.2010 в 14:23

    Короче говоря, весь код в div (вместе с тегом div) вставила в столбец таблицы, все работает. Коряво, конечно, так делать — вроде, дивы в таблицу не вставляют, но не все ли равно — главное, что работает. Спасибо вам за карту!

    Ответить

  39. @ Юрий, 12.09.2010 в 16:21

    Rotor,

    большой респект за интересное решение в области картографии!!!

    Сделал подсветку районов области, вроде все получилось, но в IE 8 незадача — все подсвечиваемые области карты и спаны съехали вправо пикселей на 150. В чем именно незадача? В Mozilla и Opera все работает нормально.

    Ответить

    • rotor, 12.09.2010 в 17:15

      Без примера трудно что-то сказать. Проблема, скорее всего, в позиционировании span и контейнера.

      Ответить

  40. @ Юрий, 13.09.2010 в 13:17

    Пример выложил сюда

    www.vitservice.net\primer\index.html

    Help my!

    Ответить

  41. @ Юрий, 13.09.2010 в 13:25

    Извиняюсь — косячок с косыми вышел.

    www.vitservice.net/primer/index.html

    Ответить

  42. VICTOR_81, 30.10.2010 в 23:29

    В IE 6 выявлена след проблема.

    попробуйте поводить мышкой в одной области не выходя за ее пределы.) Начните с «Гомельской».

    У меня четкие границы не работают (возможно так и было задумано??) периодически моргает «Минская область» хотя на нее не навожу даже

    Ответить

    • rotor, 31.10.2010 в 13:47

      Скорее «так и было задумано», ведь все области находятся в прямоугольных боксах. Вы просто попадаете курсором в зону, в которой они пересекаются.

      Ответить

  43. @ Юрий, 31.10.2010 в 14:41

    Добрый день, rotor/

    Как быть с моим примером www.vitservice.net/primer/index.html.

    Почему на локальной машине в IE все идет нормально, а после загрузки файлов на сервер сдвиг областей остается???

    Ответить

  44. @ Alice, 27.11.2010 в 5:47

    Еще такой вопрос. Сделала менюшку по примеру этой карты (спасибо за доходчивое объяснение, без него бы ничего не вышло!) : michelberger.narod.ru . Проблема в том, что правое меню «статьи» в файрфоксе почему-то не покрывается и за ссылку вообще не воспринимается. В ИЕ6 все в порядке. Ума не приложу в чем здесь причина, уже и так и сяк пыталась код менять. Может быть, кто-то сможет помочь?

    Ответить

  45. @ Alice, 28.11.2010 в 0:00

    «Решила» проблему, если это можно так назвать тем, что создала в коде еще один скопированный код для блока Статей. Довольно глупое решение, которое я так и не поняла из-за чего работает.

    Старый, чистенький код сохранился на странице michelberger.narod.ru/index6.html , если будет время и желание — посмотрите, пожалуйста. Очень интересно, почему же он не работает, из-за чего возникает такая разность понимания между ИЕ и ФФ...

    Ответить

  46. @ Alice, 28.11.2010 в 23:59

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

    Поэтому хочу извиниться и сказать еще раз спасибо за такое красивое решение меню-карты, это именно то, что я давно искала и уже не ожидала найти. Спасибо большое.

    Ответить

  47. @ Руслан, 04.03.2012 в 17:15

    Спасибо, получилось!!! Очень нужно было! Очень помогло, благодарю. Есть вопрос, ели можно это изменить помогите пожалуйста, как сделать что-бы отступ для картинки отсчитывался не сверху, а снизу, поскольку у меня контент меняется и получается картинки уплывают, при изменениее количества контента на странице. карта расположена снизу контента.

    Ответить

    • rotor, 05.03.2012 в 17:17

      По идее, контент не должен никак влиять на элементы карты, так, как она находится в отдельном контейнере. Пересмотрите свою разметку.

      В текущем примере ничего не мешает вам попробовать отсчитывать координаты снизу:

      вместо top: XX px; пишите bottom: XX px;.

      Ответить

      • @ Руслан, 07.03.2012 в 15:51

        Спасибо, нашел причину в разметке.

        Ответить

  48. @ Крис, 04.09.2012 в 14:39

    Помогите! Не понимаю как назначать координаты (на вашем примере к- цветным картинкам).НЕ ПОЛУЧАЕТСЯ У МЕНЯ,вроде все понятно.а вот не выходит

    Ответить

  49. Dmitriy, 15.11.2012 в 2:20

    В целом классно... забыл уже о подобном применении.

    На самом деле это так сказать на «азах» сделано.

    Проще использовать JavaScript, но если ява скрипты не подходят, то да, это самый грамотный вариант.

    Ответить

  50. Grand Cheif, 23.12.2013 в 12:41

    супер пример !!!!! всем рекомендую, аффтар красава!

    Ответить

  51. Grand Cheif, 23.12.2013 в 12:43

    один момент, у меня при наведении окрашиваются изображения, идущие по порядку ссылок, если идти в обратную сторону, не отображаются(((

    Ответить

  52. Olga, 24.12.2013 в 17:28

    подскажите, пож-та, а это работает с адаптивной картинкой или надо как то по-другому координаты прописывать?

    Ответить

  53. @ Александр, 15.04.2014 в 19:34

    я писал немного по другому и проще и эффективней share-know.ru/johny/

    Ответить

  54. Сергей, 18.04.2014 в 12:13

    Интересное решение для карты, но для ровного края я бы посоветовал реализовать это с использованием map area иначе некоторые области не правильно отображаются.

    А для простоты генерации можно воспользоваться автоматическим генератором map area crazysquirrel.ru/#!image_to_map_area

    Ответить

  55. @ Александр, 18.04.2014 в 13:59

    так это и так map area, просто заливка в канвас

    Ответить

  56. Александр, 25.04.2015 в 18:11

    Благодарю! Самое толковое объяснение.

    Ответить

  57. @ newJS, 16.03.2016 в 6:38

    Я сразу глянул рабочий пример, и больше читать не стал.

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

    Пусть тупые амерекосы такими вещами пользуются.

    Админ это кто тебе сказал, что тег map устарел? судя по первым коментам статья написана в 2008 году.

    И судя по тем же коментам, не я один обратил внимание на кривизну этого метода.

    Вот вам нормальный генератор map карт, и делайте нормальные карты.

    программа русская, бесплатная и без установки

    newjs.my1.ru/load/generator_kart_html/1-1-0-4

    Ответить

Есть что сказать?