Voilà une solution pour faire un zoom sur une image.
<HTML>
<HEAD>
<script>
function Bild(id) //Définition d'un objet image
{
this.id = id; //Id de l'image
this.sizeX = document.getElementById(id).width; //Largeur de l'image
this.sizeY = document.getElementById(id).height; //Longueur de l'image
this.Zoom = null; //Déclaration d'un attribut Zoom
this.DoZoom = DoZoom; //Déclaration d'une méthode DoZoom
}
function Zoom(sizeX,sizeY) //Définition d'un objet Zoom
{
this.sizeX = sizeX; //Largeur de l'image à la fin du zoom
this.sizeY = sizeY; //Longueur de l'image à la fin du zoom
this.schritt = 100; //Pas d'agrandissement de l'image
this.dauer = 10; //Durée d'attente entre chaque petit agrandissement
}
function DoZoom() //Méthode qui effectue le zoom
{
image = this; //Sauvegarde de l'objet appelant
if(image.Zoom.schrittX == null)
ZoomInit(); //Initialisation des paramètres d'agrandissement
image.sizeX += image.Zoom.schrittX; //Modification de la largeur de l'image dans l'objet
document.getElementById(image.id).width = image.sizeX; //Modification de la largeur de l'image à l'écran
image.sizeY += image.Zoom.schrittY; //Modification de la longueur de l'image dans l'objet
document.getElementById(image.id).height = image.sizeY; //Modification de la longueur de l'image à l'écran
image.Zoom.i++; //Incrémentation de la variable de progression
if(image.Zoom.i<image.Zoom.schritt) //Tant que l'on n'a pas fait tout les pas menant au zoom voulu
setTimeout("image.DoZoom()",image.Zoom.dauer); //On relance le zoom après un certain nombre de ms
}
function ZoomInit() //Procédure d'initialisation du zoom
{
image.Zoom.schrittX = (image.Zoom.sizeX - image.sizeX)/image.Zoom.schritt; //Calcul du pas horizontal
image.Zoom.schrittY = (image.Zoom.sizeY - image.sizeY)/image.Zoom.schritt; //Calcul du pas vertical
image.Zoom.i = 0; //Initialisation d'une variable de progression
}
function ZoomImgId(sizeX,sizeY) //Fonction particulière qui traite le zoom de ingId
{
myImage = new Bild("imgId"); //Création d'un objet myImage de type Bild (image)
myZoom = new Zoom(sizeX,sizeY); //Création d'un objet myZoom de type Zoom
myImage.Zoom = myZoom; //Instanciation de l'attribut Zoom de l'objet myImage
myImage.DoZoom(); //Utilisation de la méthode DoZoom sur l'objet myImage
}
</script>
</HEAD>
<BODY>
<img id="imgId" src="image.jpg" height="100" width="100" onClick="ZoomImgId(500,500);">
</BODY>
</HTML>