Button animation help!!

Allu · July 25th, 2006, 03:37 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

ukgeoff · July 25th, 2006, 01:11 PM

From the code you have shown, the relationship between the link and the script is the bit I have highlighted.

Code:

 function mouseOver()
{
document.b1.src ="b_blue.gif"
}

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

So that you can use the same JavaScript with each link, this has to be unique to the link.

Your function calls from within each link need to pass a variable that uniquely identifies that link so the script knows which one to operate on.

bruno89 · August 16th, 2006, 01:16 PM

iv used something like this befor but it was to blure thelinks not change the color try this code anyware on your site and it will work for all you links

Code:

 
<style type="text/css">
a:hover
{color:#COLORHERE}
</style>

just change the colour