Code facon Spoiler

Code facon Spoiler - HTML/CSS - Programmation

Marsh Posté le 03-09-2007 à 02:27:35    

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

Code :
  1. <script type="text/javascript">
  2. function montrer_spoiler(value) {
  3. var actual=document.getElementById(value).style.visibility;
  4. if (actual=='visible') {
  5.  document.getElementById(value).style.visibility='hidden';
  6. } else {
  7.  document.getElementById(value).style.visibility='visible';
  8. }
  9. }
  10. </script>
  11. <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}
  12. </div></td></tr></tbody></table></div>


ce qui donne ca http://sataneo.free.fr/essai.htm
 
2er exemple (presque parfait)

Code :
  1. <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>
  3. <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>
  5. <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

Reply

Marsh Posté le 03-09-2007 à 02:27:35   

Reply

Marsh Posté le 03-09-2007 à 15:23:28    

Ben c'est simple.
 
En javascript:

Code :
  1. if (document.getElementById('layer1').style.display=="none" )
  2. document.getElementById('layer1').style.display="block";
  3. else
  4. document.getElementById('layer1').style.display="none";

Reply

Marsh Posté le 03-09-2007 à 16:54:12    

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

Reply

Marsh Posté le 03-09-2007 à 17:40:22    

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.

Reply

Marsh Posté le 03-09-2007 à 18:07:05    

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

Code :
  1. <script type="text/javascript">
  2. function change_calque(value)
  3. {
  4. var actual=document.getElementById(value).style.display;
  5. if (document.getElementById(value).style.display=="none" )
  6. {document.getElementById(value).style.display="block";}
  7.     else
  8.     {document.getElementById(value).style.display="none";}}
  9. </script>
  11. <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>
  13. <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
Reply

Marsh Posté le 18-11-2007 à 13:36:47    

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

Code :
  1. <html><body>
  2. <script type="text/javascript">
  3. function change_calque(value) {
  4. var actual=document.getElementById(value).style.display;
  5. if (document.getElementById(value).style.display=="none" ) {
  6. document.getElementById(value).style.display="block";}
  7. else {
  8. document.getElementById(value).style.display="none";
  9. }
  10. }
  11. </script>
  12. <div id="layer1" style="position:absolute; left:17px; top:55px; width:272px; height:249px; z-index:1; display:none">Mon texte ici</div>
  13. <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>
  14. </body></html>



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

Reply

Marsh Posté le 18-11-2007 à 13:46:24    

Code :
  1. <html><body>
  2. <script type="text/javascript">
  3. function change_calque(elm) {
  4.         var div = elm.parentNode;
  5.         div.style.display = div.style.display=="none" ? "block" : "none";
  6. }
  7. </script>
  8. <div style="position:absolute; left:17px; top:55px; width:272px; height:249px; z-index:1; display:none">Mon texte ici</div>
  9. <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>
  10. </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
Reply

Marsh Posté le 18-11-2007 à 13:55:37    

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


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

Reply

Marsh Posté le 18-11-2007 à 14:04:46    

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
Reply

Marsh Posté le 18-11-2007 à 14:07:56    

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 ??


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

Reply

Marsh Posté le 18-11-2007 à 14:07:56   

Reply

Marsh Posté le 18-11-2007 à 14:17:54    

voila c etait ma faute dsl :jap:

 
Code :
  1. <html><body>
  2. <script type="text/javascript">
  3. function change_calque(elm) {
  4. var div = elm.parentNode.getElementsByTagName('div')[0];
  5. if (div.style.display=="none" ) {
  6.  div.style.display = "block";
  7.  elm.innerHTML = "Cacher";
  8. } else {
  9.  div.style.display = "none";
  10.  elm.innerHTML = "Montrer";
  11. }
  12. }
  13. </script>
  14. <div>
  15. du texte normal
  16. <div>
  17.  <a href="#" onclick="javascript:change_calque(this)">Montrer</a>
  18.  <div style="display:none;">Mon texte caché</div>
  19. </div>
  20. </div>
  21. <div>
  22. du texte normal
  23. <div>
  24.  <a href="#" onclick="javascript:change_calque(this)">Montrer</a>
  25.  <div style="display:none">Mon texte caché</div>
  26. </div>
  27. </div>
  28. </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
Reply

Marsh Posté le 18-11-2007 à 14:49:21    

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 :
  1. <html><body>
  2. <script type="text/javascript">
  3. function change_calque(elm) {
  4. var div = elm.parentNode.getElementsByTagName('div')[0];
  5. if (div.style.display=="none" ) {
  6. div.style.display = "block";
  7. } else {
  8. div.style.display = "none";
  9. }
  10. }
  11. </script>
  12. <div>
  13. <a href="#" onclick="javascript:change_calque(this)"><input type="button" value="Montrer 1er Texte"></a>
  14. <div style="display:none;">Mon 1er texte caché</div>
  15. </div>
  16. </div>
  17. </br></br></br>
  18. <div>
  19. <a href="#" onclick="javascript:change_calque(this)"><input type="button" value="Montrer 2nd Texte"></a>
  20. <div style="display:none">Mon 2nd texte caché</div>
  21. </div>
  22. </div>
  23. </body></html>


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

Reply

Marsh Posté le 18-11-2007 à 15:07:30    

<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
Reply

Marsh Posté le 18-11-2007 à 15:39:54    

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

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

Reply

Marsh Posté le 18-11-2007 à 16:02:16    

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 :
  1. <html><body>
  2. <script type="text/javascript">
  3. function change_calque(elm) {
  4. var div = elm.parentNode.getElementsByTagName('div')[0];
  5. var btnText = elm.value;
  6. if (div.style.display=="none" ) {
  7.  div.style.display = "block";
  8.  elm.value = btnText.replace(/Montrer/,"Cacher" );
  9. } else {
  10.  div.style.display = "none";
  11.  elm.value = btnText.replace(/Cacher/,"Montrer" );
  12. }
  13. }
  14. </script>
  15. <div>
  16. <input onclick="javascript:change_calque(this);" type="button" value="Montrer 1er Texte" />
  17. <div style="display:none;">Mon 1er texte caché</div>
  18. </div>
  20. <div style="margin-top:20px;">
  21. <input onclick="javascript:change_calque(this);" type="button" value="Montrer 2nd Texte" />
  22. <div style="display:none">Mon 2nd texte caché</div>
  23. </div>
  25. </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
Reply

Marsh Posté le 18-11-2007 à 16:11:09    

Merci c'est impecable !!!


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

Reply

Marsh Posté le 10-01-2008 à 15:24:10    

Sataneo85 a écrit :

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

Code :
  1. <script type="text/javascript">
  2. function change_calque(value)
  3. {
  4. var actual=document.getElementById(value).style.display;
  5. if (document.getElementById(value).style.display=="none" )
  6. {document.getElementById(value).style.display="block";}
  7.     else
  8.     {document.getElementById(value).style.display="none";}}
  9. </script>
  11. <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>
  13. <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 :
  1. <script type="text/javascript">
  2. function change_calque(value)
  3. {
  4. var actual=document.getElementById(value).style.display;
  5. if (document.getElementById(value).style.display=="none" )
  6. {document.getElementById(value).style.display="block";}
  7.     else
  8.     {document.getElementById(value).style.display="none";}}
  9. </script>
  11. <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>
  13. <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>
 
 
 
 
 

Reply

Marsh Posté le 17-01-2008 à 10:23:28    

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
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed