Afficher une image agrandie

Résolu/Fermé

ideal23 Messages postés 456 Date d'inscription mercredi 30 avril 2008 Statut Membre Dernière intervention 16 mai 2014 - 6 févr. 2012 à 11:19
ideal23 Messages postés 456 Date d'inscription mercredi 30 avril 2008 Statut Membre Dernière intervention 16 mai 2014 - 9 févr. 2012 à 00:00

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

A voir également:

Afficher une image agrandie
Comment agrandir une image - Guide
Image iso - Guide
Acronis true image - Télécharger - Sauvegarde
Afficher mot de passe wifi android - Guide
Faststone image viewer - Télécharger - Visionnage & Diaporama

4 réponses

Réponse 1 / 4

Joe
6 févr. 2012 à 13:55

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">');

Réponse 2 / 4

ideal23 Messages postés 456 Date d'inscription mercredi 30 avril 2008 Statut Membre Dernière intervention 16 mai 2014 28
6 févr. 2012 à 15:10

Merci de ta réponse
j'ai modifié, mais le zoom n'a pas changé, l'image apparaît toujours en haut à gauche à moitié.

Réponse 3 / 4

ideal23 Messages postés 456 Date d'inscription mercredi 30 avril 2008 Statut Membre Dernière intervention 16 mai 2014 28
6 févr. 2012 à 19:52

je n'ai pas trouvé de script ou tuto pour cet exemple qui me plait, avez-vous une idée?

Réponse 4 / 4

ideal23 Messages postés 456 Date d'inscription mercredi 30 avril 2008 Statut Membre Dernière intervention 16 mai 2014 28
9 févr. 2012 à 00:00

à 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";
}

Discussions similaires

Retrouver l'image originale après avoir fait des modifications ?

Afficher toutes les lignes masquées excel

=Si la cellule A1 a du texte = B1 devient couleur

Comment enlever le rouge sur la photo svp ?

Discussions similaires

Newsletters