Sujet Précédent Sujet Suivant

Superposition d'images : FF vs IE

Résolu/Fermé
Charts - 2 déc. 2007 à 21:06
 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.

11 réponses

Réponse 1 / 11
s.spark Messages postés 2485 Date d'inscription vendredi 29 octobre 2004 Statut Contributeur Dernière intervention 13 février 2018 618
2 déc. 2007 à 22:29
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
Réponse 2 / 11
Charts
2 déc. 2007 à 22:44
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
Réponse 3 / 11
s.spark Messages postés 2485 Date d'inscription vendredi 29 octobre 2004 Statut Contributeur Dernière intervention 13 février 2018 618
2 déc. 2007 à 21:09
Salut,

Essais de les mettre en position absolute.
0
Réponse 4 / 11
Charts
2 déc. 2007 à 21:23
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

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 vendredi 29 octobre 2004 Statut Contributeur Dernière intervention 13 février 2018 618
2 déc. 2007 à 21:27
Je ne sais pas, mais c'est difficile de trouver une solution à ton problème sans contexte.
0
Réponse 6 / 11
Charts
2 déc. 2007 à 21:32
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
Réponse 7 / 11
s.spark Messages postés 2485 Date d'inscription vendredi 29 octobre 2004 Statut Contributeur Dernière intervention 13 février 2018 618
2 déc. 2007 à 22:17
Je parlais de contexte HTML, un lien quoi.
0
Réponse 8 / 11
Charts
2 déc. 2007 à 22:20
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
Réponse 9 / 11
namaskar
28 mars 2008 à 12:49
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
Réponse 10 / 11
EGALiSE
21 avril 2008 à 12:14
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
Réponse 11 / 11
Charts
21 avril 2008 à 21:05
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

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

3 réponses
voir ses images enregistrés
bastUltra -
bastUltra -

2 réponses
ou sont enregistrées les images
RAKAMA -
mathejea -

4 réponses
code couleur associé a une image
magic charly -
pandora -

9 réponses
récupérer des images et vidéos enregistrées sur facebook
karamel24 -
karamel24 -

3 réponses