Changing Div background on hover

Hey guys, So I have a top navigation bar with links in it and when I hoover over a link I want the navigation bars background image to change. The links are actually Images with an <a href=""></a> tag around them. The site isn't live so I can't give you a link. Here is the code:

HTML ( I want the id="Nav" background to change when I hover over the "Home" "Forums" "Downloads" "Contact" Images )

<div id="Nav">
<div id="Splitters" class="clearfix">
<div id="group1">
<img id="Layer_3_copy" src="images/Layer_3_copy.png" alt="" width="2" height="65" />
</div>
<div id="group2">
<img id="Layer_3_copy_3" src="images/Layer_3_copy.png" alt="" width="2" height="65" />
</div>
<div id="group3">
<img id="Layer_3_copy_4" src="images/Layer_3_copy_3.png" alt="" width="2" height="67" />
</div>
</div>
<div id="Nav_Text" class="clearfix">
<a href="#">
<img id="Home" src="images/Home.png" alt="" width="48" height="11" />
</a>
<a href="#">
<img id="Forums" src="images/Forums.png" alt="" width="71" height="11" />
</a>
<a href="#">
<img id="Downloads" src="images/Downloads.png" alt="" width="109" height="11" />
</a>
<a href="#">
<img id="Contact" src="images/Contact.png" alt="" width="80" height="11" />
</a>
</div>
</div>


CSS

#Nav {
background: url(images/Main.png) no-repeat;
left: 0;
min-height: 70px;
position: absolute;
top: 0;
width: 100%;
}
#Splitters {
left: 421px;
position: absolute;
top: 0;
width: 334px;
}
#group1 {
display: inline;
float: left;
margin: 0 0 0 107px;
width: 2px;
}
#Layer_3_copy {
clear: both;
float: left;
margin: 0;
width: 2px;
}
#group2 {
float: left;
margin: 0 0 0 95px;
width: 2px;
}
#Layer_3_copy_3 {
clear: both;
float: left;
margin: 0;
width: 2px;
}
#group3 {
float: right;
margin: 0;
width: 2px;
}
#Layer_3_copy_4 {
clear: both;
float: left;
margin: 0;
width: 2px;
}
#Nav_Text {
left: 449px;
position: absolute;
top: 29px;
width: 397px;
}

a:hover{background-color:#FFF;
background:imageurl;
}

Can't do it with pure css it's not a parent div. However I figured it out anyway.


<script type="text/javascript">
function mouseover()
{
var e = document.getElementById('Nav');

e.style.background='url(images/Home_Hover.png)';

}
function mouseover2()
{
var e = document.getElementById('Nav');

e.style.background='url(images/Forum_Hover.png)';

}
function mouseover3()
{
var e = document.getElementById('Nav');

e.style.background='url(images/Downloads_Hover.png)';

}
function mouseover4()
{
var e = document.getElementById('Nav');

e.style.background='url(images/Contact_Hover.png)';

}
function mouseout()
{
var e = document.getElementById('Nav');

e.style.background='url(images/Main.png)';

}
</script>



<div id="Nav" style="background:url(images/Main.png) no-repeat;">
<div id="Splitters" class="clearfix">
<div id="group1">
<img id="Layer_3_copy" src="images/Layer_3_copy.png" alt="" width="2" height="65" />
</div>
<div id="group2">
<img id="Layer_3_copy_3" src="images/Layer_3_copy.png" alt="" width="2" height="65" />
</div>
<div id="group3">
<img id="Layer_3_copy_4" src="images/Layer_3_copy_3.png" alt="" width="2" height="67" />
</div>
</div>
<div id="Nav_Text" class="clearfix">
<a href="#"><img id="Home" src="images/Home.png" onMouseOver="mouseover()" onMouseOut="mouseout()" alt="" width="48" height="11" /></a>
<a href="#"><img id="Forums" src="images/Forums.png" onMouseOver="mouseover2()" onMouseOut="mouseout()" alt="" width="71" height="11" /></a>
<a href="#"><img id="Downloads" src="images/Downloads.png" onMouseOver="mouseover3()" onMouseOut="mouseout()" alt="" width="109" height="11" /></a>
<a href="#"><img id="Contact" src="images/Contact.png" onMouseOver="mouseover4()" onMouseOut="mouseout()" alt="" width="80" height="11" /></a>
</div>
</div>