Problème d'affichage entre firefox et IE
Résolu
bebe28
Messages postés
147
Date d'inscription
Statut
Membre
Dernière intervention
-
bebe28 Messages postés 147 Date d'inscription Statut Membre Dernière intervention -
bebe28 Messages postés 147 Date d'inscription Statut Membre Dernière intervention -
Bonjour, j'ai créé une page d'accueil avec la balise <map> pour faire apparaître d'autres images lors du survol des zones sensibles et des liens lors des clics.
Sous firefox, aucun soucis, les liens et images fonctionnent. Mais ce n'est que sous ce navigateur... IE, Google Chrome et Konqueror n'affichent que la page principale sans zone sensible, bien qu'apparemment les autres images se préchargent comme prévu au début.
D'ou vient le soucis? Et pourquoi ça ne fonctionne que sous firefox?
Une solution?
Je vous affiche mon code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title> </title>
<style type="text/css">
body{margin:0;}
</style>
<script language="javascript" type="text/javascript">
// cr�ation d'une liste
mesImages = Array();
// pr�chargement des images
mesImages[0] = new Image();
mesImages[0].src="sommaire.png";
mesImages[1] = new Image();
mesImages[1].src="sommaire1.png";
mesImages[2] = new Image();
mesImages[2].src="sommaire2.png";
mesImages[3] = new Image();
mesImages[3].src="sommaire3.png";
mesImages[4] = new Image();
mesImages[4].src="sommaire4.png";
mesImages[5] = new Image();
mesImages[5].src="sommaire5.png";
mesImages[6] = new Image();
mesImages[6].src="sommaire6.png";
// fonction de changement de l'image
function changeImage(n){
document.imageCentrale.src = mesImages[n].src;
}
</script>
</head>
<body>
<table width="100%" height="100% border="1">
<tr>
<td align="center" valign="middle"><img src="/spip/IMG/png/sommaire.png" width="900" height="600" border="0" usemap="#Map" name="imageCentrale" /></td>
</tr>
</table>
<map name="Map">
<area shape="circle" coords="132,229,50" href="?rubrique=1" onMouseOver="changeImage(1)" onMouseLeave="changeImage(0);">
<area shape="circle" coords="244,311,50" href="?rubrique=2" onMouseOver="changeImage(2)" onMouseLeave="changeImage(0);">
<area shape="circle" coords="366,241,52" href="?rubrique=3" onMouseOver="changeImage(3)" onMouseLeave="changeImage(0);">
<area shape="circle" coords="493,320,50" href="?rubrique=4" onMouseOver="changeImage(4)" onMouseLeave="changeImage(0);">
<area shape="circle" coords="599,209,50" href="?rubrique=5" onMouseOver="changeImage(5)" onMouseLeave="changeImage(0);">
<area shape="circle" coords="733,331,48" href="?rubrique=6" onMouseOver="changeImage(6)" onMouseLeave="changeImage(0);">
</map></body>
</html>
Sous firefox, aucun soucis, les liens et images fonctionnent. Mais ce n'est que sous ce navigateur... IE, Google Chrome et Konqueror n'affichent que la page principale sans zone sensible, bien qu'apparemment les autres images se préchargent comme prévu au début.
D'ou vient le soucis? Et pourquoi ça ne fonctionne que sous firefox?
Une solution?
Je vous affiche mon code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title> </title>
<style type="text/css">
body{margin:0;}
</style>
<script language="javascript" type="text/javascript">
// cr�ation d'une liste
mesImages = Array();
// pr�chargement des images
mesImages[0] = new Image();
mesImages[0].src="sommaire.png";
mesImages[1] = new Image();
mesImages[1].src="sommaire1.png";
mesImages[2] = new Image();
mesImages[2].src="sommaire2.png";
mesImages[3] = new Image();
mesImages[3].src="sommaire3.png";
mesImages[4] = new Image();
mesImages[4].src="sommaire4.png";
mesImages[5] = new Image();
mesImages[5].src="sommaire5.png";
mesImages[6] = new Image();
mesImages[6].src="sommaire6.png";
// fonction de changement de l'image
function changeImage(n){
document.imageCentrale.src = mesImages[n].src;
}
</script>
</head>
<body>
<table width="100%" height="100% border="1">
<tr>
<td align="center" valign="middle"><img src="/spip/IMG/png/sommaire.png" width="900" height="600" border="0" usemap="#Map" name="imageCentrale" /></td>
</tr>
</table>
<map name="Map">
<area shape="circle" coords="132,229,50" href="?rubrique=1" onMouseOver="changeImage(1)" onMouseLeave="changeImage(0);">
<area shape="circle" coords="244,311,50" href="?rubrique=2" onMouseOver="changeImage(2)" onMouseLeave="changeImage(0);">
<area shape="circle" coords="366,241,52" href="?rubrique=3" onMouseOver="changeImage(3)" onMouseLeave="changeImage(0);">
<area shape="circle" coords="493,320,50" href="?rubrique=4" onMouseOver="changeImage(4)" onMouseLeave="changeImage(0);">
<area shape="circle" coords="599,209,50" href="?rubrique=5" onMouseOver="changeImage(5)" onMouseLeave="changeImage(0);">
<area shape="circle" coords="733,331,48" href="?rubrique=6" onMouseOver="changeImage(6)" onMouseLeave="changeImage(0);">
</map></body>
</html>
A voir également:
- Problème d'affichage entre firefox et IE
- Telecharger firefox - Télécharger - Navigateurs
- Video downloadhelper firefox - Télécharger - Outils pour navigateurs
- Affichage double ecran - Guide
- Problème affichage fenêtre windows 10 - Guide
- Exporter favoris firefox - Guide
