Superposition d'images : FF vs IE

Résolu

Charts -
Charts - 21 avril 2008 à 21:05

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.

Afficher la suite

A voir également:

Superposition d'images : FF vs IE
Des images - Guide
Extraire images pdf - Guide
Images enregistrées - Forum Bureautique
Recherche images - Guide
4 images 1 mot niveau 10 chaperon rouge ✓ - Forum Jeux vidéo

11 réponses

Réponse 1 / 11

s.spark Messages postés 2485 Date d'inscription Statut Contributeur Dernière intervention 618

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.

Réponse 2 / 11

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 !!

Réponse 3 / 11

s.spark Messages postés 2485 Date d'inscription Statut Contributeur Dernière intervention 618

Salut,

Essais de les mettre en position absolute.

Réponse 4 / 11

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 ?

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 11

s.spark Messages postés 2485 Date d'inscription Statut Contributeur Dernière intervention 618

Je ne sais pas, mais c'est difficile de trouver une solution à ton problème sans contexte.

Réponse 6 / 11

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 :-(

Réponse 7 / 11

s.spark Messages postés 2485 Date d'inscription Statut Contributeur Dernière intervention 618

Je parlais de contexte HTML, un lien quoi.

Réponse 8 / 11

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 ?

Réponse 9 / 11

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

Réponse 10 / 11

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

Réponse 11 / 11

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.

Discussions similaires

ou sont enregistrées les images

comment fairte apparaître lisiblement les images enregistrées su

voir ses images enregistrés

calcule nombre des pixels "noir" dans un image (noir/blanc)

récupérer des images et vidéos enregistrées sur facebook

Votre réponse

Discussions similaires