11548 sujets

JavaScript, DOM et API Web HTML5

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

Mon titre n'est peut etre pas très explicite, je suis désolé Smiley 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-- Smiley fache

Copier coller de mon code : 

<!DOCTYPE html
                   PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
                   "http://www.w3.org/TR/xhtml1/dtD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
      <title>Ma Page</title>

      <script language="JavaScript" type="text/javascript">
      <!-- Script DHTML by SnowKhan -->
      function show_hide(bloc,blocimg)
      {
            elt=document.getElementById(bloc);
            if (elt.style.display == 'none') {
                  document.getElementById(bloc).style.display='block';
                  document.getElementById(blocimg).src='images/deplier.jpg';
            }
            else {
                  document.getElementById(bloc).style.display='none';
                  document.getElementById(blocimg).src='images/plier.jpg';
            }
      }
      </script>

</head>

<body>

      <a href="javascript:void(0);" onclick="show_hide('mon_bloc','icone');">
           <img id="icone" src="images/deplier.jpg" border="0" />
           <strong>Header du bloc</strong>
      </a>

      <div id="mon_bloc" style="display:none">
           Au chargement de la page le block est caché, <br />
           si on veut qu'il soit visible par défaut, <br />
           il suffit de mettre "display:block" dans le champ "style"
      </div>

</body>

</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
Bonjour

Sous IE6 avec ton code, je n'ai pas eu de problème d'affichage, ni de décalage.

autrement, tu as aussi cette solution : 
<!DOCTYPE html
                   PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
                   "http://www.w3.org/TR/xhtml1/dtD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<style type="text/css">
#titre {
     display:block;
	font-weight:bold;
	background-image:url('images/plier.gif');
	background-repeat:no-repeat;
	padding-left:20px;
	line-height:20px;
}
</style>

<head>
      <title>Ma Page</title>

      <script language="JavaScript" type="text/javascript">

      <!-- Script DHTML by SnowKhan -->
      function show_hide(obj,bloc)
      {
            elt=document.getElementById(bloc);

            if (elt.style.display == 'none') {
                  elt.style.display='block';
                  obj.style.backgroundImage='url(images/deplier.gif)';
            }
            else {

                  elt.style.display='none';
                  obj.style.backgroundImage='url(images/plier.gif)';
            }
      }
      </script>
</head>

<body>

<div onclick="show_hide(this,'mon_bloc');" id="titre">
           Header du bloc
</div>
      <div id="mon_bloc" style="display:none">
           Au chargement de la page le block est caché, <br />
           si on veut qu'il soit visible par défaut, <br />
           il suffit de mettre "display:block" dans le champ "style"
      </div>

</body>
</html>
Je m'en suis sorti avec ta méthode, merci beaucoup !

(mais je trouve quand même curieux que mon code fonctionne bien chez toi, au boulot j'ai testé sur 2 machines différentes, toutes deux équipées d'IE6, et ça bugguait Smiley confus )

merci encore !
Sujet clos
Aller à