[Mise à jour le 28/3/2024]

Base de HTML, de CSS et de JavaScript (jQuery).

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)

Les images à afficher sont placées dans un 'conteneur' réalisé avec une balise div. Ceci facilitera le positionnement de l'ensemble fenêtre volet sur la page.

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

*.css

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

• Compléter les règles CSS avec le code ci-dessous.

*.css

#fenetre {
  position: absolute; 
  top: 10px;
  left: 10px;
    ...
}
 
#volet100 {
  position: absolute;
  top: 10px;
  left: 10px;
    ... 
}

• Ajouter display:none; dans #volet100 pour faire disparaître le volet.

*.css

#volet100 {
  ...
display:none;
}

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

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

*.js

// 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 images de position.

Exemple.