Afficher une image agrandie
Résolu
ideal23
Messages postés
505
Statut
Membre
-
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:
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
- Agrandir une image - Guide
- Légender une image - Guide
- Image iso - Guide
- Reduire taille image - Guide
- Rechercher une 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";
}