PDA

View Full Version : how to make an image fade in by rolling over a link?



woodstock
08-21-2006, 12:58 PM
Gradual-Highlight Image Script II-


The following modification of a DD script called Gradual Highlight Image II was posted last year on this forum. It fades an image in when the mouse rolls over its location, and fades it out when the mouse leaves. This gives a great effect, but I am trying to modify it and have no scripting knowledge. Perhaps the person who posted it could help (your name is on the script). What I've been trying to do is to arrange it so that when the mouse rolls over another object in the same document the effect is triggered, e.g. if its a link the mouse rolls over it and an image fades in somewhere else on the page. The only thing I need help with is how to move the onmouseover event from the image to be faded to another image. I seem to have tried many things but as I don't really know what i'm doing its not surprising it hasn't worked yet.

P.S. My guess is that it involves this bit of code:

onmouseover="nereidFade(this,99,30,5)"

but I don't know exactly what to put in place of "this".

Here is the original modified code:

<html>
<head>
<title></title>
<script type="text/javascript">

/*
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
Modified here by jscheuer1 in http://dynamicdrive.com/forums/
to work with Mozilla and other opacity compliant browsers
in addition to the original IE functionality
*/

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

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

function sourceNum(obj){
if ((document.documentElement.sourceIndex*1)+1)
return obj.sourceIndex;
else if (document.getElementsByTagName)
var order=document.getElementsByTagName('*')
for (var i_tem = 0; i_tem < order.length; i_tem++)
if (order[i_tem]==obj)
return i_tem;
}

function nereidFade(object, destOp, rate, delta){
if (object.toString().indexOf('object') == -1){ //do this so I can take a string too
setTimeout("nereidFade("+object+","+destOp+","+rate+","+delta+")",0);
return;
}
if (!(object.filters||object.style.MozOpacity||object.style.opacity))
return;
var objOpac=object.filters? object.filters.alpha.opacity : object.style.MozOpacity? object.style.MozOpacity*100 : object.style.opacity? object.style.opacity*100 : null
clearTimeout(nereidFadeTimers[sourceNum(object)]);

diff = destOp-objOpac;
direction = 1;
if (objOpac!==null&&objOpac > destOp){
direction = -1;
}
delta=Math.min(direction*diff,delta);
if (object.filters)
object.filters.alpha.opacity+=direction*delta;
else if (object.style.MozOpacity)
object.style.MozOpacity=(object.style.MozOpacity*1)+(direction*delta/100);
else if (object.style.opacity)
object.style.opacity=(object.style.opacity*1)+(direction*delta/100);

objOpac=object.filters? object.filters.alpha.opacity : object.style.MozOpacity? object.style.MozOpacity*100 : object.style.opacity? object.style.opacity*100 : null

if (objOpac!==null&&objOpac != destOp){
nereidFadeObjects[sourceNum(object)]=object;
nereidFadeTimers[sourceNum(object)]=setTimeout("nereidFade(nereidFadeObjects["+sourceNum(object)+"],"+destOp+","+rate+","+delta+")",rate);
}
}

</script>
</head>
<body>
<img style="filter:alpha(opacity=10);moz-opacity:0.10;opacity:0.10;" onmouseover="nereidFade(this,99,30,5)" onmouseout="nereidFade(this,10,50,5)" src="some.jpg" width="100" height="25" border="0" alt="" title="" />
</body>
</html>