question about onmouseout effect using css

my question is if i move the mouse over an image which is a link to get any effect i can use
a:hover{

}

lets say for example i have a horizontal row which contains images and these are links, ex= home aboutus ... total of 5 links
just above this horizontal row lets say i have the same set of 5 images which by default are hidden using display: none;
<img src="homehidden.jpg" id="home"> <img src="abouthidden.jpg" id="about"> ...

#home{
display: none;
}

#about{
display: none;
}
...


only when i mouse over any of the links which are visible by default, i would like to show 1 image relavant to the link ex=home which is above all the 5 visible images so should my css code be

visiblerowhomeimage:hover{
#home.visibility: visible;
}
which would show the invisible image on mouse over for home, aboutus etc...


please advice if my code is correct.

thanks.

I usually use Javascript to do this. If you want you can try my code:

in your head tags:

<script type="text/javascript">
function mouseOver()
{
document.b1.src ="(file name)";
}
function mouseOut()
{
document.b1.src ="(file name)";
}
</script>

body:

<a href="(link)"><img border="0" src="(file name)" name="b1" onmouseOver="mouseOver()" onmouseOut="mouseOut()" /></a>

This shows the various ways using colours;
http://www.modtalk.co.uk/_site/code/...on-mouse-over/

IF you are image swapping, the className change is the best to use, as it is quickest and there will be no delay in loading the image initially.

This shows the various ways using colours;
http://www.modtalk.co.uk/_site/code/...on-mouse-over/

IF you are image swapping, the className change is the best to use, as it is quickest and there will be no delay in loading the image initially.