Apprendre Javascript pour rendre vos pages Web interactives

Auteur: Mohamed CHINY Durée necessaire pour le cours de Apprendre Javascript pour rendre vos pages Web interactives Niveau recommandé pour le cours de Apprendre Javascript pour rendre vos pages Web interactives Supports vidéo disponibles pour ce cours Exercices de renforcement disponibles pour ce cours Quiz disponible pour ce cours

Page 24: Exercice - Album photo

Toutes les pages

Exercice

Exercice 1: album photo

On souhaite créer un album photo qui s’exécute automatiquement et dont les images s'affichent progressivement en passant de la transparence à l'opacité. Le résultat final ressemblera à ceci:

Solution

<!DOCTYPE html>
<html>
<head>
      <meta charset="UTF-8" />
      <style>
         .clImage{
            opacity:0;
            filter:alpha(opacity=0);
         }
      </style>
      <script language="javascript">
         image=new Array("courshtml.png","courshtml5.png","courscss.png","coursjavascript.png");
         im=0;
         op=0;
         sop="cr";
         function album(){
            setTimeout("album()",20);
            document.getElementById("idImage").src="cours/"+image[im%4];
            try{
               document.getElementById("idImage").filters.alpha.opacity=op*100;
            }
            catch(e){
               document.getElementById("idImage").style.opacity=op;
            }
            if(sop=="cr"){
               op+=0.02;
               if(op>2)
                  sop="dcr";
            }
            if(sop=="dcr"){
               op-=0.02;
               if(op<=0){
                  sop="cr";
                  im+=1;
               }
            }
         }
</script>
   </head>
   <body onLoad="album()">
      <center>
         <img src="cours/courshtml.png" id="idImage" class="clImage" />
      </center>
   </body>
</html>

Vous pouvez voir un exemple plus avancé d'album photo ici: Création d'un album photo en Javascript dont les transitions reproduisent l'effet de vagues (ou domino).