Button animation help!!

**Allu** · 07-25-2006, 03:40 AM

Hey

I've got a web page that contains links. I've found a script I can use to make the links change color when the mouse is over.

The page is:
www.laasanen.net/alina/paasivu.html

One of the links contain script which is the red one. As you can see it turns grey when the mouse is over it.

The script I'm using is:

<html>
<head>
<script type="text/javascript">
function mouseOver()
{
document.b1.src ="b_blue.gif"
}
function mouseOut()
{
document.b1.src ="b_pink.gif"
}
</script>
</head>

<body>

<a href="http://www.w3schools.com" target="_blank"
onmouseover="mouseOver()"
onmouseout="mouseOut()">
<img border="0" alt="Visit W3Schools!" src="b_pink.gif" name="b1" width="26" height="26" /></a>

</body>
</html>

I'm having trouble making using this code at least twice on the same page. How is this done? The thing that happens for me is that the next link I make does not change color when the mouse is over it but the first link I made, which is now seen on the web page, changes color, even though the mouse is over the other link. I hope this made sense at all. I really need help. I guess the question is that how do I use this script on several links o the same page??
-Al

**funkdaddu** · 07-25-2006, 08:39 AM

I wouldn't use mouseOver as the name of your function as that is an object property. It can confuse things. You need to use function parameters to pass specific data along for each image:

Code:

function swapImg(targetImg, imgToSwap) {
     targetImg.src = imgToSwap;
}

Then you use it in your code like:

HTML Code:

<img src="yourImgName.gif" onmouseover="swapImg(this,'yourImgName-over.gif')" onmouseout="swapImg(this,'yourImgName.gif')" >

There are many ways to do this but this is the simplest example. The 'this' passes a reference of the object to the function.

**Allu** · 07-26-2006, 04:06 AM

Hey

Thanks for the help.

I was just wondering (because this JS is very new to me) that do I have to anything to the actual code or do I just paste it between the script tags just like that?

**funkdaddu** · 07-26-2006, 08:33 AM

Yes, just put the function between the <script> tags, and then modify your images with the onmouseover="swapImg(this,'yourImgName-over.gif')" onmouseout="swapImg(this,'yourImgName.gif')" for each rollover you want.