Boutton Spoiler vers Image

Version imprimable

31/12/2012, 10h43
killerdiller

Boutton Spoiler vers Image
Bonjour, j'essaye de faire ça
Code:

1 2 3 4 5 6 <div class="spoiler2"> <input type="button" onclick="showSpoiler(this);" value="I don't have a client" /> <div class="inner2" style="display:none;"> TEXTTTTTTTTTTTTTTTTT </div></div>
vous voyez "I don't have a client" ? je veux remplacer le texte par une image

conclusion: un bouton designé par moi (format .png) tu clique dessus, le spoiler s'ouvre

Merci pour lire mon poste, en attente de vos reponses
31/12/2012, 11h22
Kaamo

Remplacer input par img peut-être ?

Code:

<img src="monImage.png" alt="I don't have a client" onclick="showSpoiler();" />
31/12/2012, 11h25
killerdiller

ça s'ouvre plus maintenant, je crois qu'il doit rester un bouton mais faut trouver une façon pour changer l'affichage
31/12/2012, 11h41
Kaamo

ça dépend ce que fait showSpoiler alors ! Tu n'as pas fournit le code donc on ne peut pas vraiment prévoir ce qu'elle fait

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<style type="text/css">
.spoiler
    {
    border:1px solid #ddd;
    padding:3px;
    }
.spoiler .inner
    {
    border:1px solid #eee;
    padding:3px;margin:3px;
    }
    </style>
 
	<style type="text/css">
.spoiler2
    {
    border:1px solid #ddd;
    padding:3px;
    }
.spoiler2 .inner2
    {
    border:1px solid #eee;
    padding:3px;margin:3px;
    }
    </style>
    <script type="text/javascript">
function showSpoiler(obj)
    {
    var inner = obj.parentNode.getElementsByTagName("div")[0];
    if (inner.style.display == "none")
        inner.style.display = "";
    else
        inner.style.display = "none";
    }
    </script>

Tu n'as pas laissé le "this" en paramètre de showSpoiler ? (désolé un oubli de ma part).

Pour aller plus loin. Améliorons un peu le code. Ta fonction récupère l'élément parent de ton "input", puis va chercher le premier div qu'elle trouve et active ou non le "display" en passant par le style de l'élément. Si tu insères une div avant, ton code ne marche plus. Si tu bouges ton image de la div parent, ton code ne marche plus. Bref, pas très "robuste" en somme.
De plus il est préférable de jouer avec les classes (CSS) plutôt qu'avec l'attribut "style" d'un élément. Pour pinailler, showSpoiler affiche ou ... cache une div par forcément un "spoiler". Donc pourquoi ne pas l'appeler autrement pour l'utiliser dans un autre contexte ?
Donnons des id à tes <div> et passons l'id de la div en paramètre de notre nouvelle fonction qui s'occupera de basculer l'affichage de la div (tantôt affichée / tantôt cachée).

Je te propose :

Où X est un nombre variable s'il y a plusieurs balises div de ce type. (construit par un langage serveur par exemple)
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 <!DOCTYPE html> <html> <head> <title>Mon titre</title> <script> function toggleClass(id){ document.getElementById(id).className = document.getElementById(id).className == "inner2" ? "hidden" : "inner2"; } </script> <style> .spoiler{ border:1px solid #ddd; padding:3px;} .spoiler .inner{ border:1px solid #eee; padding:3px;margin:3px; } .spoiler2{ border:1px solid #ddd; padding:3px; } .spoiler2 .inner2{ border:1px solid #eee; padding:3px;margin:3px; } .hidden{ display: none; } </style> </head> <body> <div id="conteneur-X" class="spoiler2"> <img src="monImage.png" alt="I don't have a client" onclick="toggleClass('contenu-X');" /> <div id="contenu-X" class="hidden"> TEXTTTTTTTTTTTTTTTTT </div> </div> </body> </html>