im trying to create a rollover menu with javascript but havent used it much,
I have got something working but when i roll over the menu the whole thing changes to all the rollover states instead of just one button
here is the code in the header
<script type="text/javascript">
function mouseOver()
{
document.b1.src ="Images/home-over.png"
document.b2.src ="Images/shop-over.png"
document.b3.src ="Images/about-over.png"
document.b4.src ="Images/faq-over.png"
document.b5.src ="Images/contact-over.png"
}
function mouseOut()
{
document.b1.src ="Images/home.png"
document.b2.src ="Images/shop.png"
document.b3.src ="Images/about.png"
document.b4.src ="Images/faq.png"
document.b5.src ="Images/contact.png"
}
</script>
and here is the HTML
<ul>
<li><a href="index.html" target="_blank" onmouseover="mouseOver()" onmouseout="mouseOut()">
<img border="0" alt="Click here for homepage" src="Images/home.png" height="32" width="145" name="b1" /></a></li>
<li><a href="shop.html" target="_blank" onmouseover="mouseOver()" onmouseout="mouseOut()">
<img border="0" alt="Click here to go to the online shop" src="Images/shop-over.png" height="32" width="145" name="b2" /></a></li>
<li><a href="about.html" target="_blank" onmouseover="mouseOver()" onmouseout="mouseOut()">
<img border="0" alt="Click here to learn more about hookah" src="Images/about-over.png" height="32" width="145" name="b3" /></a></li>
<li><a href="faq.html" target="_blank" onmouseover="mouseOver()" onmouseout="mouseOut()">
<img border="0" alt="Click here to read the frequently asked questions" src="Images/faq-over.png" height="32" width="145" name="b4" /></a></li>
<li><a href="contact.html" target="_blank" onmouseover="mouseOver()" onmouseout="mouseOut()">
<img border="0" alt="Click here to contact the Hookah Online store" src="Images/contact-over.png" height="32" width="145" name="b5" /></a></li>
</ul>
any ideas where I am going wrong? Im in a rush to get an assignment in for tomorrow.
Any help much appreciated!!
