fade help! [Archive] - Lissa Explains it All: Web Design Forums

View Full Version : fade help!

anime_rose

11-05-2003, 02:01 AM

Hey, I put the nereid fade code in my <head> tag and the right stuff in the img code, but it still doesn't work! Please help! Here's the code:

<html>
<head>
<title>The..Hyper..One-----De@r..Excel..Ver$ion..One..</title>
<BODY BACKGROUND="tho1main.jpg">
<iframe style="position:absolute; top:11px; left:224px" src="mainframe.html" name="mainframe" width="170" height="315" frameborder="0" border="0"></iframe>
</head>
<body>
<script>

/*
Gradual-Highlight Image Script II-
By J. Mark Birenbaum (birenbau@ugrad.cs.ualberta.ca)
Permission granted to Dynamicdrive.com to feature script in archive
For full source to script, visit http://dynamicdrive.com
*/

nereidFadeObjects = new Object();
nereidFadeTimers = new Object();

/* object - image to be faded (actual object, not name);
* destop - destination transparency level (ie 80, for mostly solid)
* rate - time in milliseconds between trasparency changes (best under 100)
* delta - amount of change each time (ie 5, for 5% change in transparency)
*/

function nereidFade(object, destOp, rate, delta){
if (!document.all)
return
if (object != "[object]"){ //do this so I can take a string too
setTimeout("nereidFade("+object+","+destOp+","+rate+","+delta+")",0);
return;
}

clearTimeout(nereidFadeTi
mers[object.sourceIndex]);

diff = destOp-object.filters.alpha.opacity;
direction = 1;
if (object.filters.alpha.opacity > destOp){
direction = -1;
}
delta=Math. min(direction*diff,delta)
;
object.filters.alpha. opacity+=direction*delta;

if (object.filters.alpha.opacity != destOp){
nereidFadeObjects[object.sourceIndex]=object;
nereidFadeTimers[object.sourceIndex]=setTimeout(" nereidFade(nereidFadeObje
cts["+object.sourceIndex+"],"+destOp+","+rate+","+delta+")",rate);
}
}

</script>
<a href="about.html" target="mainframe"><img src="tho1about.jpg" style="border="0" style="filter:alpha(opacity=0)" onmouseover="nereidFade(this,100,30,5)" onmouseout="nereidFade(this,10,50,5)" style="position:absolute; left:3px; top:179px"></a>
<a href="rules.html" target="mainframe"><img src="tho1rules.jpg" style="border="0" style="filter:alpha(opacity=0)" onmouseover="nereidFade(this,100,30,5)" onmouseout="nereidFade(this,10,50,5)" style="position:absolute; left:3px; top:198px"></a>
<a href="codes.html" target="mainframe"><img src="tho1codes.jpg" style="border="0" style="filter:alpha(opacity=0)" onmouseover="nereidFade(this,100,30,5)" onmouseout="nereidFade(this,10,50,5)" style="position:absolute; left:3px; top:217px"></a>
<a href="join.html" target="mainframe"><img src="tho1join.jpg" style="border="0" style="filter:alpha(opacity=0)" onmouseover="nereidFade(this,100,30,5)" onmouseout="nereidFade(this,10,50,5)" style="position:absolute; left:3px; top:236px"></a>
<a href="fans.html" target="mainframe"><img src="tho1fans.jpg" style="border="0" style="filter:alpha(opacity=0)" onmouseover="nereidFade(this,100,30,5)" onmouseout="nereidFade(this,10,50,5)" style="position:absolute; left:3px; top:255px"></a>
<a href="mainframe.html" target="mainframe"><img src="tho1clear.jpg" style="filter:alpha(opacity=0) border=0" onmouseover="nereidFade(this,100,30,5)" onmouseout="nereidFade(this,10,50,5)" style="position:absolute; left:3px; top:274px"></a>
</body>
</html>

Arc Angel

11-05-2003, 02:31 AM

I fixed some things, try this:

<html>
<head>
<title>The..Hyper..One-----De@r..Excel..Ver$ion..One..</title>
<script>

/*
Gradual-Highlight Image Script II-
By J. Mark Birenbaum (birenbau@ugrad.cs.ualberta.ca)
Permission granted to Dynamicdrive.com to feature script in archive
For full source to script, visit http://dynamicdrive.com
*/

nereidFadeObjects = new Object();
nereidFadeTimers = new Object();

/* object - image to be faded (actual object, not name);
* destop - destination transparency level (ie 80, for mostly solid)
* rate - time in milliseconds between trasparency changes (best under 100)
* delta - amount of change each time (ie 5, for 5% change in transparency)
*/

function nereidFade(object, destOp, rate, delta){
if (!document.all)
return
if (object != "[object]"){ //do this so I can take a string too
setTimeout("nereidFade("+object+","+destOp+","+rate+","+delta+")",0);
return;
}

clearTimeout(nereidFadeTi

mers[object.sourceIndex]);

diff = destOp-object.filters.alpha.opacity;
direction = 1;
if (object.filters.alpha.opacity > destOp){
direction = -1;
}
delta=Math. min(direction*diff,delta)

;
object.filters.alpha. opacity+=direction*delta;

if (object.filters.alpha.opacity != destOp){
nereidFadeObjects[object.sourceIndex]=object;
nereidFadeTimers[object.sourceIndex]=setTimeout(" nereidFade(nereidFadeObje

cts["+object.sourceIndex+"],"+destOp+","+rate+","+delta+")",rate);
}
}

</script>
</head>
<BODY BACKGROUND="tho1main.jpg">
<iframe style="position:absolute; top:11px; left:224px" src="mainframe.html" name="mainframe" width="170" height="315" frameborder="0" border="0"></iframe>

<a href="about.html" target="mainframe">
<img src="tho1about.jpg" style="border:0; filter:alpha(opacity=0); position:absolute; left:3px; top:179px" onmouseover="nereidFade(this,100,30,5)"
onmouseout="nereidFade(this,10,50,5)"></a>
<a href="rules.html" target="mainframe">
<img src="tho1rules.jpg" style="border:0; filter:alpha(opacity=0); position:absolute; left:3px; top:198px" onmouseover="nereidFade(this,100,30,5)"
onmouseout="nereidFade(this,10,50,5)"></a>
<a href="codes.html" target="mainframe">
<img src="tho1codes.jpg" style="border:0; filter:alpha(opacity=0); position:absolute; left:3px; top:217px" onmouseover=" nereidFade(this,100,30,5)"
onmouseout="nereidFade(this,10,50,5)"></a>
<a href="join.html" target="mainframe">
<img src="tho1join.jpg" style="border:0; filter:alpha(opacity:0); position:absolute; left:3px; top:236px" onmouseover=" nereidFade(this,100,30,5)"
onmouseout="nereidFade(this,10,50,5)"></a>
<a href="fans.html" target="mainframe">
<img src="tho1fans.jpg" style="border:0; filter:alpha(opacity:0); position:absolute; left:3px; top:255px" onmouseover="nereidFade(this,100,30,5)"
onmouseout="nereidFade(this,10,50,5)"></a>
<a href="mainframe.html" target="mainframe">
<img src="tho1clear.jpg" style="filter:alpha(opacity:0); border:0; position:absolute; left:3px; top:274px" onmouseover="nereidFade(this,100,30,5)"
onmouseout="nereidFade(this,10,50,5)"></a>
</body>
</html>

The only thing wrong with it was a few minor mistakes. You had your javascript in the body tag instead of the head tag. And you had your iframe in the head tag instead of the body. I also combined your styles in your image tags. In the styles you had a few too many parentheses and a couple equal signs instead of colons. But no worries, I make those mistakes all the time. :)

anime_rose

11-05-2003, 02:38 AM

aww it still doesn't work... you can see the site at http://excel.mokora.net... The little squares are where they're supposed to fade in on mouseover... Man, do you have any idea what's going on? My browser is fit for it and everything...