Cours Web

Réalisation de sites Internet Lausanne


Galerie photo

Cet exemple présente un façon simple de gérer une petite galerie photo en DHTML, voir la démo ici

L'idée est de créer des petites images avec une detection du clic souris (attribut onclick). Une fonction est appelée si l'on clique sur l'imagette.

La fonction show attend comme argument le nom de l'image à afficher. Avec cette information, on crée une balise img que l'on inject dans la balise div nommé big.

Pour éviter des problèmes à l'affichage, il est bon d'appliquer à la balise div (big), une largeur et une hauteur qui correspond à la plus grande des images.

Voici le code de l'exemple:

<script language='javascript' type='text/javascript'>
  function show(nom) {
    var b = document.getElementById('big');
    b.innerHTML = "<img src='photos/big/" + nom + "' />";
  }
</script>
<img src='photos/mini/plage.jpg' onclick='show("plage.jpg");' />
<img src='photos/mini/arch.jpg' onclick='show("arch.jpg");' />
<img src='photos/mini/chateau.jpg' onclick='show("chateau.jpg");' />
<img src='photos/mini/chien.jpg' onclick='show("chien.jpg");' />
<img src='photos/mini/mouette.jpg' onclick='show("mouette.jpg");' />
<div style='width: 500px; height: 500px;' id='big'></div>