Zoom Image se déplacant

Bonjour à tous,

J'utilise un script pour zoomer sur une image miniature qui fonctionne très bien mais il y a quelque chose qui m'échappe, voici donc le script que j'utilise :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <script type="text/javascript"> // conteneur de l'image zoomée document.write('<div id="div_zoom_image" style="text-align:center;padding:15px;border:1px solid #eee;background :url(img/transparence.png);position:absolute; visibility:hidden; left:45%;top:250px; z-index:1000;">'); document.write('<img id="img_zoom_image" src="" width="450" />'); document.write('</div>'); // affiche l'image function overImage(imgUrl) { document.getElementById("div_zoom_image").style.visibility = "visible"; document.getElementById("img_zoom_image").src = imgUrl; } // masque l'image function outImage() { document.getElementById("div_zoom_image").style.visibility = "hidden"; document.getElementById("img_zoom_image").src = ""; } </script>
et l'utilisation dans la page :

Code:

<img src="./images/maphoto_miniature.jpg" height="100" onMouseOver="overImage('images/maphoto_grande.jpg')"; onmouseout="outImage();" />

Pour un affichage classique ça fonctionne au poil par contre j'ai plusieurs photos les unes en dessous des autres et quand je descend, le zoom ne se déplace pas (il se fait toujours à 250px du haut (normal c'est défini ainsi)), il faut à mon avis que je récupère la position de ma miniature et que je donne l'info via un backgroundPosition mais je n'y arrive pas :(

De plus je voudrai limiter la taille de la photo agrandie à 450 px, donc aucun souci pour définir la taille à 450 px pour toutes les photos (le width="450" fait ça très bien)

mais si la photo est de taille plus petite elle est agrandie également, donc comment vérifier ça ?

Merci d'avance si vous pouvez m'éclairer sur ces deux points.

<head> <script type="text/javascript"> function overImage(imgUrl) { document.getElementById("div_zoom_image").style.visibility = "visible"; document.getElementById("img_zoom_image").src = imgUrl; } function outImage() { document.getElementById("div_zoom_image").style.visibility = "hidden"; document.getElementById("img_zoom_image").src = ""; } </script> </head> <body> <?PHP while($row = mysql_fetch_array($result)) { $Photo=($row['Photo']); ?> <table><td><tr> <div id="occas_contour"> <div id="div_zoom_image"><img id="img_zoom_image" src="" width="450"></div> <div id="occas_photo"><img src="images/<?php echo $Photo; ?>" height="100" onMouseOver="overImage('images/<?php echo $Photo; ?>') "; onmouseout="outImage();" /><br></div> </div></tr></td></table> }

#occas_contour { width:750px; height:250px; margin: 0 2px 0 92px; background-image: url(../img/fond_occas.png); border:none; font-family: Century Gothic; font-size: 10pt; color: #FFFFFF; position:relative; } #occas_photo { padding: 15px 0px 15px 0px; float:left; height:130px; width:200px; text-align:center; vertical-align: middle; } #div_zoom_image { text-align:center; padding:15px; border:1px solid #eee; background :url(../img/transparence.png); position:absolute; visibility:hidden; left:300px; top:250px; z-index:1000; }