Javascript - Pour rendre vos pages interactives

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

Page 24: Exercices

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>