Problème Aff/cacher un div : l'image ok sous FF mais pas sur IE

Problème Aff/cacher un div : l'image ok sous FF mais pas sur IE - HTML/CSS - Programmation

Marsh Posté le 13-01-2006 à 12:05:56    

Mon titre n'est peut etre pas très explicite, je suis désolé  [ohwell]  
 
Voila mon soucis : j'ai un div qui s'affiche ou se cache en cliquant sur un lien (le javascript standard qui agit sur la propriété display du div que tout le monde connait bien).
 
A l'intérieur de ce lien j'ai voulu mettre une petite image qui est un "plus" quand le bloc est caché, et un "moins" quand le bloc est visible (plier / déplier quoi !).
 
Sous Firefox et Opera mon code fonctionne très bien, mais sous IE l'image s'affiche 1 fois sur 10 et décale toute la mise en page.  
 
Pouvez vous m'aider à trouver une solution avant que je m'énerve vraiment contre cette --biiip-- de navigateur de --biiiip--  [fache]  
 
Copier coller de mon code :  
 

Code :
  1. <!DOCTYPE html
  2.                    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  3.                    "http://www.w3.org/TR/xhtml1/dtD/xhtml1-transitional.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml">
  6. <head>
  7.       <title>Ma Page</title>
  9.       <script language="JavaScript" type="text/javascript">
  10.       <!-- Script DHTML by SnowKhan -->
  11.       function show_hide(bloc,blocimg)
  12.       {
  13.             elt=document.getElementById(bloc);
  14.             if (elt.style.display == 'none') {
  15.                   document.getElementById(bloc).style.display='block';
  16.                   document.getElementById(blocimg).src='images/deplier.jpg';
  17.             }
  18.             else {
  19.                   document.getElementById(bloc).style.display='none';
  20.                   document.getElementById(blocimg).src='images/plier.jpg';
  21.             }
  22.       }
  23.       </script>
  25. </head>
  27. <body>
  29.       <a href="javascript:void(0);" onclick="show_hide('mon_bloc','icone');">
  30.            <img id="icone" src="images/deplier.jpg" border="0" />
  31.            <strong>Header du bloc</strong>
  32.       </a>
  34.       <div id="mon_bloc" style="display:none">
  35.            contenu de mon bloc
  36.       </div>
  38. </body>
  40. </html>


 
Les deux petites images sont là :  
 
plier.jpg : http://img62.imageshack.us/img62/4830/plier9kk.jpg
deplier.jpg : http://img69.imageshack.us/img69/8775/deplier9sm.jpg

Reply

Marsh Posté le 13-01-2006 à 12:05:56   

Reply

Marsh Posté le 13-01-2006 à 12:19:01    

C'est un hack à la con, mais voilà ce que j'ai fait au boulot pour une page d'administration qu'avait ce genre de probléme :
element.innerHTML=element.innerHTML
 
Traduction : on remplace l'html du coup IE se rend compte que cette partie de la page à changé et il la met à jours.

Reply

Marsh Posté le 13-01-2006 à 12:45:57    

Merci beaucoup, cela a résolu à moitié mon problème : il n'y a plus de décalage de mise en page, en revanche l'image ne s'affiche toujours pas

Reply

Marsh Posté le 13-01-2006 à 14:15:50    

T'es sur que IE va chercher l'image où il faut?  

  • image dans le bon dossier : par défaut, le dossier images situé dans celui de la page html modifié par le javascript
  • pas de différence minuscule/majuscule entre le nom réel et celui indiqué par le javascript.

Reply

Marsh Posté le 13-01-2006 à 15:04:12    

Oui j'ai bien vérifié les paths, et puis sous Firefox et Opera cela fonctionne bien, donc je pense pas qu'il s'agisse d'un problème comme ça. D'ailleurs en faisant clic droit + afficher l'image (sous IE6), l'image apparait bien.

Reply

Marsh Posté le 13-01-2006 à 15:55:43    

j'ai essayé une méthode différente, en settant les icones en background par CSS au lieu d'insérer l'image en html, et ça fonctionne
 
merci quand même pour ton aide omega !

Reply

Sujets relatifs:

Leave a Replay

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