Superposition d'images : FF vs IE

Résolu
Charts -  
Bonjour,

J'ai besoin d'afficher des images gif superposées (deux dans l'exemple, mais je dois pouvoir en faire davantage), de manière relative. J'ai trouvé un moyen d'y parvenir, avec quelque chose du genre :

.layera { position:relative; top:0px; left:0px; width:40px; height:40px; visibility:show; z-index:0;}
.layerb { position:relative; top:-40px; left:0px; width:0px; height:0px; visibility:show; z-index:1;

Malheureusement, ça ne fonctionne que sous FF . IE (testé sous IE6) semble ignorer les paramètres width et height.
La page en question est ici :
http://charts.free.fr/superpose.html
Et le résultat (différent) sur les deux navigateurs :

http://charts.free.fr//img/map/IE.png
http://charts.free.fr//img/map/FF.png

Quelqu'un sait-il comment rectifier ce défaut sous IE ? Ou bien quelqu'un a peut-etre une solution différente qui fonctionne dans les deux cas ? Merci beaucoup.
Configuration: Windows XP
Firefox 2.0.0.11

11 réponses

  1. s.spark Contributeur
    ok je comprend ...

    "j'ai besoin de le faire de manière relative, ça me parait plus propre et ça évite les calculs de pixels en tous sens."

    Si tu mets en position relative le block parent des images et si tu mets en position absolute les image, celle-ci seront positionné par rapporte au block en relative et plus par rapport au coin en haut à gauche de navigateur.
    3
    1. Charts
      Merci, voilà l'info qu'il me manquait : j'ignorais que l'origine avec ' position: absolute' pouvait être un autre élément !

      Voilà donc un exemple qui fonctionne dans les deux navigateurs :

      <html>
      <head>
      <title>Superposition</title>
      <style type="text/css">
      .dlayer { position:relative; }
      .dlayera { position:absolute; top:0px; left:0px; visibility:show; z-index:0;}
      .dlayerb { position:absolute; top:0px; left:0px; visibility:show; z-index:1;}
      .dlayerc { position:absolute; top:0px; left:0px; visibility:show; z-index:2;}
      </style>
      </head>
      <body>
      <tt>Images superposées :</tt>
      <div class="dlayer">
      <div class="dlayera"><img src="img/map/01.gif" /></div>
      <div class="dlayerb"><img src="img/map/03.gif" /></div>
      <div class="dlayerc"><img src="img/map/04.gif" /></div>
      </div>
      </body>
      </html>

      Merci beaucoup pour ton aide, s. spark !!
      1
      1. s.spark Contributeur
        Salut,

        Essais de les mettre en position absolute.
        0
        1. Charts
          J'ai besoin de le faire de manière relative, ça me parait plus propre et ça évite les calculs de pixels en tous sens. C'est un problème connu ?
          0
          2. s.spark Contributeur
            Je ne sais pas, mais c'est difficile de trouver une solution à ton problème sans contexte.
            0
            1. Charts
              En pratique, j'aurais besoin de ça pour générer des cartes dynamiques : j'ai des petites images de 40x40 que j'affiche dans un tableau, mais il doit être possible d'ajouter des informations en plus. C'est un peu un système de calque. J'ai développé ça en testant sous FF, mais à présent j'ajuste tout ça pour que IE fonctionne aussi, et j'ai ce problème bizarre :-(
              0
              1. s.spark Contributeur
                Je parlais de contexte HTML, un lien quoi.
                0
                1. Charts
                  Le lien que j'ai mis en exemple ne suffit pas (http://charts.free.fr/superpose.html) ? J'ai justement essayé de simplifier la page au maximum. Tu voudrais un exemple avec un tableau complet ?
                  0
                  1. namaskar
                    Bonjour,

                    J'ai suivi avec attention les moults explications concernant la superposition simple de 2 images gif sur une page contenu html.
                    Il me semblait qu'avec un background suivi d'une img src ca pouvait fonctionner... qu'en pensent les experts (je suis noté sur l'originalité de mon site début avril).

                    D'avance merci.

                    Cyrille
                    0
                    1. EGALiSE
                      Bonjour

                      ce post m'a bien aidé, j'ai essayé de l'améliorer et çà fonctionne parfaitement sous FF 2 & IE 7:

                      en ajoutant un survol 
                      <html>
<head>
<title>Superposition</title>
<style type="text/css">
.dlayer { position:relative; }
.dlayera {
	position:absolute;
	top:0;
	left:0;
	visibility:show;
	z-index:0;
}
.dlayerb { position:absolute; top:0px; left:150px; visibility:show; z-index:1;}
.dlayerc {
	position:absolute;
	top:339px;
	left:455px;
	visibility:show;
	z-index:2;
}
</style>
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body onLoad="MM_preloadImages('images/rollover.gif')">
<div class="dlayer">
<div class="dlayera"><img src="images/1e.jpg" border="0" /></div>
<div class="dlayerb"><img src="images/2e.jpg" border="0" /></div>
<div class="dlayerc"><a href="http://www.lienclique.com" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','images/rollover.gif',1)"><img name="Image3" border="0" src="images/original.gif"></a></div>
</div>
</body>
</html>


                      En ajoutant du javascript, fenêtre (pseudo popup) 
                      <html>
<head>
<title>Superposition</title>
<style type="text/css">
.dlayer { position:relative; }
.dlayera {
	position:absolute;
	top:0;
	left:0;
	visibility:show;
	z-index:0;
}
.dlayerb { position:absolute; top:0px; left:150px; visibility:show; z-index:1;}
.dlayerc {
	position:absolute;
	top:339px;
	left:455px;
	visibility:show;
	z-index:2;
}
</style>
</head>
<body>
<div class="dlayer">
<div class="dlayera"><img src="images/1e.jpg" border="0" /></div>
<div class="dlayerb"><img src="images/2e.jpg" border="0" /></div>
<div class="dlayerc"><script type="text/javascript">
            document.write('<a href="javascript:void window.open(\'http://www.votredomaine.com/votre_image.jpg\', \'win2\', \'status=no,toolbar=no,scrollbars=yes,titlebar=no,menubar=no,resizable=yes,width=1120,height=1118,directories=no,location=no\');" title=""><img src="http://www.votredomaine.com/miniature_de_votre_image.jpg"  width="200" title="" border="0" /></a>');</script></div>
</div>
</body>
</html>


                      http://www.egalise.com
                      0
                      1. Charts
                        Pour ceux qui voudraient faire un roll-over sans javascript, je vous invite à jeter un oeil au lien suivant :
                        https://www.alsacreations.com/apprendre/

                        Bien pratique pour les roll-over classiques (menus, etc...), avec l'avantage qu'il n'y a pas de délai
                        de chargement de la seconde image.
                        0

                        Discussions similaires

                        ads by images+
                        Fildyr

                        5 réponses
                        calcule nombre des pixels "noir" dans un image (noir/blanc)
                        neji55

                        3 réponses
                        superposition d'images dans Word
                        eva0

                        13 réponses
                        4 images 1 mot
                        Helene

                        5 réponses