[Mise à jour le 28/3/2024]

1. Charger les images à l'ouverture du navigateur. (volet.html)
2. Les cacher avec du code CSS. (volet.css)
3. Faire apparaître ou disparaître l'image du volet avec du code jQuery. (volet.js)

Afin de déplacer facilement les images sur la page, elles sont placées dans un conteneur réalisé avec une balise div.

• Placer les deux images dans la balise conteneur et les identifier par : id=“fenetre et id=“volet100”.
• Ajouter les deux boutons sous les images et les identifier par : id=“fermer” et id=“ouvrir.

• Ce fichier est utilisé pour :
  • dimensionner le conteneur et les images,
  • positionner les images dans le conteneur.

• Compléter le fichier volet.css comme ci-dessous.

#conteneur {
   width: 220px;
   height: 260px;
   background-color: yellow;
}
 
#fenetre {
   width: 203px;
   height: 252px;
}
 
#volet100 {
  width: 203px;
  height: 252px;
}

• Complétez le fichier volet.css comme ci-dessous.

#conteneur {
	width: 220px;
	height: 260px;
	background-color: yellow;
}
 
#fenetre {
  position: absolute; 
  top: 10px;
  left: 10px;
  width: 203px;
  height: 252px;
}
 
#volet100 {
  position: absolute;
  top: 10px;
  left: 10px; 
  width: 203px;
  height: 252px;
}

• Ajouter display:none dans #volet100 pour faire disparaitre le volet.

L'apparition et la disparition du volet est commandé par des évènements (clic de souris sur les boutons).

• Modifier le fichier volet.js comme ci-dessous.

// Fermeture du volet
$("#Fermer").click(function () {
   $("#volet100").show();
});
 
// Ouverture du volet
$("#Ouvrir").click(function () {
   $("#volet100").hide();
});

Le réalisme de l'animation peut être amélioré en ajoutant d'autres positions du volet.

Exemple.