Javascript-форум - OnMouseOver, OnMouseOut

Есть карта, сделанная через 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 прошу к столу.