Un zoom sur une image

DEMONSTRATION

     
Un zoom sur une image, vous pouvez zoomer indépendamment sur la largeur et la hauteur ce qui vous laisse le privilège de quelque fantaisies (voir les exemples)

Exemple 1 (zoom plus important sur la hauteur)
Exemple 2 (zoom identique sur largeur et hauteur)
Exemple 3 (zoom plus important sur la largeur)


Code source en 2 parties


A rajouter dans la balise <BODY .. >
top

<BODY  onLoad="zoom()">


Entre <BODY> et </BODY>
top


<SCRIPT LANGUAGE="JavaScript">
<!--
//Interdiction d'effacer ces lignes
//D'autres script,applet,images sur webgraf.com 
//Auteur: Mathieu Gros, webmaster@webgraf.com

var image="illumin.gif"//Votre image ici
var speed=50  //la vitesse de l'animation
var width_max=70  //La largeur maximale de l'image (en pixel)
var height_max=100 //La hauteur maximale de l'image (en pixel)
var step=10 //Le nombre de pixel entre chaque "agrandissement/reduction"
var left=50 //La position horizontale de l'animation dans la page (en pixel)
var top=150  //La position verticale de l'animation dans la page (en pixel)

//Pas touche à la suite
hght=1;wdth=1;zm1=1;zm2=1;
var img;imag1 = new Image();imag1.src = image;
if (navigator.appName == "Netscape") { 
document.write('<LAYER NAME="zim01" left='+left+' top='+top+'></LAYER>');
t=1;}else{
document.write('<span ID="zim01" STYLE="Position:absolute; left:'
+left+'; top:'+top+'; z-index:0;"></span>');t=0;}
function zoom(){
hght+=zm1*step
wdth+=zm2*step
tph=top-0.5*hght
tpw=left-0.5*wdth
img='<IMG SRC="'+image+'" width="'+wdth+'" height="'+hght+'">'
if (t) with(document.zim01){top=tph;left=tpw;document.write(img);document.close();}
else {with(document.all.zim01.style){posTop=tph;posLeft=tpw;}
zim01.innerHTML=img;}
if (hght>=height_max) zm1=-1
if (wdth>=width_max) zm2=-1
if (hght<=2*step)zm1=1
if (wdth<=2*step)zm2=1
setTimeout("zoom()",speed);}
//-->
</script>
 
INFORMATIONS COMPLEMENTAIRES
top

Comment intégrer ce script dans votre page: Vous pouvez télécharger cette page avec l'image au format zip :télécharger.








Un problème ou une critique : e-mail
Des ressources utiles et gratuites pour vos pages Web :
webgraf.com