Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
969 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Code facon Spoiler

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Code facon Spoiler

n°1607389
Sataneo85
Posté le 03-09-2007 à 02:27:35  profilanswer
 

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

mood
Publicité
Posté le 03-09-2007 à 02:27:35  profilanswer
 

n°1607652
durkheim
Posté le 03-09-2007 à 15:23:28  profilanswer
 

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";

n°1607674
Sataneo85
Posté le 03-09-2007 à 16:54:12  profilanswer
 

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

n°1607686
durkheim
Posté le 03-09-2007 à 17:40:22  profilanswer
 

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.

n°1607704
Sataneo85
Posté le 03-09-2007 à 18:07:05  profilanswer
 

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
n°1644711
zlatan40
Posté le 18-11-2007 à 13:36:47  profilanswer
 

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>



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

n°1644720
mIRROR
Chevreuillobolchévik
Posté le 18-11-2007 à 13:46:24  profilanswer
 

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
n°1644724
zlatan40
Posté le 18-11-2007 à 13:55:37  profilanswer
 

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


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

n°1644730
mIRROR
Chevreuillobolchévik
Posté le 18-11-2007 à 14:04:46  profilanswer
 

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
n°1644731
zlatan40
Posté le 18-11-2007 à 14:07:56  profilanswer
 

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


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

mood
Publicité
Posté le 18-11-2007 à 14:07:56  profilanswer
 

n°1644739
mIRROR
Chevreuillobolchévik
Posté le 18-11-2007 à 14:17:54  profilanswer
 

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
n°1644753
zlatan40
Posté le 18-11-2007 à 14:49:21  profilanswer
 

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>


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

n°1644763
mIRROR
Chevreuillobolchévik
Posté le 18-11-2007 à 15:07:30  profilanswer
 

<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
n°1644780
zlatan40
Posté le 18-11-2007 à 15:39:54  profilanswer
 

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

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

n°1644785
mIRROR
Chevreuillobolchévik
Posté le 18-11-2007 à 16:02:16  profilanswer
 

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
n°1644789
zlatan40
Posté le 18-11-2007 à 16:11:09  profilanswer
 

Merci c'est impecable !!!


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

n°1669048
tawba
Posté le 10-01-2008 à 15:24:10  profilanswer
 

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>
 
 
 
 
 

n°1672629
tawba
Posté le 17-01-2008 à 10:23:28  profilanswer
 

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

Aller à :
Ajouter une réponse
  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 HTMLFckEditor : 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'echecsRé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

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.116 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR