Différences
Ci-dessous, les différences entre deux révisions de la page.
Les deux révisions précédentes Révision précédente Prochaine révision | Révision précédente | ||
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] | [Mise à jour le 28/3/2024] | ||
+ | |||
+ | \\ | ||
=== Prérequis === | === Prérequis === | ||
Ligne 35: | Ligne 37: | ||
=== 2.2 Codage du fichier volet.css === | === 2.2 Codage du fichier volet.css === | ||
* Ce fichier est utilisé pour : | * Ce fichier est utilisé pour : | ||
- | * dimensionner le conteneur et les images, | + | * dimensionner le 'conteneur' |
* positionner les images dans le conteneur. | * positionner les images dans le conteneur. | ||
* Compléter le fichier // | * Compléter le fichier // | ||
- | <code *.css> | + | < |
#conteneur { | #conteneur { | ||
| | ||
Ligne 59: | Ligne 61: | ||
<callout type=" | <callout type=" | ||
- | * Complétez | + | * Compléter les règles CSS avec le code ci-dessous. |
- | <code *.css> | + | |
- | #conteneur { | + | |
- | width: 220px; | + | |
- | height: 260px; | + | |
- | background-color: | + | |
- | } | + | |
+ | <code CSS *.css> | ||
#fenetre { | #fenetre { | ||
position: absolute; | position: absolute; | ||
top: 10px; | top: 10px; | ||
left: 10px; | left: 10px; | ||
- | width: 203px; | + | ... |
- | height: 252px; | + | |
} | } | ||
Ligne 78: | Ligne 74: | ||
position: absolute; | position: absolute; | ||
top: 10px; | top: 10px; | ||
- | left: 10px; | + | left: 10px; |
- | | + | |
- | height: 252px; | + | |
} | } | ||
</ | </ | ||
<callout type=" | <callout type=" | ||
+ | |||
+ | * Ajouter **// | ||
+ | <code CSS *.css> | ||
+ | #volet100 { | ||
+ | ... | ||
+ | display: | ||
+ | } | ||
+ | </ | ||
<callout type=" | <callout type=" | ||
- | * Ajouter **// | ||
\\ | \\ | ||
Ligne 95: | Ligne 97: | ||
* Modifier le fichier // | * Modifier le fichier // | ||
- | <code *.js> | + | < |
// Fermeture du volet | // Fermeture du volet | ||
- | $("#Fermer" | + | $("#fermer" |
| | ||
}); | }); | ||
// Ouverture du volet | // Ouverture du volet | ||
- | $("#Ouvrir" | + | $("#ouvrir" |
| | ||
}); | }); | ||
Ligne 110: | Ligne 112: | ||
==== 3. Amélioration ==== | ==== 3. Amélioration ==== | ||
- | Le réalisme de l' | + | Le réalisme de l' |
// | // |