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 07:42] – [2.2 Codage du fichier volet.css] phil | web:jquery:volet [2024/03/28 20:05] (Version actuelle) – [3. Amélioration] phil | ||
---|---|---|---|
Ligne 5: | Ligne 5: | ||
[Mise à jour le 28/3/2024] | [Mise à jour le 28/3/2024] | ||
+ | \\ | ||
+ | |||
+ | === Prérequis === | ||
+ | Base de HTML, de CSS et de JavaScript (jQuery). | ||
+ | |||
+ | \\ | ||
==== 1. Présentation ==== | ==== 1. Présentation ==== | ||
<callout type=" | <callout type=" | ||
Ligne 23: | Ligne 29: | ||
=== 2.1 Codage du fichier volet.html === | === 2.1 Codage du fichier volet.html === | ||
{{ : | {{ : | ||
- | Afin de déplacer facilement les images | + | Les images |
* Placer les deux images dans la balise conteneur et les identifier par : id=" | * Placer les deux images dans la balise conteneur et les identifier par : id=" | ||
* Ajouter les deux boutons sous les images et les identifier par : id=" | * Ajouter les deux boutons sous les images et les identifier par : id=" | ||
Ligne 31: | 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 55: | 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 74: | Ligne 74: | ||
position: absolute; | position: absolute; | ||
top: 10px; | top: 10px; | ||
- | left: 10px; | + | left: 10px; |
- | | + | |
- | height: 252px; | + | |
} | } | ||
</ | </ | ||
Ligne 82: | Ligne 81: | ||
<callout type=" | <callout type=" | ||
- | <callout type=" | + | * Ajouter **// |
+ | <code CSS *.css> | ||
+ | #volet100 { | ||
+ | ... | ||
+ | display: | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | <callout type=" | ||
- | * Ajouter **// | ||
\\ | \\ | ||
=== 2.3 Codage du fichier volet.js === | === 2.3 Codage du fichier volet.js === | ||
- | L' | + | L' |
* 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 106: | Ligne 112: | ||
==== 3. Amélioration ==== | ==== 3. Amélioration ==== | ||
- | Le réalisme de l' | + | Le réalisme de l' |
// | // |