0

Всем привет, прошу помощи. Вот что есть. Есть изображение размером 175*251. Необходимо, чтобы при наведении на определенную область изображения, эта область изменяла цвет. Для этого под каждую область сделана своя картинка. На картинку наложен параметр "map", чтобы сделать каждый отдельный объект ссылкой Вот как примерно должно выглядеть:

alt text

3

2 ответа 2

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 - одна и областей.

3
  • Да, точно, одна из областей другим цветом. Не могли бы дать ссылку на работающий пример? Не знаю как настроить css и прочее не очень пойму.. 5 сен 2012 в 7:00
  • Как сделать тоже самое для нескольких картинок (областей)? kottedzhi-v-finlyandii.ru/map/tesrt.html 5 сен 2012 в 7:14
  • вот здесь так реализовано, но тут не картинка заменяться, тут стоит фоновое изображение где все варианты изображений склеены в один спрайт. а изменяется только позиция фона, стилями.
    – AlekseyB
    5 сен 2012 в 11:10
0

Если не расписывать подробно, то я бы эту карту сначала разрезал по границам, потом спрайтом оформил до и в момент наведения картинки. Потом при помощи position: relative; собрал в единое целое и через a:hover либо span:hover (background-image) двигал бы нужное поле при наведении. Рисунок спрайта приблизительно такой alt text

Прошу прощения вырезал на скорую руку.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.