Disjointed rollover

[ferdous]

Help!

My site has a map of New York City, next to a list of text-links to the various neighborhoods in the city: Chelsea, Greenwich Village, Midtown, Downtown, etc.

Right now, when you hover over the text links, the background and border for each div changes - which is good. I can do that with CSS and anhover etc.

However, I want another thing to happen when the cursor hovers over each text link: I want the image of the neighborhood to change color on the map.

So for example if your cursor hovers over the "Downtown" link, I want the section of the map that is Downtown to change colors into something brighter (and of course the text link's own border/background itself should also change colors as usual too.)

In other words, I guess, when the cursor hovers the text link, the original map image is swapped for another map image in which the Downtown neighborhood is indicated by a different color.

I guess this is called a disjointed rollover but after reading about it on various sites on the web, I can't find a simple straightforward script. I code by hand and not Dreamweaver.

I think this can be done in pure CSS but not easily so I am just asking for Javascript for now.

Can anyone point me the right direction?

This is my existing CSS to change the background/border/color of the text links:


#list-menu a {
display: block;
width: 160px;
padding: 2px 2px 2px 3px;
border: 1px solid gray;
background: #96A377;
text-decoration: none;
text-align: left;}

#list-menu a:link, #list-menu a:active, #list-menu
a:visited {
color: #404040;
}

#list-menu a:hover {
border: 1px solid #7CB159;
background: #55613B;
color:#FAF49A;
border-left: 10px solid #9AC683;
}


and this is the html:


<div id="list-menu">
<ul>
<li><a href="#">Lower East Side</a></li>
<li><a href="#">Greenwich Village</a></li>
<li><a href="#">Midtown</a></li>
<li><a href="#">Murray Hill</a></li>
<li><a href="#">Chelsea</a></li>
<li><a href="#">Upper East Side</a></li>
</ul>
</div>

Thanks!

[7stud]

Try:

window.onload=
{
     var mapImage = document.getElementById("mapImageID");

     var midtownLink = document.getElementById("midtownLinkID");
     midtownLink.onmouseover = function()
     {
          mapImage.src = "midtownHighlighted.jpg"
     }
}