Code solutions to PHP, JS, CSSCode source PHP, JS, CSS

Répandez vos soluces sur la planète

Love me
Solucior » JAVASCRIPT » Loupe image javascript

Loupe image javascript

06/16/2011 par Dux   -   4.5/5 (10 notes)

Ajoutez des options de loupe sur vos images grâce à ce simple code.

Demo.

image zoom loupe
ZOOM

code source



 
<script type="text/javascript">
<!--
function
zoom(e, sens) {
   var
elm = document.getElementById(e);
   
   
// Image width
   
var w = (elm.offsetWidth) ? elm.offsetWidth : elm.style.pixelWidth;
   
   
// Parent element width
   
var wc = (elm.parentNode.offsetWidth) ? elm.parentNode.offsetWidth : elm.parentNode.style.pixelWidth;
   
   
// Image size
   
w = (sens>0) ? w * 1.25 : w / 1.25;
   if (
w < wc) w = wc;
   
elm.style.width = w + "px";
}
-->
</script>


<div style="width: 400px; height: 303px; overflow: scroll; border: 1px solid">
   <img id="nice" src="nice.jpg" alt="image zoom loupe" style="width:100%" />
</div>
<input type="button" value="-" onclick="zoom('nice', -1)" />
ZOOM
<input type="button" value="+" onclick="zoom('nice', 1)" />

Testé avec Safari  Google Chrome  Firefox3  Firefox4  Opera  IE6  
Noter ce code     |     Copié : 91x

Commentaires pour Loupe image javascript

Aucun commentaire
Ajouter un commentaire Pseudo   Site
ZOOM


Loupe image javascript
Zoom infini CSS3 et Javascript
Isoler une couleur
Récupérer les images d'une page
Largeur image dynamique selon son emplacement
Opacité avec javascript
Ajuster le taux de couleurs d'une image
Zoom en CSS3
Simple galerie d'images PHP
Ajuster automatiquement luminosité contraste d'une image