[Spoiler] HTML
Résolu
Salut!
Je voudrais savoir quel est le code pour faire un spoiler comme ceci:
http://forum.hardware.fr/hardwarefr/JeuxVideo/Ouverture-facile-aides-pour-passer-niveaux-Lire-post-sujet-86813-2.htm
Mais pas sur un forum
Merci
--
Faites l'amour, pas la guerre ;)
Je voudrais savoir quel est le code pour faire un spoiler comme ceci:
http://forum.hardware.fr/hardwarefr/JeuxVideo/Ouverture-facile-aides-pour-passer-niveaux-Lire-post-sujet-86813-2.htm
Mais pas sur un forum
Merci
--
Faites l'amour, pas la guerre ;)
31 réponses
Résumé de la discussion
La discussion porte sur la manière d’implémenter un spoiler cliquable sur une page web, via du HTML et du JavaScript. Plusieurs solutions proposées utilisent des éléments div et des boutons ou liens qui révèlent ou masquent le contenu grâce à des styles display ou visibility, selon le cas. Des conseils distinguent l’emploi de display versus visibility, et soulignent que l’état initial peut résider dans le CSS ou être géré par le script, selon la structure. En fin de discussion, une approche robuste consiste à combiner un script montrant ou cachant le contenu et une classe CSS dédiée, compatible avec plusieurs spoilers sur une même page.
-
Voici un spoiler qui devrais bien fonctionner:
<div style="margin:20px; margin-top:5px"><div class="quotetitle"><b>Spoiler:</b> <input type="button" value="Afficher" style="width:45px;font-size:10px;margin:0px;padding:0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Cacher'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Afficher'; }" /></div><div class="quotecontent"><div style="display: none;">{TEXT}</div></div></div>
il faut juste modifier {text} par votre texte-
-
-
Bonjour Lord-Pi.
Tu trouveras une illustration sur cette page.
http://dieurdieuf.blogspot.com/2009/07/attention-sur-msn.html
Voici le code utilisé.
<div style="margin: 5px 20px 20px;"><div class="quotetitle"><b>Spoiler : </b> <input value="Afficher" style="margin: 0px; padding: 0px; width: 50px; font-size: 10px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Cacher'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Afficher'; }" type="button"></div><div class="quotecontent"><div style="display: none;"> <a href="https://imageshack.com/" target="_blank"><img style="width: 201px; height: 115px;" src="http://img412.imageshack.us/img412/415/livemessenger.jpg" border="0" alt="Attention" /></a> </div></div></div>
Il faut remplacer la partie en gras par le texte, image ou média que tu souhaites afficher en spoiler.
Bonne journée. -
-
-
-
Upp svp . J'ai toujours pas trouvé la solution à mon problème et j'ai besoin du spoiler pour aller dans mon menu :(
Comment faire pour que ce code soit fermé par défaut svp?
<div class="c1" onclick="pchild=this.getElementsByTagName('p'); if(pchild[0].style.visibility!='hidden'){pchild[0].style.visibility='hidden'; pchild[0].style.height='0';}else{pchild[0].style.visibility=''; pchild[0].style.height=''}">Spoiler <p style="">texte<br> </p> </div> -
Bonsoir à tous, je me permet de remonter ce sujet car j'ai un petit problème.
J'ai pu voir tous vos spoiler mais impossible de trouver celui qui me convient.
Après avoir longtemps cherché autour de ce code, je viens voir s'il est possible de recevoir de l'aide.
<div class="c1" onclick="pchild=this.getElementsByTagName('p'); if(pchild[0].style.visibility!='hidden'){pchild[0].style.visibility='hidden'; pchild[0].style.height='0';}else{pchild[0].style.visibility=''; pchild[0].style.height=''}">Spoiler <p style="">texte<br> </p> </div>
J'aimerais qu'il s'affiche fermé par défaut puis qu'il s'ouvre lorsqu'on clique dessus. Donc tout l'inverse de maintenant! Tout à l'heure j'avais trouvé mais hélas j'ai perdu le code et impossible de remodifier ça ! Quelqu'un pour me venir en aide svp ? :s -
Tu mets le messages que tu veux citer, et tu clique en haut à droite normalement sur "citer", c'est tout! ^^
-
Bonjour je souhaiterai savoir si possible comment adapter ce script pour l'exécution de plusieurs spoilers dans la même page.
Merci. -
spoiler n'est pas activer sur ccm essayé sur d'autre site ça marche
-
[spoiler] sa marhce pas de la pur mer***[/spoile]
-
<div style="margin:20px; margin-top:5px"><div class="quotetitle"><b>Spoiler:</b> <input type="button" value="Afficher" style="width:45px;font-size:10px;margin:0px;padding:0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Cacher'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Afficher'; }" /></div><div class="quotecontent"><div style="display: none;">{moi sa marche pas aussi faut m'expliquer avec des mots clair svp}</div></div></div>
-
[spoiler]je sais pas du tout comment on fait non plus/spoiler
-
un peu long vos code pour ceux qui veulent plus court j'en ai 2
celui là<div class="c1" onclick="javascript:montrer_spoiler('spoiler2')"><strong>spoiler</strong> <script type="text/javascript"> function montrer_spoiler(value){var actual=document.getElementById(value).style.visibility;if (actual=='visible'){document.getElementById(value).style.visibility='hidden';}else{document.getElementById(value).style.visibility='visible';}} </script> <dl style="visibility: hidden;" id="spoiler2"> <dd>texte c<br> </dd> </dl> </div>ou lui<div class="c1" onclick="pchild=this.getElementsByTagName('p'); if(pchild[0].style.visibility!='hidden'){pchild[0].style.visibility='hidden'; pchild[0].style.height='0';}else{pchild[0].style.visibility=''; pchild[0].style.height=''}">Spoiler <p style="">texte<br> cach<br> cach<br> cach<br> </p> </div>-
Vous avez aussi:
Avec une case à cocher:
<div><div class="quotetitle"><input type="checkbox" value="Afficher" style="width:98%;font-size:20px;margin:0px;padding:0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Cacher'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Afficher'; }" /></div><div class="quotecontent"><div style="display: none;">
Avec un bouton:
<div><div class="quotetitle"><input type="button" value="Afficher" style="width:98%;font-size:20px;margin:0px;padding:0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Cacher'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Afficher'; }" /></div><div class="quotecontent"><div style="display: none;">
Enjoy it!
-
-
j'ai encore plus court source mon site http://bormat2.free.fr/wordpress4/
<div class="c1" onclick="javascript:montrer_spoiler('spoiler2')"><strong>spoiler</strong> <script type="text/javascript"> function montrer_spoiler(value){var actual=document.getElementById(value).style.visibility;if (actual=='visible'){document.getElementById(value).style.visibility='hidden';}else{document.getElementById(value).style.visibility='visible';}} </script> <dl style="visibility: hidden;" id="spoiler2"> <dd>texte c<br> </dd> </dl> </div>
vous avez aussi des spoilesr compressable -
désolé mon lien à des problème voici où il a été déplacer il y a tous sur les spoiler et les menu déroulant
http://bormat2.free.fr/tutoriel-menu-déroulant.html -
http://sd-1.archive-host.com/membres/up/150114153040225939/66.HTM
la dernière réponse date de 2008 donc pas encore trop tard
avec le java script et le html ça ne fait que 5,74 ko à la place de 14 ou + -
lu
<div class="container"><table class="spoiler" onclick="javascript:montrer_spoiler('spoiler2')" style="cursor: pointer;"><tbody><tr class="none"><td><b class="s1Topic">Spoiler :</b><br><br><div class="Topic masque" id="spoiler2"><p>escargot</p></div></td></tr></tbody></table></div> -
peut-être n'as-tu pas inclu dans ta page la fonction javascript hideBBCodeShowHide()...
j'ai récupéré dans le code source de ta page d'exemple le fichier .js contenant la fonction en question (http://img3.xooimage.com/files/c/1/5/common-424e3c.js?2_20080531)...mais c'est un vrai capharnaum pour y comprendre quelque chose. Au pire enregistres le .js en entier et utilises-le tel quel.
J'ai reussi en tatonnant a virer quelques trucs n'ayant pas de rapport avec la fonction de "spoilerization", mais une grande partie reste opaque pour moi : la fonction hideBBCodeShowHide() fait appel à 2 autres fonctions Effect.SlideDown et Effect.SlideUp, mais après je m'y perds. Voilà , en espérant avoir pu t'aider un peu. -
bonjour a tous, je vois que vous avez de bonne connaissance
alors voila, tout ces spoiler son bien jolie mais ce que je recherche n'y ai pas exactement ...
je cherche un spoilé comme présent sur ce forum :
http://xooit.xooit.com/t34946-Mettre-vos-sous-sous-forum-en-lien-cache-hide-spoiler.htm?q=spoiler
un spoiler qui se déplie progressivement, et non un texte qui apparait d'un coups, et qui ne fait pas de gros troues dans l'affichage de la page..
en quelque sorte se serait le top du spoiler non ? :)
j'ai esseyé de reprendre le code, en très gros le code ressemble a ça non ?
<div><a href="javascript:void(0);"
onclick="hideBBCodeShowHide(this)">Spoiler : </a></div>
<div style="display: none;">
TEXTE
<span class="postbody"></span></div>
</div>
serait il possible de l'appliquer a une page web ? parce que tel quel le texte ne s'affiche pô !
merci ;) -
j'ai réglé le problème de lpareo
voici le bon code :
<script type="text/javascript">
function montrer_spoiler(value) {
var actual=document.getElementById(value).style.visibility;
if (actual=='visible') {
document.getElementById(value).style.visibility='hidden';
} else {
document.getElementById(value).style.visibility='visible';
}
}
</script>
<div class="container"><table class="spoiler" onclick="javascript:montrer_spoiler('spoiler2')"
style="cursor: pointer;"><tbody><tr class="none"><td><b class="s1Topic"> On clique sur ce texte pour afficher le reste !!! </b><br><br>
<div class="Topic_masque" id="spoiler2">
Texte
</div></td></tr></tbody></table></div>
et dans ton fichier css, ou directement dans le fichier html ou php, en rajoutant une balise css tu met
.topic_masque
{
visibility: hidden;
}
voila, et c'est pas de moi, j'ai pris le code de takerman qui date du 21 aout 2007, et j'ai passé 5 minutes a tester différents noms de class pour le css.
il affichera le nom en gras et centré, il y aura une plage invisible aussi longue que ton texte caché, et quand tu cliqueras, ca l'affichera en centré
ce code est pratique pour les cas ou il n'y a qu'une ou deux lignes a afficher
mais pour un cas ou il y a une page entière, mieux vaux prendre celui de takerman du 9 décembre 2007.
meme si il y a un léger bug (il n'affiche en effet rien quand tu cliques sur le bouton, je vais essayer de régler ca, meme si je ne m'y connais pas en codage java
voila -
et bien, poupee, je pense que c'est parce que c'est un blog et donc, ton service de blog ne gère pas ce type de codage
et sinon takerman, j'ai essayé ton code, mais quand je clique sur afficher, il ne fait rien -
bonjour tlm j aimerais bien qu on m explique comment ca MARCHE moi quand mes dans mon blog je vois toute le code ,ca fait pas la reponse cache peus tu avoirun exemple..merci
-
Bonjour,
merci à tous d'avoir aidé monsieur pour ses spoilers ^^
pour moi, c'est tout autre chose (je pense)
étant donné que je suis pas très doué, je vous apelle à l'aide :
comment faire un "truc" qui permette de faire le même principe qu'un spoiler, mais qui tolère l'affichage d'une chatbox, qui, une fois masquée, ne laisse pas un gros trou dans l'affichage =__="
la plate forme que j'utilise est blogspot, pour info =)
- 1
- 2
Suivant