Есть карта, сделанная через Area shape=poly
Когда наводим на определенную область, то над этой областью появляется картинка этой самой области только закрашенная в красный цвет. Когда убираем курсор с области, то она соотвественно исчезает.
|
Код:
|
<map id="regions_map" name="regions_map">
<area shape="POLY" coords="210,130,241..."
onmouseover="switchMap(this, 'visible')"
onmouseout="switchMap(this, 'hidden')"
image_id="1" href="#blabla">
</map>
<div class="map_1" id="div_map">
<img name="map_img" id="1"
style="LEFT: 209px; TOP: 90px" height="78" width="94" src=".../blabla.jpg">
//Та самая картинка которая появится при наведении курсора на область,
и таких картинок еще 20 штук с одинаковым именем
<img name="map_img" width="511" height="348"
usemap="#regions_map" style="LEFT: 5px; visibility: visible; TOP: 5px" src=".../pixel.gif">
//прозрачная картинка занимающая всю площадь карты
</div>
<script>
function switchMap(obj, value) {
document.getElementsByName("map_img")[obj.getAttribute("image_id") - 1].style.visibility = value;
}
</script> //скрипт реализующий функцию появления и исчезания области над курсором.
|
Проблема заключается в том что когда я перевожу курсор от области к области то переход происходит резкий, а надо реализовать это эффектом типа FadeIn FadeOut, но у меня никак не получается получить идентификатор картинки над которой я нахожусь из-за чего єтот Fade не работает.
Т.е. я пытаюсь писать что-то вроде:
|
Код:
|
$('img#1').fadeIn(100); |
но ничерта естественно не выходит. Ошибка я так понимаю в самом получении ID той картинки над которой нахожусь.
+ Проблема еще в том что картинка сама по себе сначала visibility=hidden (в любом случае), а надо что-бы при OnMouseOver она потихоньку появлялась, потом исчезала.
Кто знает как правильно поставить тут запрос на jQuery прошу к столу.