Se connecter / S'enregistrer
Votre question

javascript agrandir image avec internet explorer

Tags :
  • Javascript
  • Internet Explorer
  • Programmation
Dernière réponse : dans Programmation
6 Février 2012 16:55:40

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. j'ai un script qui fonctionne bien sur les principaux navigateurs sauf sur ie. Le zoom reste en haut à gauche de l'écran.Je pense trouvé ici quelqu'un un plus doué que moi , pour m'aider à voir ce qui ne va pas.
lien catalogue:
http://
le script:
  1. <SCRIPT LANGUAGE="JavaScript">
  2. // conteneur de l'image zoomée
  3. document.write('<div id="div_zoom_image" style="position:absolute; visibility:hidden; left:-286px; top:0px; z-index:1000;">');
  4. document.write('<img id="img_zoom_image" src="" style="position:absolute; left:5px; top:5px; z-index:2000;" />');
  5. document.write('</div>');
  6. // affiche l'image au niveau du curseur
  7. function overImage(imgUrl) {
  8. document.getElementById("div_zoom_image").style.visibility = "visible";
  9. document.getElementById("img_zoom_image").src = imgUrl;
  10. document.onmousemove = moveImage;
  11. }
  12. // masque l'image
  13. function outImage() {
  14. document.getElementById("div_zoom_image").style.visibility = "hidden";
  15. document.getElementById("img_zoom_image").src = "";
  16. document.onmousemove = "";
  17. }
  18. // permet d'afficher l'image lorsque la souris bouge dans l'image
  19. function moveImage(event) {
  20. // position
  21. var x = event.pageX + 5;
  22. var y = event.pageY + 5;
  23. // placement
  24. document.getElementById("div_zoom_image").style.left = x + "px";
  25. document.getElementById("div_zoom_image").style.top = y + "px";
  26. }
  27. </SCRIPT>

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

Merci

Autres pages sur : javascript agrandir image internet explorer

a c 232 L Programmation
a b , Internet Explorer
6 Février 2012 19:36:57

Salut,

C'est parce pageX et pageY ne sont pas reconnus par Internet Explorer (enfin, si à partir de IE9, mais tu es en mode de compatibilité IE7 avec ton document).

Tu peux utiliser ces 2 fonctions à la place pour avoir la position :
  1. function mouseX(evt) {
  2. if (evt.pageX) return evt.pageX;
  3. else if (evt.clientX)
  4. return evt.clientX + (document.documentElement.scrollLeft ?
  5. document.documentElement.scrollLeft :
  6. document.body.scrollLeft);
  7. else return null;
  8. }
  9. function mouseY(evt) {
  10. if (evt.pageY) return evt.pageY;
  11. else if (evt.clientY)
  12. return evt.clientY + (document.documentElement.scrollTop ?
  13. document.documentElement.scrollTop :
  14. document.body.scrollTop);
  15. else return null;
  16. }
6 Février 2012 20:07:46

Merci de ta réponse
l'ai mis ton script à la place de cet élément:
  1. // permet d'afficher l'image lorsque la souris bouge dans l'image
  2. function moveImage(event) {
  3. // position
  4. var x = event.pageX + 5;
  5. var y = event.pageY + 5;
  6. // placement
  7. document.getElementById("div_zoom_image").style.left = x + "px";
  8. document.getElementById("div_zoom_image").style.top = y + "px";
  9. }

il faut que je modifie à ce niveau car le zoom est décalé en haut , à gauche de l'écran ?
  1. document.write('<div id="div_zoom_image" style="position:absolute; visibility:hidden; left:-286px; top:0px; z-index:1000;">');
  2. document.write('<img id="img_zoom_image" src="" style="position:absolute; left:5px; top:5px; z-index:2000;" />');
Contenus similaires
a c 232 L Programmation
a b , Internet Explorer
6 Février 2012 21:28:10

Non
Au lieu d'appeler event.pageX, tu appelles la méthode mouseX(event), et au lieu d'appeler event.pageY tu appelles la méthode mouseY(event)
7 Février 2012 00:04:05

c'est bon çà fonctionne merci
une question avec ce script pourrais-on faire apparaît l'image agrandie en cliquant dessus au lieu de passer la souris.
a c 232 L Programmation
a b , Internet Explorer
7 Février 2012 00:14:18

En remplaçant onmouseover par onclick dans le code HTML, ça devrait le faire je pense.
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS