Créer une div dépliante
Fermé
marina_31
Messages postés
2
Date d'inscription
dimanche 3 mars 2013
Statut
Membre
Dernière intervention
2 septembre 2015
-
3 mars 2013 à 19:46
Lyricoding Messages postés 13 Date d'inscription samedi 9 mars 2013 Statut Membre Dernière intervention 1 novembre 2013 - 9 mars 2013 à 17:44
Lyricoding Messages postés 13 Date d'inscription samedi 9 mars 2013 Statut Membre Dernière intervention 1 novembre 2013 - 9 mars 2013 à 17:44
A voir également:
- Créer une div dépliante
- Créer un compte google - Guide
- Créer un compte gmail - Guide
- Comment créer un groupe whatsapp - Guide
- Créer une adresse hotmail - Guide
- Créer un compte instagram sur google - Guide
1 réponse
Lyricoding
Messages postés
13
Date d'inscription
samedi 9 mars 2013
Statut
Membre
Dernière intervention
1 novembre 2013
2
Modifié par Lyricoding le 9/03/2013 à 18:09
Modifié par Lyricoding le 9/03/2013 à 18:09
Je croit qu'on peut appeler ça "évènement JavaScript". Lors-ce que tu cliques sur une image, une fonction démarre, qui n'a qu'un but : rendre le div visible, et les autres invisibles.
En gros, les images auraient un code :
Le div de l'image 1 aurai un ID image1 et serait par defaut invisible
De même avec le div de l'image 2, mais avec un autre ID
Quand au script :
J'ai utilise le CSS pour afficher/cacher. Je croit qu'on pourrait faire plus simple encore avec la propriété display, mais ca n'a pas bien marché chez moi.
Voila en JavaScript. Par contre en JQuery, j'y connais rien.
Bien entendu mon code est réutilisable/modifiable.
En gros, les images auraient un code :
<img src="1.png" onClick="affiche1()" /> <img src="2.png" onClick="affiche2()" />
Le div de l'image 1 aurai un ID image1 et serait par defaut invisible
<div style="visibility:hidden;position:absolute;" id="image1"> Infos de l'image 1 </div>
De même avec le div de l'image 2, mais avec un autre ID
<div style="visibility:hidden;position:absolute;" id="image2"> Infos de l'image 2 </div>
Quand au script :
function affiche1() {
document.getElementById('image1').style.visibility='visible';
document.getElementById('image1').style.position='relative';
document.getElementById('image2').style.visibility='hidden';
document.getElementById('image2').style.position='absolute';
}
function affiche2() {
document.getElementById('image1').style.visibility='hidden';
document.getElementById('image1').style.position='absolute';
document.getElementById('image2').style.visibility='visible';
document.getElementById('image2').style.position='relative';
}
J'ai utilise le CSS pour afficher/cacher. Je croit qu'on pourrait faire plus simple encore avec la propriété display, mais ca n'a pas bien marché chez moi.
Voila en JavaScript. Par contre en JQuery, j'y connais rien.
Bien entendu mon code est réutilisable/modifiable.