Syntax question for mouseenter/mouseleave in combination with imagemap hotspots

[jaybird16]

I'm relatively new to javascript and need a little help with the syntax. I'm trying to develop an interactive world map to display dealer contact information for all the different regions of the world utilizing the mootools framework to control the mouseenter and mouseleave behavior, and then also to control the display of data with a using the horizontal Fx.slide when clicked.

The basic idea is to use a background image for the world map, and then to stack transparent png-24 images over the top to make the region highlights. On top of that is a blank transparent image to make hotspots available. I haven't gotten to the fx.slide part yet.

My problem is that I don't have the syntax right, so I haven't been able to get everything to work. It's several different functions that all have to be linked in the right way. If anyone can help me out, I'm sure the fix is really simple, I just don't have gobs of time right now to sit here until I figure it out by myself. Many thanks.

Here's the code:


javascript:

window.addEvent('domready', function(){
var south = $('south'),
southmap = $('southmap'),
southwest = $('southwest'),
southwestmap = $('southwestmap')
;
// Setting the initial opacity of south
south.set('opacity', 0.000001);
southmap.mouseenter(function(){
// This morphes the opacity
south.morph({'opacity': 1});
});
southmap.mouseleave(function(){
// This morphes the opacity
south.morph({'opacity': 0.000001});
});
// Setting the initial opacity of southwest
southwest.set('opacity', 0.000001);
southwestmap.mouseenter(function(){
// This morphes the opacity
southwest.morph({'opacity': 1});
});
southwestmap.mouseleave(function(){
// This morphes the opacity
southwest.morph({'opacity': 0.000001});
});
});



css:

div#bkgd {
position:absolute;
left:2px;
top:2px;
background: url(http://www.ribbonmics.com/images/dlrmap/dlrmapBkgd.png) no-repeat;
width: 825px;
height: 494px;
float: left;
z-index:0;
}
div#south {
position:absolute;
left:2px;
top:2px;
background: url(http://www.ribbonmics.com/images/dlrmap/dlrmapSouth.png) no-repeat;
width: 825px;
height: 494px;
float: left;
z-index:1;
}
div#southwest {
position:absolute;
left:2px;
top:2px;
background: url(http://www.ribbonmics.com/images/dlr...pSouthwest.png) no-repeat;
width: 825px;
height: 494px;
float: left;
z-index:1;
}
img#blank {
position:absolute;
left:0px;
top:0px;
width:825px;
height:494px;
float: left;
z-index:2;
}



html:

<div id="bkgd"></div>
<div id="south"></div>
<div id="southwest"></div>
<img id="blank" src="http://www.ribbonmics.com/images/dlrmap/blank.gif" usemap="#dlrmap" />

<map id="dlrmap" name="dlrmap">
<area shape="poly" id="southmap" coords="137,139,168,141,184,133,189,133,194,129,204,130,200,135,201,144,183,156,184,167,182,174,179, 174,178,171,177,165,178,162,175,159,173,160,169,158,163,159,161,162,151,160,141,165,140,172,136,171, 134,162,130,160,127,163,124,160,124,158,121,154,130,154," href="http://www.ribbonmics.com/South" />
<area shape="poly" id="southwestmap" coords="92,122,125,122,124,125,144,126,139,140,136,139,129,154,96,152,90,144,88,135," href="http://www.ribbonmics.com/Southwest" />
</map>

<div style="clear: both;">
<!-- space -->
</div>