Script ne fonctionnant pas sur ie
Bonjour,
Je vous fais part de mon petit soucis, j'ai un script permettant d'agrandir l'image quand le curseur se trouve sur celle ci. L'image suit le curseur jusqu'à a se que le curseur sorte du cadre de l'image; malheuresement le script ne fonctionne pas sur ie, si quelqu'un a une idée, je suis preneur.
mon code html:
Code:
1
2
3
| <img src="/image/petit-image/image1.jpg"
onmouseover="overImage('/image/grand-image/image2.jpg')";
onmouseout="outImage();" /> |
mon code JS:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
| // conteneur de l'image zoomée
document.write('<div id="div_zoom_image" style="position:absolute; visibility:hidden; left:-286px; top:0px; z-index:1000;">');
document.write('<img id="img_zoom_image" src="" style="position:absolute; left:-300px; top:-100px; z-index:2000;" />');
document.write('</div>');
// affiche l'image au niveau du curseur
function overImage(imgUrl) {
document.getElementById("div_zoom_image").style.visibility = "visible";
document.getElementById("img_zoom_image").src = imgUrl;
document.onmousemove = moveImage;
}
// masque l'image
function outImage() {
document.getElementById("div_zoom_image").style.visibility = "hidden";
document.getElementById("img_zoom_image").src = "";
document.onmousemove = "";
}
// permet d'afficher l'image lorsque la souris bouge dans l'image
function moveImage(event) {
// position
var x = event.pageX + 5;
var y = event.pageY + 5;
// placement
document.getElementById("div_zoom_image").style.left = x + "px";
document.getElementById("div_zoom_image").style.top = y + "px";
} |
