Je suis en train de faire quelques tests de zone réactive dans une image. Lorsque l'on passe sur un morceau de l'image, elle affiche une image différente par jeu de calque. Comme vous pouvez le voir, le code n'est pas extraordinaire:
Code
<style type="text/css"><!--
#map1 {
position:absolute;
top: 0px; left: 0px;
}
.map {
visibility: hidden;
position:absolute;
top: 0px; left: 0px;
}
--></style>
<script language="JavaScript" type="text/JavaScript">
<!--
function show(object) { if (document.layers && document.layers[object] != null) document.layers[object].visibility = 'visible'; else if (document.all) document.all[object].style.visibility = 'visible'; }
function hide(object) { if (document.layers && document.layers[object] != null) document.layers[object].visibility = 'hidden'; else if (document.all) document.all[object].style.visibility = 'hidden'; }
//-->
</script>
</head>
<body>
<div id="map1"><img src="img/map.png" width="450" height="370" border="0" usemap="#Map">
<map name="Map">
<area shape="poly" coords="64,170,92,166,115,166,135,171,184,172,209,163,242,172,275,172,307,161,342,17
2,361,204,378,233,355,261,335,258,315,295,328,336,308,354,280,344,250,321,229,31
0,223,288,224,259,209,283,171,291,156,282,155,260,163,243,140,230,112,233,98,207
,78,206,70,191,68,177" href="#" onMouseOver="show('wallonie')" onMouseOut="hide('wallonie')">
</map>
</div>
<div id="wallonie" class="map"><img src="img/map_1.png" width="450" height="370"></div>
#map1 {
position:absolute;
top: 0px; left: 0px;
}
.map {
visibility: hidden;
position:absolute;
top: 0px; left: 0px;
}
--></style>
<script language="JavaScript" type="text/JavaScript">
<!--
function show(object) { if (document.layers && document.layers[object] != null) document.layers[object].visibility = 'visible'; else if (document.all) document.all[object].style.visibility = 'visible'; }
function hide(object) { if (document.layers && document.layers[object] != null) document.layers[object].visibility = 'hidden'; else if (document.all) document.all[object].style.visibility = 'hidden'; }
//-->
</script>
</head>
<body>
<div id="map1"><img src="img/map.png" width="450" height="370" border="0" usemap="#Map">
<map name="Map">
<area shape="poly" coords="64,170,92,166,115,166,135,171,184,172,209,163,242,172,275,172,307,161,342,17
2,361,204,378,233,355,261,335,258,315,295,328,336,308,354,280,344,250,321,229,31
0,223,288,224,259,209,283,171,291,156,282,155,260,163,243,140,230,112,233,98,207
,78,206,70,191,68,177" href="#" onMouseOver="show('wallonie')" onMouseOut="hide('wallonie')">
</map>
</div>
<div id="wallonie" class="map"><img src="img/map_1.png" width="450" height="370"></div>
et le résultat est là => http://enix.be/divers/switch/contact2.php
Mon problème est double:
1. Dans IE, dès que je bouge un peu la souris, même en restant dans la zone réactive, l'image donne l'impression de clignoter
2. Dans FireFox, l'effet ne marche même pas
Qqun aurait-il une idée??
Merci
