Leçon 24: Exercice - Album photo

^{Toutes les leçons}

Apprendre Javascript pour rendre vos pages Web interactives

Leçon 1
Javascript c'est quoi?

Leçon 2
Comment intégrer du code Javascript?

Leçon 3
Pour commencer: les bases du Javascript

Leçon 4
Les bases du Javascript (La suite)

Leçon 5
Structures de contrôle (conditions et boucles)

Leçon 6
Les fonctions

Leçon 7
Les événements en Javascript

Leçon 8
Objets, méthodes et attributs

Leçon 9
Exercices - Permutation et calculatrice

Leçon 10
Objet Array: les tableaux

Leçon 11
Objet String: chaînes de caractères

Leçon 12
Exercice - Contrôle de saisie en Javascript

Leçon 13
Objet Math

Leçon 14
Objet Date

Leçon 15
Objet RegExp: Les expressions régulières

Leçon 16
Objet window

Leçon 17
Exercice - Afficher un message lettre par lettre

Leçon 18
Objet screen

Leçon 19
Objet Document et DOM en Javascript (Partie 1)

Leçon 20
Objet Document et DOM en Javascript (Partie 2)

Leçon 21
Objet Document et DOM en Javascript (Partie 3)

Leçon 22
Objet event

Leçon 23
Gestion des exceptions

Leçon 24
Exercice - Album photo

Leçon 25
API Selectors

Leçon 26
Exercice - Réaliser un jeu de loterie avec Javascript

Leçon 27
Exercice - Réaliser un album photo à effet de vagues (ou domino)

Leçon 28
Fonctions fléchées (Arrow function)

Leçon 29
Fonctions de rappel (Callback function)

Leçon 30
Types primitifs, non primitifs et notion du prototype

Leçon 31
Objets personnalisés en Javascript

Leçon 32
Classes et héritage

Leçon 33
Les promesses - Objet Promise

Leçon 34
Gérer les promesses avec une fonction asynchrone - async et await

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).