Code facon Spoiler

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Code facon Spoiler

Sataneo85

bonjour, j'ai trouvé deux exemples de spoiler mais je voudrais combiner les deux

1er exemple

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">Spoiler :</b><br><br><div class="Topic masque" id="spoiler2">{TEXT}
</div></td></tr></tbody></table></div>

ce qui donne ca http://sataneo.free.fr/essai.htm

2er exemple (presque parfait)

Code :

<div id="layer1" style="position:absolute; left:10px; top:186px; width:274px; height:384px; z-index:1; visibility: hidden;"><img src="images/pdf.png" name="image" width="568" height="560" id="image"></div>
<div id="layer2" style="position:absolute; left:10px; top:140px; width:56px; height:22px; z-index:2"><a href="#" onClick="document.getElementById('layer1').style.visibility ='visible'">montrer</a></div>
<div id="layer3" style="position:absolute; left:10px; top:161px; width:49px; height:23px; z-index:2"><a href="#" onClick="document.getElementById('layer1').style.visibility ='hidden'">cacher</a></div>

qui donne ca http://sataneo.free.fr/essai.php

j'aimerais que dans l'exemple 2, je puisse me passer de deux "boutons" un seul qui ferai les deux suffirait mais j'ai pas reussi a faire la fonction javascript

Publicité

durkheim

Ben c'est simple.

En javascript:

Code :

if (document.getElementById('layer1').style.display=="none" )
document.getElementById('layer1').style.display="block";
else
document.getElementById('layer1').style.display="none";

Sataneo85

excuse moi mais pourrai tu etre plus precis avec un petit exemple complet parceque la je pige pas ... désolé j'ai un peu du mal je commence tout juste

durkheim

Dans ton deuxième exemple tu as un lien qui cache, et un lien qui affiche. ce que mon code fait, c'est tester si c'est caché, et si oui on affiche, et linverse si l'inverse.
Bref, tu mets qu'un lien qui déclenche ce javascript et voilou.

Sataneo85

nickel merci !!
pour ceux que ca pourrait intéresser

Code :

<script type="text/javascript">
function change_calque(value)
{
var actual=document.getElementById(value).style.display;
if (document.getElementById(value).style.display=="none" )
{document.getElementById(value).style.display="block";}
else
{document.getElementById(value).style.display="none";}}
</script>
<div id="layer1" style="position:absolute; left:17px; top:55px; width:272px; height:249px; z-index:1; display:none"><img src="images/pdf.png" name="image" width="250" height="250" id="image"></div>
<div id="layer2" style="position:absolute; left:12px; top:14px; width:56px; height:22px; z-index:2"><a href="#" onclick="javascript:change_calque('layer1')">montrer</a></div>

Message cité 1 fois

zlatan40

Bonjour j'ai un petit probleme,
Si je veux mettre plusieur spoiler, comment doit-je procèder ?

Code :

<html><body>
<script type="text/javascript">
function change_calque(value) {
var actual=document.getElementById(value).style.display;
if (document.getElementById(value).style.display=="none" ) {
document.getElementById(value).style.display="block";}
else {
document.getElementById(value).style.display="none";
}
}
</script>
<div id="layer1" style="position:absolute; left:17px; top:55px; width:272px; height:249px; z-index:1; display:none">Mon texte ici</div>
<div id="layer2" style="position:absolute; left:12px; top:14px; width:56px; height:22px; z-index:2"><a href="#" onclick="javascript:change_calque('layer1')">Montrer/cacher</a></div>
</body></html>

---------------

mIRROR

Chevreuillobolchévik

Code :

<html><body>
<script type="text/javascript">
function change_calque(elm) {
var div = elm.parentNode;
div.style.display = div.style.display=="none" ? "block" : "none";
}
</script>
<div style="position:absolute; left:17px; top:55px; width:272px; height:249px; z-index:1; display:none">Mon texte ici</div>
<div style="position:absolute; left:12px; top:14px; width:56px; height:22px; z-index:2"><a href="#" onclick="javascript:change_calque(this)">Montrer/cacher</a></div>
</body></html>

ca devrait marcher comme ca

---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell

zlatan40

Merci mais cela ne fontionne pas chez moi, ce que je veux faire c'est mettre plusieur spoiler sur la même page

---------------

mIRROR

Chevreuillobolchévik

edit : en fait non jme suis merdé [:tinostar]
laisse moi checker ca

Message cité 1 fois
Message édité par mIRROR le 18-11-2007 à 14:06:34

---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell

zlatan40

mIRROR a écrit :

tu comprends pas le html [:petrus dei]

dsl je debute, mais j'ai pris ton code et il n'y a qu'un spoiler dessus ??

---------------

Publicité

mIRROR

Chevreuillobolchévik

voila c etait ma faute dsl :jap:

Code :

<html><body>
<script type="text/javascript">
function change_calque(elm) {
var div = elm.parentNode.getElementsByTagName('div')[0];
if (div.style.display=="none" ) {
div.style.display = "block";
elm.innerHTML = "Cacher";
} else {
div.style.display = "none";
elm.innerHTML = "Montrer";
}
}
</script>
<div>
du texte normal
<div>
<a href="#" onclick="javascript:change_calque(this)">Montrer</a>
<div style="display:none;">Mon texte caché</div>
</div>
</div>
<div>
du texte normal
<div>
<a href="#" onclick="javascript:change_calque(this)">Montrer</a>
<div style="display:none">Mon texte caché</div>
</div>
</div>
</body></html>

edit: un console.log qui traine :whistle:

Message édité par mIRROR le 18-11-2007 à 14:18:35

---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell

zlatan40

Merci mais en fait je n'en demander pas tant lol
Je ne voulez pas changer montrer par cacher car je voulais mettre des boutons
Mais peut-on changer le montrer par cacher dans le bouton ?

Code :

<html><body>
<script type="text/javascript">
function change_calque(elm) {
var div = elm.parentNode.getElementsByTagName('div')[0];
if (div.style.display=="none" ) {
div.style.display = "block";
} else {
div.style.display = "none";
}
}
</script>
<div>
<a href="#" onclick="javascript:change_calque(this)"><input type="button" value="Montrer 1er Texte"></a>
<div style="display:none;">Mon 1er texte caché</div>
</div>
</div>
</br></br></br>
<div>
<a href="#" onclick="javascript:change_calque(this)"><input type="button" value="Montrer 2nd Texte"></a>
<div style="display:none">Mon 2nd texte caché</div>
</div>
</div>
</body></html>

---------------

mIRROR

Chevreuillobolchévik

<a href="#" onclick="javascript:change_calque(this)"><input type="button" value="Montrer 1er Texte"></a>

un peu crade

<input type="button" value="Montrer 1er Texte" onclick="javascript:change_calque(this)">

apres tu reprends mon script mais au lieu de mettre
elm.innerHTML tu mets elm.value

---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell

zlatan40

oui mais en fait ça change "Montrer 1er Texte" par "Cacher" peut-on changer "Montrer 1er Texte" par "Cacher 1er Texte", juste changer Montrer par Cacher
merci

Message cité 1 fois

---------------

mIRROR

Chevreuillobolchévik

zlatan40 a écrit :

oui mais en fait ça change "Montrer 1er Texte" par "Cacher" peut-on changer "Montrer 1er Texte" par "Cacher 1er Texte", juste changer Montrer par Cacher
merci

Code :

<html><body>
<script type="text/javascript">
function change_calque(elm) {
var div = elm.parentNode.getElementsByTagName('div')[0];
var btnText = elm.value;
if (div.style.display=="none" ) {
div.style.display = "block";
elm.value = btnText.replace(/Montrer/,"Cacher" );
} else {
div.style.display = "none";
elm.value = btnText.replace(/Cacher/,"Montrer" );
}
}
</script>
<div>
<input onclick="javascript:change_calque(this);" type="button" value="Montrer 1er Texte" />
<div style="display:none;">Mon 1er texte caché</div>
</div>
<div style="margin-top:20px;">
<input onclick="javascript:change_calque(this);" type="button" value="Montrer 2nd Texte" />
<div style="display:none">Mon 2nd texte caché</div>
</div>
</body></html>

bon je suis de bonne humeur aujourd hui je te le fais, mais tu aurais du le faire toi meme
petite remarque : jamais de <br> pour créer de faux espaces

Message édité par mIRROR le 18-11-2007 à 16:02:50

---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell

zlatan40

Merci c'est impecable !!!

---------------

tawba

Sataneo85 a écrit :

nickel merci !!
pour ceux que ca pourrait intéresser

Code :

<script type="text/javascript">
function change_calque(value)
{
var actual=document.getElementById(value).style.display;
if (document.getElementById(value).style.display=="none" )
{document.getElementById(value).style.display="block";}
else
{document.getElementById(value).style.display="none";}}
</script>
<div id="layer1" style="position:absolute; left:17px; top:55px; width:272px; height:249px; z-index:1; display:none"><img src="images/pdf.png" name="image" width="250" height="250" id="image"></div>
<div id="layer2" style="position:absolute; left:12px; top:14px; width:56px; height:22px; z-index:2"><a href="#" onclick="javascript:change_calque('layer1')">montrer</a></div>

Sataneo85 a écrit :

nickel merci !!
pour ceux que ca pourrait intéresser

Code :

<script type="text/javascript">
function change_calque(value)
{
var actual=document.getElementById(value).style.display;
if (document.getElementById(value).style.display=="none" )
{document.getElementById(value).style.display="block";}
else
{document.getElementById(value).style.display="none";}}
</script>
<div id="layer1" style="position:absolute; left:17px; top:55px; width:272px; height:249px; z-index:1; display:none"><img src="images/pdf.png" name="image" width="250" height="250" id="image"></div>
<div id="layer2" style="position:absolute; left:12px; top:14px; width:56px; height:22px; z-index:2"><a href="#" onclick="javascript:change_calque('layer1')">montrer</a></div>

Bonjour,

Pour afficher plusieurs divs en cliquant sur "montrer" on fait comment??

exple sur la partie html on a

<div id="layer1" style="position:absolute; left:17px; top:55px; width:272px; height:249px; z-index:1; display:none">texte1</div>

<div id="layer2" style="position:absolute; left:17px; top:55px; width:272px; height:249px; z-index:1; display:none">texte2</div>

<div id="layer3" style="position:absolute; left:17px; top:55px; width:272px; height:249px; z-index:1; display:none">texte3<div>

<div id="layer4" style="position:absolute; left:17px; top:55px; width:272px; height:249px; z-index:1; display:none">texte4</div>

etc....

la je bloque??? :

<div id="layer5" style="position:absolute; left:12px; top:14px; width:56px; height:22px; z-index:2"><a href="#" onclick="javascript:change_calque('layer1')">montrer</a></div>

tawba

salut,

la fin c était ca :

<div id="layer4" style="position:static; z-index:2"><a href="#" onClick="javascript:change_calque('layer2'),change_calque('layer1'),change_calque('layer3')"><strong>Mode normal</strong></a></div>

Message édité par tawba le 17-01-2008 à 10:24:09

FORUM HardWare.fr

Programmation

HTML/CSS

Code facon Spoiler

Sujets relatifs
[Résolu] Include PHP mais fixe ... facon iframe (scrollbar)	Code en vb dans Excel -> comment faire un .exe
Afficher du code en couleur dans une page HTML	FckEditor : Nettoyer le code
Le code PHP ne s'affiche plus (tags PHP reconnus comme tags HTML)	Débutant: conversion idée->code
Visual 2005 - faire un exe avec le code source d'un prog d'echecs	Récup code généré par fonction exeCommand
[PHP] Fonction include plus rapide qu'un bout de code dans la page ?	acces restreint par mail et mot de passe : pb dans mon code! help!
Plus de sujets relatifs à : Code facon Spoiler

Page générée en 0.129 secondes