Créer une div dépliante
marina_31
Messages postés
2
Date d'inscription
Statut
Membre
Dernière intervention
-
Lyricoding Messages postés 13 Date d'inscription Statut Membre Dernière intervention -
Lyricoding Messages postés 13 Date d'inscription Statut Membre Dernière intervention -
Bonjour à tous et merci d'avance à toi qui lis mon message,
effectivement je ne connais rien à Javascript et je bidouille avec jquery. J'ose croire que ce que je veux faire sera possible avec votre aide, mon acharnement et mon enthousiasme.
Je fais un site internet et je souhaiterais que mon site fonctionne un peu comme celui-ci: http://www.maison-chapelle.com/
vous voyez? si vous clikez sur une image une div se déplie; si vous clikez sur une autre image du menu-image la div correspondante se déplie en remplacant l'autre. En gros le site fonctionne il me semble avec un header, un menu-image et des pages-div qui s'intercalent entre le header et le menu-image. C'est exactement ce que je souhaiterais faire. J'ai tapé le code de mon index et de toutes mes pages. Il ne reste plus qu'à trouver comment faire en sorte que les pages appellées s'insèrent entre mon header et mon menu-image...
comment faire? ou si cela vous semble trop long à expliquer (ce que je comprend bien), comment s'appelle ce que je veux faire (avec le terme exact je pourrais peut-être le retrouver dans jquery)?
Merci et à bientôt j'espère.
Marina
effectivement je ne connais rien à Javascript et je bidouille avec jquery. J'ose croire que ce que je veux faire sera possible avec votre aide, mon acharnement et mon enthousiasme.
Je fais un site internet et je souhaiterais que mon site fonctionne un peu comme celui-ci: http://www.maison-chapelle.com/
vous voyez? si vous clikez sur une image une div se déplie; si vous clikez sur une autre image du menu-image la div correspondante se déplie en remplacant l'autre. En gros le site fonctionne il me semble avec un header, un menu-image et des pages-div qui s'intercalent entre le header et le menu-image. C'est exactement ce que je souhaiterais faire. J'ai tapé le code de mon index et de toutes mes pages. Il ne reste plus qu'à trouver comment faire en sorte que les pages appellées s'insèrent entre mon header et mon menu-image...
comment faire? ou si cela vous semble trop long à expliquer (ce que je comprend bien), comment s'appelle ce que je veux faire (avec le terme exact je pourrais peut-être le retrouver dans jquery)?
Merci et à bientôt j'espère.
Marina
A voir également:
- Créer une div dépliante
- Comment créer un groupe whatsapp - Guide
- Créer un compte google - Guide
- Créer une adresse hotmail - Guide
- Créer un lien pour partager des photos - Guide
- Créer une liste déroulante excel - Guide
1 réponse
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.