Le principe

Voilà comment nous allons procéder : nous disposons d'une image sur notre page Web. Nous allons faire en sorte qu'au passage de la souris sur cette image, le curseur de la souris se transforme en conteneur, dans lequel sera affiché un zoom de la portion d'image survolée. Ce conteneur aura en fait la même image pour arrière-plan, mais de plus grande dimension. Ensuite, cet arrière-plan est décalé en fonction de la position du curseur de la souris, de manière à faire l'effet d'un zoom. Ce n'est pas assez clair ? Alors passons tout de suite à la pratique...

Le squelette de la page

Pour réaliser cet exercice, vous devez disposer :

d'une image qui fera office de loupe. Cette image, à fond transparent devra consister en un simple contour ; préférez une forme rectangulaire à un cercle, sinon le résultat ne sera pas aussi satisfaisant (voir plus loin).

Attention : rappelons ici qu'Internet Explorer (v. 6.0 et inférieur) ne sait pas gérer la transparence des images PNG. Ce problème devrait être résolu dans la version 7.0, mais en attendant, préférez le format GIF.

d'une image/photo en deux exemplaires : petit et grand format, en veillant à ce que les dimensions du grand format soient le double du petit format (par exemple, nous avons choisi ~~1000x750~~ et ~~500x375~~). Un ratio de 2 n'est pas une obligation, mais veillez à obtenir un ratio entier, car nous aurons besoin de cette valeur par la suite.

Le code HTML de notre page est vraiment très simple, nous n'avons que deux images à déclarer : l'image de petites dimensions va être insérée dans un conteneur principal. Ce même conteneur contiendra un second conteneur dans lequel on placera l'image de la loupe. Ce qui donne le code suivant :

<body>
     <div id="box">
	<div id="curseur">
	<img src="loupe.png" width="60" height="54" />
	</div>
	<img src="lac.png" width="500" height="375" />
     </div>
</body>

Vous pouvez visualiser dans votre navigateur le résultat obtenu (Fig. 1) : les images apparaissent correctement à l'écran. Il ne nous reste plus qu'à définir les styles.

/img-articles/lp/39/art-17/fig-1.jpg

Positionner les différents éléments

Vous allez constater que notre feuille de style va contenir essentiellement des propriétés relatives à la position des différentes images. L'effet loupe sous le curseur de la souris ne sera rendu que grâce au code Javascript que nous vous proposerons ensuite.

#box {
position: absolute;
width: 500px;
height: 375px;
overflow: hidden;
left: 250px;
top: 100px;
}

#curseur {
position: absolute;
width: 60px;
height: 54px;
background: url(lac_highres.png) no-repeat;
z-index: 100;
margin-left: -15px;
margin-top: -15px;
top: -50px;
left: -50px;
}

Le conteneur principal est positionné en absolu (dans le cas contraire, notre loupe ne se positionnerait pas sous le pointeur de la souris). Les propriétés ~~left~~ et ~~top~~ ne servent ici qu'à positionner l'image sur le conteneur sur la page, vous pouvez donc adapter les valeurs en fonction de vos besoins. Remarquez l'utilisation de la propriété ~~overflow~~. Celle-ci permet de définir comment des éléments appartenant au conteneur, au contenu trop important, doivent être traités par le navigateur. En effet, ici nous avons précisé les dimensions du conteneur (les mêmes que l'image, ~~500x375~~), puis positionné ce même conteneur (via ~~top~~ et ~~left~~). Tout ce qui sera défini en dehors de ces limites sera ici ignoré par le navigateur (grâce à la mention ~~hidden~~). Sans cette mention, on apercevrait la loupe avant le lancement du script (Fig. 2), ce qui n'est pas souhaité...

/img-articles/lp/39/art-17/fig-2-3.jpg

Fig. 3 : Utilisation d'une loupe ronde. L'arrière-plan a été ici bordé de vert. Constatez qu'une loupe ronde n'est pas vraiment adéquate...

Le conteneur qui va servir de loupe est lui aussi positionné en absolu, sinon le curseur ne suivrait pas la souris. Il reçoit, en arrière-plan, notre image de grandes dimensions, sans oublier la mention ~~no-repeat~~, qui garantit l'affichage unique de l'image. Comprenez qu'il était préférable ici d'avoir une loupe carrée, autrement la portion d'arrière-plan, qui elle est carrée, aurait été moins adaptée (Fig. 3). Remarquez la présence de la mention ~~z-index: 100;~~ qui permet de positionner notre loupe au premier plan, ce qui garantit que celle-ci ne sera en aucun cas masquée par un autre élément. Les propriétés ~~top~~ et ~~left~~ ici permettent de spécifier la position de départ de notre loupe, au chargement de la page, avant le mouvement de souris (et donc avant le lancement du script). Veillez ici à ce qu'elle soit bien au-dehors du conteneur principal et donc invisible... Enfin, les propriétés ~~margin-left~~ et ~~margin-top~~ permettent de réajuster la position du conteneur secondaire par rapport au conteneur principal, sans quoi l'image d'arrière-plan paraît décalée et on perd l'effet loupe.

Suivre le mouvement de la souris...

Notre script (1) doit obligatoirement être inséré au sein du code HTML de la page (et non dans un fichier externe), entre les balises ~~<body>~~, mais après la déclaration de nos conteneurs. Sans cela, le script ne fonctionnerait pas, car il ne pourrait trouver les éléments dont il a besoin (ces derniers n'étant pas encore déclarés). (1) Ce code en Javascript est tiré de http://www.nanoum.net/blog/7_masque_zoom.html Dans un premier temps, Javascript va nous permettre de déterminer où se trouve le pointeur de la souris. On utilise pour cela l’objet ~~event~~ qui possède entre autres 2 propriétés indiquant les coordonnées du curseur par rapport à la page, les coordonnées 0, 0 correspondant au coin supérieur gauche.

<script type="text/javascript">
var x,y;
ratio = 2;

function position(e) {
	if (navigator.appName.substring(0,3) == "Net") {
		x = e.pageX;
		y = e.pageY;
	}
	else {
		x = event.x+document.body.scrollLeft;
		y = event.y+document.body.scrollTop;
	}
}
if(navigator.appName.substring(0,3) == "Net")
document.captureEvents(Event.MOUSEMOVE);

document.onmousemove = position;

/* positionnement de la loupe et de son image de fond  */
curseur_style = document.getElementById("curseur").style;
function masque() {
	curseur_style.top = (y-100)+"px";
	curseur_style.left = (x-270)+"px";
	curseur_style.backgroundPosition = (x-270)*-
	ratio+"px "+(y-100)*-ratio+"px";
	setTimeout("masque()",10);
}
document.getElementById("box").onmouseover = masque;
</script>

Tout d'abord, on déclare les variables x et y, correspondant aux coordonnées de la position du pointeur de la souris, ainsi que la valeur du ~~ratio~~, qui n'est autre que le rapport des largeurs de notre grande image sur la petite (d'où la nécessité de prévoir un ratio simple lors de la préparation des images). La fonction ~~position()~~ qui est définie ensuite permet de récupérer les valeurs de x et y. Constatez qu'un test est effectué pour déterminer la nature du navigateur. En effet, de celle-ci dépend la façon de récupérer la position du curseur (la première condition est spécifique à Netscape, d'où un test sur la chaîne " Net "). Suit un deuxième test spécifique à Netscape : si ce navigateur est utilisé, alors l'évènement " mouvement de souris " est enregistré. La mention ~~document.onmousemove = position;~~ signifie qu'au mouvement de souris, la fonction ~~position()~~ doit être exécutée. Les lignes suivantes, constituant la fonction ~~masque()~~, permettent d'affecter de nouvelles valeurs aux propriétés CSS concernant les positions de la loupe et de son image d'arrière-plan. De plus, cette fonction contient la méthode ~~setTimeout()~~, qui permet de retarder l'exécution de la fonction ~~masque()~~ de 10 ms. Remarquez que cette méthode appelle la fonction ~~masque()~~, tout en étant incluse dans celle-ci : on observe donc ici une récursivité de la fonction, qui se lance toutes les 10 ms de manière à suivre le mouvement de la souris. Sans cela, le script peine à fonctionner, car la souris se déplace trop vite... Enfin, comme le précise la dernière ligne du script, cette fonction ~~masque()~~ n'est exécutée que lorsque la souris survole un élément de la page d'identifiant " box ". Observez le résultat final sur la figure 4.

/img-articles/lp/39/art-17/fig-4.jpg