fadingimage

Site hosted by Angelfire.com: Build your free website today!

undefined

~ Fading image script ~

~ Have you ever seen faded images, and when you hover over them they return to their normal color? This is how you do it!

Example:

Put this code between the <head> and </head> section of your webpage.

<script> /* Gradual-Highlight Image Script II- */ 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(nereidFadeTimers[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(nereidFadeObjects["+object.sourceIndex+"],"+destOp+","+rate+","+delta+")",rate); } } </script>

Put this code where you want the image to be placed on your webpage. Remember to change the "IMAGE URL" to the url of your picture.

<img src="IMAGE URL" style="filter:alpha(opacity=30)" onmouseover="nereidFade(this,100,70,20)" onmouseout="nereidFade(this,20,50,10)">

The important thing in this code is the part that says: "filter:alpha(Opacity=60)". The filter called Alpha is a Ccs filter that makes things semi.transparent. Opacity, means how opaque you want the transparent div layer to be. 1 is very transparent and 100 is very opaque. For fading images its best to stay with the default setting.

~Back ~