...

View Full Version : Link mouseover effect with JS



jshl_wiz
05-26-2005, 08:34 PM
I'm trying to do a "mouseover" effect on a link. When you put your mouse over the link it has an effect of "fading in" (the background color gets darker and darker every time). When you put your mouse out, it is supposed to turn the background white and then when you put it over again it will have the same fading in effect.

In My script I already got the part of when you put your mouse over it and then put it out, but I can't get it to do the same effect when you put your mouse over it AGAIN. Any suggestions?

Here's the code:


<script language="JavaScript">
<!--
var thenumber = 0;
var backnumber = 5;
var thecolors = new Array("#C1DAFF","#77ADFF","#3787FF","#004EC1","#0062F4", "white");
function fadeColor(which)
{

if(thenumber<4)
{
document.anchors(which).style.backgroundColor = thecolors[thenumber];
thenumber+=1;
}
setTimeout('fadeColor()', 50);
}

function fadeBack(which)
{
document.anchors(which).style.backgroundColor = "white";
}

//-->
</script>
</head>
<body>
<a href="navigation.html" name="ellink" onmouseover="fadeColor('ellink')" onmouseout="fadeBack('ellink')">Link</a>

vwphillips
05-26-2005, 09:21 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>

<script language="JavaScript">
<!--
var thenumber = 0;
var backnumber = 5;
var thecolors = new Array("#C1DAFF","#77ADFF","#3787FF","#004EC1","#0062F4", "white");
var TO;

function fadeColor(which)
{

if(thenumber<4)
{
document.anchors(which).style.backgroundColor = thecolors[thenumber];
thenumber+=1;
}
TO=setTimeout('fadeColor()', 50);
}
function fadeBack(which)
{
document.anchors(which).style.backgroundColor = "white";
clearTimeout(TO);
thenumber = 0;
}

//-->
</script>
</head>
<body>
<a href="navigation.html" name="ellink" onmouseover="fadeColor('ellink')" onmouseout="fadeBack('ellink')">Link</a>
</body>

</html>

Vapor
05-26-2005, 10:00 PM
Dude, that's a cool Javascript! Makes things look a little less basic

jshl_wiz
05-26-2005, 10:01 PM
thanks, i really appreciate it, didn't think about that at all :confused:

rlemon
05-26-2005, 10:38 PM
OK,

the posted code didn't work in FireFox when i tested it (didn't work in IE for that matter :confused: )

So, I revamped it for you. Should also be a little more efficient.





<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>

<script language="JavaScript">
<!--
var thenumber = 0;
var thecolors = new Array("#C1DAFF","#77ADFF","#3787FF","#004EC1","#0062F4", "#FFFFFF");
var TO;
function fadeColor(id)
{

if(thenumber<=(thecolors.length-1))
{
var doc = document.getElementById(id);
doc.style.backgroundColor = thecolors[thenumber];
thenumber++;
}
TO=setTimeout('fadeColor("'+id+'")', 50);
}
function fadeBack(id)
{
var doc = document.getElementById(id);
doc.style.backgroundColor = thecolors[(thecolors.length-1)];
clearTimeout(TO);
thenumber = 0;
}

//-->
</script>
</head>
<body>
<a href="navigation.html" id="ellink" onmouseover="fadeColor(this.id)" onmouseout="fadeBack(this.id)">Link</a>
<a href="navigation.html" id="ellink2" onmouseover="fadeColor(this.id)" onmouseout="fadeBack(this.id)">Link</a>
<a href="navigation.html" id="ellink3" onmouseover="fadeColor(this.id)" onmouseout="fadeBack(this.id)">Link</a>


</body>

</html>

rlemon
05-26-2005, 10:50 PM
Ohh and the code i just posted works in IE, Mozilla, and FireFox

jshl_wiz
05-26-2005, 10:53 PM
thanks, it worked just fine with one link but when i try to add another link to the page with the same function it gets kind of messed up.

this is what i was trying to do:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>

<script language="JavaScript">
<!--
var thenumber = 0;
var thecolors = new Array("#C1DAFF","#77ADFF","#3787FF","#004EC1","#0062F4");
var TO;

function fadeColor(which)
{

if(thenumber<=thecolors.length)
{
document.anchors(which).style.backgroundColor = thecolors[thenumber];
thenumber+=1;
}
TO=setTimeout('fadeColor()', 50);
}
function fadeBack(which)
{
document.anchors(which).style.backgroundColor = "white";
clearTimeout(TO);
thenumber = 0;
}

//-->
</script>
</head>
<body>
<a href="navigation.html" name="ellink" onmouseover="fadeColor('ellink');" onmouseout="fadeBack('ellink');">Link</a>
<a href="navigation2.html" name="ellink2" onmouseover="fadeColor('ellink2');" onmouseout="fadeBack('ellink2');">Link2</a>
</body>

</html>

jshl_wiz
05-26-2005, 11:15 PM
Never mind about what i said, me and you posted our messages at the same time.... thanks :thumbsup: really appreciate it. And thanks vapor i guess i got a lot of imagination but just don't know how to code my thoughts...

rlemon
05-26-2005, 11:49 PM
ok, well what you posted above (code) isn't correct.

just so we are clear

JAVASCRIPT:: (within the <head> tags) ::


<script language="JavaScript">
<!--
var thenumber = 0;
var thecolors = new Array("#C1DAFF","#77ADFF","#3787FF","#004EC1","#0062F4", "#FFFFFF");
var TO;
function fadeColor(id)
{

if(thenumber<=(thecolors.length-1))
{
var doc = document.getElementById(id);
doc.style.backgroundColor = thecolors[thenumber];
thenumber++;
}
TO=setTimeout('fadeColor("'+id+'")', 50);
}
function fadeBack(id)
{
var doc = document.getElementById(id);
doc.style.backgroundColor = thecolors[(thecolors.length-1)];
clearTimeout(TO);
thenumber = 0;
}

//-->
</script>


HTML :: (within the <body> tags) ::


<a href="page1.html" id="link1" onmouseover="fadeColor(this.id)" onmouseout="fadeBack(this.id)">Link1</a>


then,
to make another link you only need to change what is highlighted in red:

<a href="page1.html" id="link1" onmouseover="fadeColor(this.id)" onmouseout="fadeBack(this.id)">Link1</a>

and there you go! :thumbsup:

Vapor
05-27-2005, 03:02 AM
Thanks for fixing that last little bug. Much better!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum