Fade-In Fade-Out

Vous désirez faire un effet comme celui-ci au passage de la souris?

Copiez ce code entre vos balises head et /head :

 <script> /* Gradual-Highlight Image Script II- By J. Mark Birenbaum (birenbau@ugrad.cs.ualberta.ca) Traduit en français par Caro http://creationcaro.abysoft.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(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>

puis ce code à l'endroit ou vous désirez mettre votre image :

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

Vous pouvez changez l'opacité de départ...au lieu de 50, ici j'ai mis 30

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

Voilà!

Mes tutoriels vous aident dans la création de votre site ? Merci à l'avance si vous décidez de faire un lien vers mon site :))

 «-Retour

©Graphisme Caro 2003-2005

Merci à Dynamic Drive pour le script et son auteur J. Mark Birenbaum