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 html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
<img src="/image/petit-image/image1.jpg"
onmouseover="overImage('/image/grand-image/image2.jpg')";
onmouseout="outImage();" />

mon code JS:
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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";
}