Bonjour,
j'ai une image découpée en area. Je souhaiterai changer l'image lorsque la souris survolle l'area de façon à surligner certaines zones de l'image:
1 2 3 4 5 6
| <img id="picture" src="./images/pic1.gif" usemap="#mamap" style="border: 0;"/>
<map name="mamap">
<area href="url" shape="rect" coords="0,3,114,19" onMouseOver='changeImage(1)' onMouseOut='changeImage(0)'/>
<area href="url" shape="rect" coords="0,248,114,265" onMouseOver='changeImage(2)' onMouseOut='changeImage(0)'/>
<area href="url" shape="rect" coords="273,3,387,19" onMouseOver='changeImage(3)' onMouseOut='changeImage(0)'/>
... |
Dans le but de précharger mes images j'inclu dans le header de la page un lien vers un javascript:
<script type="text/javascript" src="js/picture_init.js"></script>
et la méthode onload du body appel la méthode de préchargement:
<body onLoad="init_acceuil()">
voici le contenu du fichier js:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
| var images = new Array(6);
for (var i=0 ; i <images.length; i++)
images[i]= new Image();
function init_acceuil(){
images[0].src="images/pic1.gif";
images[1].src="images/pic2.gif";
images[2].src="images/pic3.gif";
images[3].src="images/pic4.gif";
//etc...
}
function changeImage(n) {
alert(images[n].src);
document.images["picture"].src=images[n].src;
} |
Sous firefox, je n'ai aucun problème: ça marche (confirmé par la messagebox...) par contre sous internet explorer "images[n].src" est vide comme le confirme la message box (ce qui gêne un peu pour l'affichage
). Conclusion, je pense que j'ai un problème au nivau de la portée de la variable images, difficulté que je n'arrive pas à résoudre.
Quelqu'un pourrait il me débloquer??
Merci de votre aide!!!!!!!
Partager