rollovers

[suz]

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

[zerokilled]

this is happening because in the function mouseover, instead of changing one button, the function rollover every buttons. here, the whole block is executed:



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"
}


there is plenty of choice to perform a rollover, this is the one that i more like. is a function that require one argument (the image name), and the rollover is based on the source image:


function rollover(name){
if(!document.images[name])return false; // to avoid error if image doesn't exist in document;
var img = document.images[name];
var ptrn = /-over/;
if(!ptrn.test(img.src)) img.src = img.src.replace('.png', '-over.png');
else img.src = img.src.replace(ptrn, '');
}


<li><a href="index.html" target="_blank" onmouseover="rollover('b1');" onmouseout="rollover('b1');">
<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="rollover('b2');" onmouseout="rollover('b2');">
<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="rollover('b3');" onmouseout="rollover('b3');">
<img border="0" alt="Click here to learn more about hookah" src="Images/about-over.png" height="32" width="145" name="b3" /></a></li>
notice that there is only one function for both rollover state. i had not tested the script, but i'm almost sure it should work perfectly. to avoid error, consider at least two point. firstly, the path location of the image can't contain the pattern '-over' because the function roll whether is present the string '-over' or not. and second, notice that the function is customized to work based in the image filename, so you should have a pair image: normal state without the sufix '-over', and roll state with the sufix '-over'. i recall that there're plenty of choice, for example rollover with css, which (in my opinion) is much prefered than scripting rollover.

[tommythewolfboy]

If you are simply using the javascript the change the background image on mouseover, why don't you simply use CSS instead?
If the apply a background image to each link using css, then assign the rollover image to the link's hover state, then you don't need javascript at all. Better still, to avoid the need to preload the rollover image, use the following technique (http://iummug.indiana.edu/docs/oct05Challenge/paulSolution/solution2.html) (this is based upon alistapart's CSS sliding doors technique if you wanted more background).

e.g. (both the off on over images are combined into a single image - the off on the left hand side, the over on the right hand side. When a user hovers over the link the background image for the link is moved to the right - showing the hover image).

a.home {
display: block;
height: x;
width: x;
background: url('home.gif') no-repeat left;
}

a.home:hover {
background: url('home.gif') no-repeat right;
}

[suz]

thanks for the replies, I usually would use css but it had to be javascript for an assignment I was doing. Got it sorted so its all good!

cheers guys! :beer: