Afficher une image agrandie
Résolu
ideal23
Messages postés
456
Date d'inscription
Statut
Membre
Dernière intervention
-
ideal23 Messages postés 456 Date d'inscription Statut Membre Dernière intervention -
ideal23 Messages postés 456 Date d'inscription Statut Membre Dernière intervention -
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:
j'ai trouvé ce script qui fonctionne bien sauf sous internet explorer
html:
Pouvez-vous m'aider à résoudre mon problème , pourquoi ie est différent des autres navigateurs et que dois-je modifier
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
A voir également:
- Afficher une image agrandie
- Comment agrandir une image - Guide
- Image iso - Guide
- Légender une image - Guide
- Acronis true image - Télécharger - Sauvegarde
- Reduire taille image - Guide
4 réponses
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">');
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">');
Merci de ta réponse
j'ai modifié, mais le zoom n'a pas changé, l'image apparaît toujours en haut à gauche à moitié.
j'ai modifié, mais le zoom n'a pas changé, l'image apparaît toujours en haut à gauche à moitié.
à 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"; }