Всем привет, прошу помощи.
Вот что есть.
Есть изображение размером 175*251
.
Необходимо, чтобы при наведении на определенную область изображения, эта область изменяла цвет. Для этого под каждую область сделана своя картинка.
На картинку наложен параметр "map", чтобы сделать каждый отдельный объект ссылкой
Вот как примерно должно выглядеть:
-
А вот такой вариант реализации интерактивной карты вам не подходит: htmlbook.ru/blog/postroenie-interaktivnoi-karty-s-raphael ? (внизу страницы демо)– Cypher5 сен 2012 в 10:54
-
это сложно.. .. сделал с использованием скрипта пипа <area shape="rect" coords="61,3,141,105" onmouseover="goimg(2)" onmouseout="goimg(0)" href="#"> и т. д.– Дмитрий Глазков5 сен 2012 в 11:11
-
Только не могу понять как сделать массив для предзагрузки картинок в кеш браузера.. var imgs = Array() for (var t=0; t< 6; t++) //для 5 штук { imgs[t] = new Image(); imgs[t].src = 'картинка' imgs[t].src = 'картинка' imgs[t].src = 'картинка' imgs[t].src = 'картинка' imgs[t].src = 'картинка' imgs[t].src = 'картинка' } Так или нет?– Дмитрий Глазков5 сен 2012 в 11:25
2 ответа
Меняет цвет не сама область, а подменяется все фоновое изображение, на котором эта область с другим цветом.
Подмену можно делать так:
<area shape="circle" coords="215,275,10" href="/page.html" title="Московская" onmouseover="document.getElementById('map_bg').src='a.gif'" onmouseout="document.getElementById('map_bg').src='b.gif'">
где map_bg
- id
фонового изображения, а area
- одна и областей.
-
Да, точно, одна из областей другим цветом. Не могли бы дать ссылку на работающий пример? Не знаю как настроить css и прочее не очень пойму.. 5 сен 2012 в 7:00
-
Как сделать тоже самое для нескольких картинок (областей)? kottedzhi-v-finlyandii.ru/map/tesrt.html 5 сен 2012 в 7:14
-
вот здесь так реализовано, но тут не картинка заменяться, тут стоит фоновое изображение где все варианты изображений склеены в один спрайт. а изменяется только позиция фона, стилями.– AlekseyB5 сен 2012 в 11:10
Если не расписывать подробно, то я бы эту карту сначала разрезал по границам, потом спрайтом оформил до и в момент наведения картинки. Потом при помощи position: relative; собрал в единое целое и через a:hover либо span:hover (background-image) двигал бы нужное поле при наведении.
Рисунок спрайта приблизительно такой
Прошу прощения вырезал на скорую руку.