# Rollovers

**URL:** https://forum.kirupa.com/t/rollovers/228974
**Category:** Uncategorized
**Created:** [June 13, 2007, 1:09am UTC](https://forum.kirupa.com/t/rollovers/228974 "2007-06-13T01:09:06Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![suz](https://avatars.discourse-cdn.com/v4/letter/s/3d9bf3/32.png) [@suz](https://forum.kirupa.com/u/suz)
#### Post date: [June 13, 2007, 1:09am UTC](https://forum.kirupa.com/t/rollovers/228974/1 "2007-06-13T01:09:06Z")

</div>

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

```auto
<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

```auto
<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!!