Changer une image lors d'un clic

Version imprimable

Bonjour,

Je suis en trains de créer une FAQ dont voici le code mais je n'y connais rien en javascript :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <script language="javascript" type="text/javascript"> function bascule(elem) { etat=document.getElementById(elem).style.display; if(etat=="none"){ document.getElementById(elem).style.display="block"; } else{ document.getElementById(elem).style.display="none"; } } </script> <div style="border:0px solid green;margin:5px;padding:5px;font-family:Verdana, Geneva, sans-serif"> <a href="" onclick="bascule('1'); return false;">TITRE1</a> <div id='1' style='display:none;'> TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE </div> </div>
Le code fonctionne et affiche bien le texte lorsque l'on clique sur le titre et inversement, il le cache lorsque l'on reclique.

Je souhaiterai rajouter une fleche devant le titire du style : > Titre 1
Et lorsque l'on clique, que la fleche se mette pointe vers le bas.

JE n'ai aucune idée de comment faire.

JE vous remercie pour votre aide.

Cordialement,
Morgan

20/08/2014, 14h30
devyan

Bonjour,

Tu peux gérer ça en CSS, pas besoin de JavaScript.

C'est un "Rollover", il doit y avoir pleins de sujets et même des exemples dans la FAQ.

devYan.
21/08/2014, 11h09
morgan47

Merci pour ta réponse, mais je n'ai pas trouvé d'info pour ce que je veux faire.

Je voudrai, quand le texte est affiché avoir une image, et quand le texte est caché avoir une autre image.

En fait si tu as trouvé des exmples de rollover CSS si :)

un exemple :
CSS =

Code:

1
2
3
4
5
6
7
8
9
.mon-titre { 
     background: url(image-fleche-horizontale) no-repeat 0 0; 
     padding-left: 20px; /* par exemple : cette dimension dépend de la taille de ton image */
}

.mon-titre:hover { 
     background: url(image-fleche-verticale) no-repeat 0 0; 
}

il suffit de changer (ou ajouter) un autre nom de classe CSS à .mon-titre:hover (par exemple ".ouvert") ...

Ça nous donne :

Code:

1
2
3
4
5
6
7
8
9
.mon-titre { 
     background: url(image-fleche-horizontale) no-repeat 0 0; 
     padding-left: 20px; /* par exemple : cette dimension dépend de la taille de ton image */
}

.mon-titre.ouvert  { 
     background: url(image-fleche-verticale) no-repeat 0 0; 
}

Côté JS il ne reste plus qu'à ajouter la classe CSS "ouvert" ou à l'enlever pour basculer de l'un à l'autre lors du clic.

Pour cela quelques petites adaptations de ton code sont nécessaires :
HTML =

Code:

1
2
3
4
5
6
<div style="border:0px solid green;margin:5px;padding:5px;font-family:Verdana, Geneva, sans-serif">
<a class="mon-titre" href="" onclick="bascule('1', this); return false;">TITRE1</a>
<div id='1' style='display:none;'>
TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE 
</div>
</div>

JS =

Code:

1
2
3
4
5
6
7
8
9
10
11
12
function bascule(elem, lien) {
    etat=document.getElementById(elem).style.display;
    if(etat=="none"){
        document.getElementById(elem).style.display="block";
        // basculer sur l'image "ouvert" (attention il y a bien un espace entre mon-titre et ouvert)
        lien.className = "mon-titre ouvert"; 
    } else {
        document.getElementById(elem).style.display="none";
        // basculer sur l'image "fermer"
        lien.className = "mon-titre"; 
    }
}

22/08/2014, 01h03
morgan47

Je te remercie beaucoup, ça fonctionne parfaitement.