Afficher une image agrandie

Résolu
ideal23 Messages postés 505 Statut Membre -  
ideal23 Messages postés 505 Statut Membre -
Bonjour,
Bonjour
j'ai réalisé un catalogue avec une base de données. La table adéquate possède un champ image. les images sont dans un fichier nommé photos, elles sont de taille normal 400 x 350
j'ai réalisé une requête pour afficher ces images avec un espace réservé de l'image qui fait 160 x 135
j'ai donc une petite image dans la catalogue, je voudrais au clique ou au passage de la souris sur l'image faire apparaître l'image normal, pour plus de vision pour l'internaute.
lien catalogue:
http://galaxyweb.free.fr/catalogue.php?id_menu=13
le code php qui affiche l'image:
 <td><div align="center"><img src="photos/<?php echo $row_cat['photo']; ?>" width="160" height="135" alt="" /></div></td>

j'ai trouvé ce script qui fonctionne bien sauf sous internet explorer
<SCRIPT LANGUAGE="JavaScript">
// 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:5px; top:5px; 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";
}
</SCRIPT>

html:
<img src="photos/<?php echo $row_cat['photo']; ?>"width="165" height="135"
        onmouseover="overImage('photos/<?php echo $row_cat['photo']; ?>')";
        onmouseout="outImage();" />


Pouvez-vous m'aider à résoudre mon problème , pourquoi ie est différent des autres navigateurs et que dois-je modifier

4 réponses

  1. Joe
     
    Essaye en ajoutant name sur la ligne suivante :

    document.write('<div id="div_zoom_image" style="position:absolute; visibility:hidden; left:-286px; top:0px; z-index:1000">');

    devient

    document.write('<div id="div_zoom_image" name="div_zoom_image" style="position:absolute; visibility:hidden; left:-286px; top:0px; z-index:1000">');
    0
  2. ideal23 Messages postés 505 Statut Membre 28
     
    Merci de ta réponse
    j'ai modifié, mais le zoom n'a pas changé, l'image apparaît toujours en haut à gauche à moitié.
    0
  3. ideal23 Messages postés 505 Statut Membre 28
     
    je n'ai pas trouvé de script ou tuto pour cet exemple qui me plait, avez-vous une idée?
    0
  4. ideal23 Messages postés 505 Statut Membre 28
     
    à modifier pour résoudre le problème:
    / permet d'afficher l'image lorsque la souris bouge dans l'image
        function moveImage(e) {
        // position
     	var dde=(navigator.vendor) ? document.body : document.documentElement;
    e =(!e) ? window.event : e;
    	var x =e.clientX + dde.scrollLeft;
    	var y =e.clientY + dde.scrollTop;
        // placement
        document.getElementById("div_zoom_image").style.left = x + "px";
        document.getElementById("div_zoom_image").style.top = y + "px";
    }
    0