JavaScript : le mot 'this'

Survolez successivement chaque image et observez !

Le code CSS et HTML de la page (extrait)

... <style> img {display : block ; margin :10px auto 10px auto ;} img.petit {width : 15% ; opacity : 0.5 ; box-shadow : -5px -5px 5px grey ; } img.grand {width : 30% ; opacity : 1 ; box-shadow : 10px -10px 10px grey ; } ... <body> ... <img src = '../images/toucan.jpg' class ='petit' onmouseover ="fgrand(this)" onmouseout ="fpetit(this)" /> <img src = '../images/tortue.jpg'class ='petit' onmouseover ="fgrand(this)" onmouseout ="fpetit(this)" /> <img src = '../images/foret.jpg' class ='petit' onmouseover ="fgrand(this)" onmouseout ="fpetit(this)" /> <img src = '../images/riviere.jpg'class ='petit' onmouseover ="fgrand(this)" onmouseout ="fpetit(this)" /> ...

CSS : on définit deux classes spécifiques aux images : petit et grand.

HTML : quatre images affectées de la classe petit c'est à dire des miniatures avec un ombrage (ombre projetée vers le haut gauche).
Pour chaque image on appelle la fonction fgrand sur l'événement onmouseover et la fonction fpetit sur l'événement onmouseout.
Remarquez qu'à chaque fois le paramètre passé est this.
this est un mot réservé de JavaScript très pratique. Il désigne l'élément HTML courant (ou actif).

Le mot "magique"this ne peut être utilisé que comme paramètre lors de l'appel de la fonction.

Le script de la page

	function fpetit(image) {image.className ="petit" ; }
	function fgrand(image) {image.className ="grand" ; }

La fonction fpetit applique la classe petit à l'objet identifié image (image courante).
La fonction fgrand applique la classe grand à l'objet identifié image (image courante).
Retour menu