[forumactif]Un fondu avec Javascript

Date d'inscription: 25/04/2011

Javascript c'est le mot qui fait peur mais qui est à l'origine de tous les jolis effets "animés" qui ne viennent pas de flash.Alors on aimerait tous en avoir sur nos forums mais on ne sait pas comment faire!
Je vous rassure tout de suite j'y connais pas grand chose et pourtant, je me lance dans un tuto sympatoche.
Pré-requis:

être Fondateur
savoir configurer un template

Gradualfader c'est quoi?

Voilà un peu à quoi vous arriverez une fois le boulot terminé :

Pour avoir une idée, on s'en sert généralement pour les images liées ou celle de la page d'accueil. Intéressé? Passez à la suite!

Installation

Déjà qui dit javascript dit script! Script qu'il faudra héberger et là je vous conseille archive-host qui est soit dit en passant gratuit. Pour cela, on va prendre le script donné par dynamicdrive gradualfader.js.

Code:

//Gradual Elements Fader- By Dynamic Drive at http://www.dynamicdrive.com
//Last updated: Nov 8th, 07'

var gradualFader={}

gradualFader.baseopacity=0.4 //set base opacity when mouse isn't over element (decimal below 1)
gradualFader.increment=0.2 //amount of opacity to increase after each iteration (suggestion: 0.1 or 0.2)

document.write('<style type="text/css">\n') //write out CSS to enable opacity on "gradualfader" class
document.write('.gradualfader{filter:progid:DXImageTransform.Microsoft.alpha(opacity='+gradualFader.baseopacity*100+'); -moz-opacity:'+gradualFader.baseopacity+'; opacity:'+gradualFader.baseopacity+';}\n')
document.write('</style>')

gradualFader.setopacity=function(obj, value){ //Sets the opacity of targetobject based on the passed in value setting (0 to 1 and in between)
var targetobject=obj
if (targetobject && targetobject.filters && targetobject.filters[0]){ //IE syntax
   if (typeof targetobject.filters[0].opacity=="number") //IE6
      targetobject.filters[0].opacity=value*100
   else //IE 5.5
      targetobject.style.filter="alpha(opacity="+value*100+")"
   }
else if (targetobject && typeof targetobject.style.MozOpacity!="undefined") //Old Mozilla syntax
   targetobject.style.MozOpacity=value
else if (targetobject && typeof targetobject.style.opacity!="undefined") //Standard opacity syntax
   targetobject.style.opacity=value
targetobject.currentopacity=value
}

gradualFader.fadeupdown=function(obj, direction){
var targetobject=obj
var fadeamount=(direction=="fadeup")? this.increment : -this.increment
if (targetobject && (direction=="fadeup" && targetobject.currentopacity<1 || direction=="fadedown" && targetobject.currentopacity>this.baseopacity)){
   this.setopacity(obj, targetobject.currentopacity+fadeamount)
   window["opacityfader"+obj._fadeorder]=setTimeout(function(){gradualFader.fadeupdown(obj, direction)}, 50)
}
}

gradualFader.clearTimer=function(obj){
if (typeof window["opacityfader"+obj._fadeorder]!="undefined")
clearTimeout(window["opacityfader"+obj._fadeorder])
}

gradualFader.isContained=function(m, e){
var e=window.event || e
var c=e.relatedTarget || ((e.type=="mouseover")? e.fromElement : e.toElement)
while (c && c!=m)try {c=c.parentNode} catch(e){c=m}
if (c==m)
   return true
else
   return false
}

gradualFader.fadeinterface=function(obj, e, direction){
if (!this.isContained(obj, e)){
   gradualFader.clearTimer(obj)
   gradualFader.fadeupdown(obj, direction)
}
}

gradualFader.collectElementbyClass=function(classname){ //Returns an array containing DIVs with specified classname
var classnameRE=new RegExp("(^|\\s+)"+classname+"($|\\s+)", "i") //regular expression to screen for classname within element
var pieces=[]
var alltags=document.all? document.all : document.getElementsByTagName("*")
for (var i=0; i<alltags.length; i++){
   if (typeof alltags[i].className=="string" && alltags[i].className.search(classnameRE)!=-1)
      pieces[pieces.length]=alltags[i]
}
return pieces
}

gradualFader.init=function(){
var targetobjects=this.collectElementbyClass("gradualfader")
for (var i=0; i<targetobjects.length; i++){
   targetobjects[i]._fadeorder=i
   this.setopacity(targetobjects[i], this.baseopacity)
   targetobjects[i].onmouseover=function(e){gradualFader.fadeinterface(this, e, "fadeup")}
   targetobjects[i].onmouseout=function(e){gradualFader.fadeinterface(this, e, "fadedown")}

Copiez/collez le dans un bloc note.
On va alors modifier certaines valeurs selon vos désirs:

Code:

gradualFader.baseopacity=0.4

change l'opacité de l'image lorsque la souris n'est pas dessus. Cette valeur va de 0 (transparence complète) à 1 (pas de changement d'opacité).

Code:

gradualFader.increment=0.2

Plus l'increment est haut, plus la durée de l'effet fondu est courte.

Vous pouvez bien sûr laisser comme tel. Enregistrez vos modifications et hébergez vos fichiers chez votre hébergeur.

Comment m'en servir

Direction:

>PA
>Affichage
>Templates
>Overall_header

Recherchez la balise

Code:
</head>

Et placez juste avant:

Code:
<script type=text/javascript src=LIEN D'HEBERGEMENT DU SCRIPT></script>

Enregistrez et validez.
Vous pouvez également placer le code ci dessus dans la description du forum (encore faut il avoir la place).
Maintenant on s'attaque au template overall_footer.

Recherchez la balise:

Code:
</body>

Au dessus de laquelle vous placez:

Code:
<script type="text/javascript">
gradualFader.init()
</script>
Dernière étape: on va définir à quel élément on applique le gradualfader.
Pour cela rien de plus simple, il suffit d'attribuer une classe avec une div de cette manière:

Code:
<div class="gradualfader"> Votre élément</div>

Par exemple pour une image cela vous donne:

Code:
<div class="gradualfader"><img src="URL DE L'IMAGE"></div>

Vous pouvez utiliser le gradualfader dans les templates, la page d'accueil, vos messages bref n'importe quoi qui accepte le html.

Voilà c'est la fin de ce tuto c'était facile non?

[Si vous avez un soucis, n'hésitez pas à venir poser vos questions par ici]