Boutton Spoiler vers Image

**killerdiller** · 31/12/2012, 11h43

Bonjour, j'essaye de faire ça

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Kaamo** · 31/12/2012, 12h22

Remplacer input par img peut-être ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<img src="monImage.png" alt="I don't have a client" onclick="showSpoiler();" />

**killerdiller** · 31/12/2012, 12h25

ça s'ouvre plus maintenant, je crois qu'il doit rester un bouton mais faut trouver une façon pour changer l'affichage

**Kaamo** · 31/12/2012, 12h41

ç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

**killerdiller** · 31/12/2012, 14h17

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**Kaamo** · 31/12/2012, 15h44

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

Boutton Spoiler vers Image

HTML

Discussions similaires

Partager

Partager