Comment faire pour afficher/masquer une image en cliquant sur un lien?

Comment faire pour afficher/masquer une image en cliquant sur un lien? - HTML/CSS - Programmation

Marsh Posté le 10-04-2003 à 20:57:22    

J'aimerais pouvoir afficher une petite image en cliquant sur un lien. Attention, je ne veux pas une fenetre qui s'ouvre... je veux que l'image soit affichée sur la meme page, sans "refresh" de la page non plus.
 
Je pense qu'il faut utiliser un DIV avec la fonction HIDDEN... mais je ne sais plus comment on fait pour l'afficher ou le masquer ...
 
Merci de m'aider :)


---------------
Gamertag: CoteBlack YeLL
Reply

Marsh Posté le 10-04-2003 à 20:57:22   

Reply

Marsh Posté le 10-04-2003 à 21:04:15    

En gros :
 

Code :
  1. monImage = document.getElementById("monImage" );
  3. if (monImage.style.display != "none" ) {
  4.     monImage.style.display = "none";
  5. } else {
  6.     monImage.style.display = "block";
  7. }


 
A la place de "block" tu peux mettre "inline" (tout dépend comment tu utilises ton image)
 
Attention avec "display" lorsque l'image est affichée elle déplace le reste du document (s'il y a quelque chose à déplacer). Si tu veux "réserver" la place de l'image, alors il faut jouer sur la propriéré "visibility" (hidden|visible).


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 10-04-2003 à 21:13:19    

Code plus rapide :
 

<html>
<head>
 <title>Test</title>
</head>
<body>
<a href="#" onclick="document.getElementById('monImage').src =  
 
'tonImage.jpg';document.getElementById('monImage').style.visibility='visible';">Afficher l'image</a>
<img id="monImage" src="pixtrans.gif" style="visibility='hidden';">
</body>
</html>


Avec pixtrans.gif = une image gif de 1x1 transparente (évite de charger l'image dès le départ)


Message édité par MagicBuzz le 10-04-2003 à 21:14:18
Reply

Marsh Posté le 10-04-2003 à 21:15:33    

Euh ... je fais koi avec ça ? Je le met où ? Et il est où le lien vers l'image ? Et le lien sur lequel cliquer pour afficher ou masquer l'image ?  :whistle:  
 
 
C pas que j'y connais rien en JS mais ... ah ben si, j'y connais rien en JS :D


---------------
Gamertag: CoteBlack YeLL
Reply

Marsh Posté le 10-04-2003 à 21:16:37    

bah y'a le code complet de la page... si t'arrive pas à retrouver où est le lien et l'image, y'a du souci à se faire quand même :sarcastic:

Reply

Marsh Posté le 10-04-2003 à 21:19:29    

MagicBuzz a écrit :

Code plus rapide :
 
[...]
 
Avec pixtrans.gif = une image gif de 1x1 transparente (évite de charger l'image dès le départ)


Avec ma méthode l'image est chargé dès le départ puisqu'elle est dans le code HTML. C'est juste qu'elle n'est pas affichée ;)


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 10-04-2003 à 21:20:34    

MagicBuzz a écrit :

bah y'a le code complet de la page... si t'arrive pas à retrouver où est le lien et l'image, y'a du souci à se faire quand même :sarcastic:


 
Mon message ne s'adressait pas a toi, mais a gm_superstar... :sarcastic:


---------------
Gamertag: CoteBlack YeLL
Reply

Marsh Posté le 10-04-2003 à 21:22:18    

Dj YeLL a écrit :

Euh ... je fais koi avec ça ? Je le met où ? Et il est où le lien vers l'image ? Et le lien sur lequel cliquer pour afficher ou masquer l'image ?  :whistle:  
 
 
C pas que j'y connais rien en JS mais ... ah ben si, j'y connais rien en JS :D


 
Le code pour l'image, il faut qu'elle ait un attribut (unique) id="" : <img src="..." id="monImage" ... />
 
Le code pour le lien <a href="..." onclick="swap();">
 
Le code que j'ai posté plus haut tu le mets dans une fonction :
 

function swap() {
 ...
}


 
 
Et voilà :)


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 10-04-2003 à 21:29:55    

Ca marche pas :(
 
Voila mon code en entier :
 

Code :
  1. <html>
  2.   <head>
  3.     <title>
  4.       Test
  5.     </title>
  6.   </head>
  7.   <body>
  8. <script language="javascript">
  9. function swap() {
  10.   monImage = document.getElementById("monImage" );
  11.  
  12.   if (monImage.style.display != "none" ) {
  13.         monImage.style.display = "none";
  14.     } else {
  15.         monImage.style.display = "block";
  16.   }
  17. }
  18. </script>
  19.     <a href=# onclick='swap();'>
  20.       Cliquez ici</a>
  21.     <img src="test.gif" id="monImage" />
  22.   </body>
  23. </html>


 
Quand je charge la page il y a bien le lien et l'image ... mais quand je clique sur le lien j'ai l'erreur suivante :
 
Ligne: 10
Car : 3
Erreur : Propriété ou méthode non gérée par cet objet
Code : 0
 


---------------
Gamertag: CoteBlack YeLL
Reply

Marsh Posté le 10-04-2003 à 21:30:35    

MagicBuzz, pour ce qui est de ton code, ça marche, mais le pb et que lorsqu'on reclique sur le lien ca ne masque pas l'image...


---------------
Gamertag: CoteBlack YeLL
Reply

Marsh Posté le 10-04-2003 à 21:30:35   

Reply

Marsh Posté le 10-04-2003 à 21:33:01    

J'ai trouvé un script qui marche :
 

Code :
  1. <script language="javascript" type="text/javascript">
  2. var supported = (document.getElementById || document.all);
  4. if (supported)
  5. {
  6. document.write("<STYLE TYPE='text/css'>" );
  7. document.write(".para {display: none}" );
  8. document.write("</STYLE>" );
  10. var max = 7;
  11. var shown = new Array();
  12. for (var i=1;i<=max;i++)
  13. {
  14.  shown[i+1] = false;
  15. }
  17. }
  19. function blocking(i)
  20. {
  21. if (!supported)
  22. {
  23.  alert('This link does not work in your browser.');
  24.  return;
  25. }
  26. shown[i] = (shown[i]) ? false : true;
  27. current = (shown[i]) ? 'block' : 'none';
  28. if (document.getElementById)
  29. {
  30.  document.getElementById('number'+i).style.display = current;
  31. }
  32. else if (document.all)
  33. {
  34.  document.all['number'+i].style.display = current;
  35. }
  36. }
  37. </script>
  39. <P CLASS="head">
  40. <A HREF="#" onClick="blocking(1); return false">About JavaScript</A></P>
  42. <P CLASS="para" ID="number1">
  43. [The actual links]
  44. </P>


 
:)


---------------
Gamertag: CoteBlack YeLL
Reply

Marsh Posté le 10-04-2003 à 21:35:06    

Ah oui, cette m**de d'IE ne supporte pas que la variable est le même nom que l'id de l'image. Donc :
 

image = document.getElementById("monImage" );


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 10-04-2003 à 21:48:40    

Ok, merci !!
 
Voila donc le code :
 

Code :
  1. <html>
  2.   <head>
  3.     <title>
  4.       Test
  5.     </title>
  6.   </head>
  7.   <body>
  8.   <script language="javascript">
  9.   function swap()
  10.   {
  11.   image = document.getElementById("monImage" );
  12.     if (monImage.style.display != "none" )
  13.     {
  14.       monImage.style.display = "none";
  15.     }
  16.     else
  17.     {
  18.       monImage.style.display = "block";
  19.     }
  20.   }
  21. </script>
  23. <a href=# onclick="swap();">Cliquez ici</a><img src="test.gif" id="monImage" />
  24. </body>
  25. </html>


 
C preske parfait ... Le seul probleme est que je n'arrive pas afficher l'image a coté du texte ... quand j'ouvre la page elle est bien collée au texte, quand je clique sur le lien elle disparait, mais si je reclique sur le lien, elle reapparait a la ligne, sous la texte ... comment cela se fesse ?


---------------
Gamertag: CoteBlack YeLL
Reply

Marsh Posté le 10-04-2003 à 21:53:45    

Dans ce cas tu mets "inline" au lieu de "block"


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 10-04-2003 à 21:55:56    

Ahhhh, c t donc ça ... Ca marche nickel maintenant !! :) Merci bcp !


---------------
Gamertag: CoteBlack YeLL
Reply

Sujets relatifs:

Leave a Replay

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