Différences

Ci-dessous, les différences entre deux révisions de la page.

--- web:jquery:volet [2024/03/28 19:40] – [jQuery - Afficher et cacher des images] phil
+++ web:jquery:volet [2024/03/28 20:05] (Version actuelle) – [3. Amélioration] phil
@@ Ligne 4: / Ligne 4: @@
 [Mise à jour le 28/3/2024]
+\\
 === Prérequis ===
@@ Ligne 35: / Ligne 37: @@
 === 2.2 Codage du fichier volet.css ===
   * Ce fichier est utilisé pour :
-    * dimensionner le conteneur et les images,
+    * dimensionner le 'conteneur' et les images,
     * positionner les images dans le conteneur.
   * Compléter le fichier //volet.css// comme ci-dessous.
-<code *.css>
+<code css *.css>
 #conteneur {
    width: 220px;
@@ Ligne 59: / Ligne 61: @@
 <callout type="default" title="Comportement attendu" icon="true">Les images sont redimensionnées. Le volet est placé sous la fenêtre.</callout>
-  * Complétez le fichier //volet.css// comme ci-dessous.
+  * Compléter les règles CSS avec le code ci-dessous.
-<code *.css>
-#conteneur {
-	width: 220px;
-	height: 260px;
-	background-color: yellow;
-}
+<code CSS *.css>
 #fenetre {
   position: absolute;
   top: 10px;
   left: 10px;
-  width: 203px;
+    ...
-  height: 252px;
 }
@@ Ligne 78: / Ligne 74: @@
   position: absolute;
   top: 10px;
   left: 10px;
-  width: 203px;
+    ...
-  height: 252px;
 }
 </code>
 <callout type="default" title="Comportement attendu" icon="true">Le volet se positionne sur la fenêtre.</callout>
+  * Ajouter **//display:none;//** dans #volet100 pour faire disparaître le volet.
+<code CSS *.css>
+#volet100 {
+  ...
+display:none;
+}
+</code>
 <callout type="tip" title="Positionnement" icon="true">Des informations sur la propriété CSS **//position//** sont accessibles <html><a href="https://developer.mozilla.org/fr/docs/Web/CSS/position" target="_blank" title="mdn web docs"><b>ici</b></a></html>. Voir également <html><a href="https://developer.mozilla.org/fr/docs/Web/CSS/z-index" target="_blank" title="mdn web docs"><b>z-index</b></a></html> pour empiler (dépiler) des objets . </callout>
-  * Ajouter **//display:none//** dans #volet100 pour faire disparaître le volet.
 \\
@@ Ligne 95: / Ligne 97: @@
   * Modifier le fichier //volet.js// comme ci-dessous.
-<code *.js>
+<code js *.js>
 // Fermeture du volet
-$("#Fermer").click(function () {
+$("#fermer").click(function () {
    $("#volet100").show();
 });
 // Ouverture du volet
-$("#Ouvrir").click(function () {
+$("#ouvrir").click(function () {
    $("#volet100").hide();
 });
@@ Ligne 110: / Ligne 112: @@
 ==== 3. Amélioration ====
-Le réalisme de l'animation peut être amélioré en ajoutant d'autres positions du volet.
+Le réalisme de l'animation peut être amélioré en ajoutant d'autres images de position.
 //Exemple//.