background image swap of element other than that being rolled over, javascript

So, this javascript is kicking my rear.

What I'm trying to do is create sort of an animated graphical navigation.

I'm wanting to have a DIV with a background image. Within that DIV there are images that are absolutely positioned. They have anchors around them and rollover effects. ALSO, I want, when those images are rolled over, the background of the containing DIV to change.

I can't seem to make the background image of the div change unless I add rollover code to the div, no luck with other elements on the page.

I just don't know enough about javascript. I've tried several variations (putting the rollover on the image itself, on the anchor, on elements outside of the containing div..).

Here is the code WITHOUT trying to change the div's background image. If you have any suggestions on how to add that effect, please let me know.

Code:

<div id="graphnav">

<a href="index.html">
<img alt="home" id="home" src="homef.gif" onmouseover="src='home.gif'" onmouseout="src='homef.gif'"/>
</a>

<a href="roster.html">
<img alt="roster" id="roster" src="rosterf.gif" onmouseover="src='roster.gif'" onmouseout="src='rosterf.gif'" />
</a>

<a href="standings.html">
<img alt="standings" id="standings" src="standingsf.gif" onmouseover="src='standings.gif'" onmouseout="src='standingsf.gif'" />
</a>

<a href="tickets.html">
<img alt="tickets" id="tickets" src="ticketsf.gif" onmouseover="src='tickets.gif'" onmouseout="src='ticketsf.gif'" />
</a>

<a href="sponsors.html">
<img alt="sponsors" id="sponsors" src="sponsorsf.gif" onmouseover="src='sponsors.gif'" onmouseout="src='sponsorsf.gif'" />
</a>

</div><!-- graphnav -->

The CSS is in an external style sheet if it matters, and I'm writing the html in XHTML Transitional 1.0 if it matters.

 

How are you setting the background image of the containing div (graphnav)? Is it in your css file? If so please post that.

 

Yes, it's being set by the css.

Code:

body {
	margin: 0px;
}

a img {
	border-width: 0px;
}

#graphnav {
	width: 600px;
	height: 300px;
	margin: 150px 0px 0px 150px;
	background-image: url('readybg.gif')
}

#home {
	position: absolute;
	margin-left: 225px;
	margin-top: 250px;
}

#roster {
	position: absolute; 
	margin-left: 50px; 
	margin-top: 175px;
}

#standings {
	position: absolute;
	margin-left: 75px;
	margin-top: 50px;
}

#tickets {
	position: absolute;
	margin-left: 350px;
	margin-top: 50px;
}

#sponsors {
	position: absolute;
	margin-left: 375px;
	margin-top: 175px;
}

 

I've tried a variety of methods, but none of them have worked so far.

For example, I've added onmouseover="document.graphnav.style.backgroundImage='url(roster.gif)'" to both the anchors and images, but that didn't work.

Moreover, if I add the same line to the graphnav tag itself it wont work, although it will work within the graphnav tag itself if I put onmouseover="style.backgroundImage='url(roster.gif)'"

I'd guess that I'm not identifying the element to be changed correctly, but I can't see how when I've used that method to identify other elements.

As you can probably tell, I've had very little experience using javascript. I've only done rollovers that change the element being rolled over, and preloading for those rollover effects...

 

Instead of:

onmouseover="document.graphnav.style.backgroundImage='url(roster.gif)'"

try

onmouseover="document.getElementById("graphnav").style.backgroundImage='url(roster.gif)'"

 

That works if I replace the double quotes around graphnav with single quotes. Thanks!

onmouseover="document.getElementById('graphnav').style.backgroundImage='url(rosterbg.gif)'"