Loupe sur une image en javascript

Fonctionnalités

  • Gère automatiquement les dimensions de l'image : il n'est pas nécessaire de spécifier les dimensions des images dans le code HTML
  • Facteur de zoom et dimensions de la loupe modifiables par les flèches haut, bas, gauche et droite
  • Message configurable 'Zoom Loading...' à la place de la loupe tant que les images ne sont pas totalement chargées
  • API de personnalisation des paramètres configurables

Compatibilité

Testé à ce jour et fonctionnel sur :

  • Mozilla
  • Internet Explorer 6 (un peu plus lent que sous Mozilla)

Intégration

Code HTML

...
<head>
...
<script type="text/javascript" src="ed_zoomimg.js"></script>
...
<body>

<div onmouseover="edz_zoomIn(event, this);">
  <img src="image_small.jpg" onLoad="edz_smallLoaded(this);" 
    style="border: 0; margin: 0; padding: 0;" />
  <img src="image_big.jpg" onLoad="edz_bigLoaded(this);" style="display: none;" />
</div>

Télécharger ed_zoomimg.js

 

2007 Elforia Design @ Tous droits réservés