newbie fading problem

[sw9]

hey guys

 

i'm really new to javascript, but i'm trying to get an area map onmouseover to fade in a hover image essentially. i see a fade trying to occur, but nothing is happening to the image itself. You can see the page in action here: http://dev.mountgrace.org/interactive-map. If you roll over the map, one section of it is supposed to turn yellow and fade in a different div with that image.

 

here is my area map code:

<div id="small-map-container"><img id="map-image" usemap="#Map" src="/sites/all/themes/mtgrace/maps/MAP_small.jpg" border="0" alt="" width="540" height="390" /> <map id="Map" name="Map"> 
<area shape="poly" coords="15,4" href="#" /><area shape="poly" class="west" coords="15,5,256,17,262,57,271,58,271,63,280,64,280,68,289,68,291,85,289,107,274,110,265,120,268,139,258,142,261,165,209,163,207,201,158,194,157,187,85,196,77,174,85,155,83,138,73,134,73,141,62,146,30,136,38,80,49,76,15,27" href="/maps/western-map" /> 

<area shape="poly" class="east" coords="258,14,264,55,272,56,274,61,282,62,282,66,292,67,292,105,276,113,268,119,271,139,260,143,263,165,263,175,277,191,308,162,314,162,368,217,428,165,486,219,518,191,528,192,530,169,517,166,522,55,492,27" href="/maps/eastern-map" /> 

<area shape="poly" class="south" coords="212,165,209,203,200,202,200,231,190,232,205,341,200,344,198,362,208,385,217,382,214,363,236,362,238,376,261,367,298,362,313,367,352,319,363,323,479,225,472,219,478,213,428,167,368,219,314,164,307,164,278,195,262,177,260,166" href="/maps/southern-map" /> </map>

<div>
<img id="map-image" alt="" src="/sites/all/themes/mtgrace/maps/MAP_1_rollover.jpg" class="state" usemap="#map" />
</div>

</div>

 

then i've got some css hiding the correct element:

#small-map-container {
  position: absolute;
  top: 100px
  left: 100px
}

#small-map-container div {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}

 

and then my javascript (right now i'm just trying to get this to work on one region, then i'll have rollovers for different parts of the same image once i figure it out):

$(document).ready(function(){

        var fadeInSpeed = 100;
        var fadeOutSpeed = 0;
        //map west
        $('#small-map-container area.west').mouseover(function(){
             $('#map-image').stop().fadeTo(fadeInSpeed, .1, function(){
                $(this).attr('#small-map-container div #map-image');
             }).fadeTo(fadeOutSpeed, 1);
        }).mouseout(function(){
             $('#map-image').stop().fadeTo(fadeInSpeed, .1, function(){
                $(this).attr('#small-map-container');
             }).fadeTo(fadeOutSpeed, 1);
        });
        

});

 

i know i'm somehow not grabbing the right element in my javascript. can anyone help me out? thanks a lot in advance.