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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°358202
Dj YeLL
$question = $to_be || !$to_be;
Posté le 10-04-2003 à 20:57:22  profilanswer
 

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
mood
Publicité
Posté le 10-04-2003 à 20:57:22  profilanswer
 

n°358207
gm_superst​ar
Appelez-moi Super
Posté le 10-04-2003 à 21:04:15  profilanswer
 

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
n°358215
MagicBuzz
Posté le 10-04-2003 à 21:13:19  profilanswer
 

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
n°358218
Dj YeLL
$question = $to_be || !$to_be;
Posté le 10-04-2003 à 21:15:33  profilanswer
 

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
n°358219
MagicBuzz
Posté le 10-04-2003 à 21:16:37  profilanswer
 

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:

n°358225
gm_superst​ar
Appelez-moi Super
Posté le 10-04-2003 à 21:19:29  profilanswer
 

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
n°358226
Dj YeLL
$question = $to_be || !$to_be;
Posté le 10-04-2003 à 21:20:34  profilanswer
 

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
n°358227
gm_superst​ar
Appelez-moi Super
Posté le 10-04-2003 à 21:22:18  profilanswer
 

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
n°358237
Dj YeLL
$question = $to_be || !$to_be;
Posté le 10-04-2003 à 21:29:55  profilanswer
 

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
n°358239
Dj YeLL
$question = $to_be || !$to_be;
Posté le 10-04-2003 à 21:30:35  profilanswer
 

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
mood
Publicité
Posté le 10-04-2003 à 21:30:35  profilanswer
 

n°358241
Dj YeLL
$question = $to_be || !$to_be;
Posté le 10-04-2003 à 21:33:01  profilanswer
 

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
n°358249
gm_superst​ar
Appelez-moi Super
Posté le 10-04-2003 à 21:35:06  profilanswer
 

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
n°358271
Dj YeLL
$question = $to_be || !$to_be;
Posté le 10-04-2003 à 21:48:40  profilanswer
 

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
n°358281
gm_superst​ar
Appelez-moi Super
Posté le 10-04-2003 à 21:53:45  profilanswer
 

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
n°358285
Dj YeLL
$question = $to_be || !$to_be;
Posté le 10-04-2003 à 21:55:56  profilanswer
 

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


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

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 

Sujets relatifs
virer la barre de titre de IE, dessiner sur une image[HTML] Comment n'afficher que les bordures intérieures ?
taille & dimensions d'une image[OpenGL][wxWindows] Afficher de l'open GL dans une fenêtre wxWindows
[JAVA] afficher une liste de noms de classes[CSS] mon image change de taille suivant le navigateur ...
[HTML] Lien vers une page et un cadre précis.[PHP] Afficher dans boucle les caract de 3 objets de même type ...
Image cliquable[CSS] repéter une image de fond : keskivapa ?
Plus de sujets relatifs à : Comment faire pour afficher/masquer une image en cliquant sur un lien?

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

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