выделить определенные части изображения

Gigabajt
На сайте с 04.10.2010
Offline
122
1449

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

я ппробывал сделать при помощи карт изображений:

<map name="worm">
<area shape="poly" coords="1,1,50,50,10,1,10,20" href="test.ru">
</map>
<img src="/map.jpg" usemap="#worm" id="1">

все как бы хорошо, здание выделил, курсор при наведении меняется, но если я прикручу всплывающую подсказку (id="1") к изображению, то по всей ее поверхности карты будет всплывать яваскрипт-подсказка, а нужно только при наведении на определенную область.

Кто поможет с решением?

Лидогенерация в соц.сетях и контексте от 400 руб. за лид. Работаю с Telegram, Instagram, VK. Заказать услугу: https://impossible-studio.com
K
На сайте с 28.12.2008
Offline
61
kud
#1

Попробуйте сделать div с бекграундом - картинкой. В котором с помощью абсолютного позиционирования разместите пустые div с нужными размерами. И к ним прикручивайте js.

rame0
На сайте с 17.03.2011
Offline
41
#2

прикрутите подсказки не к картинке, а к <area>

Или вообще, вызывайте подсказку по событию скажем вот так:


<script type="text/javascript">
//<!--
$("area").hover(function(){
var id=$(this).attr('id'),
/*вывод подсказки по имеющемуся ID и какой нибудь еще код, если надо*/
}, function(){
/*если надо что то сделать после
снятия курсора с объекта, делаем это тут*/
}
);
//-->
</script>
Gigabajt
На сайте с 04.10.2010
Offline
122
#3

приписал подсказку к area, как посоветовал rame0, получилось, спасибо! :)

rame0
На сайте с 17.03.2011
Offline
41
#4
Gigabajt:
приписал подсказку к area, как посоветовал rame0, получилось, спасибо! :)

Всегда пожалуйста :)

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий