nanoum.net, intégration html/xhtml, css, javascript

javascript

derniers articles

archives

syndication rss

masque et zoomdimanche 12 décembre 2004

Ma bonne résolution du 12 décembre : ne pas laisser mourir mon blog et l'alimenter.

Voici donc une fonction pour produire un effet de zoom sur une image, un peu comme si l'on passait avec une loupe sur cette image.


Le principe général :

Une petite image affichée à l'écran.
Au survol de cette image, on affiche un bloc qui suit le curseur et contient en arrière plan une copie de la petite image mais de plus grandes dimensions. On modifie la position de l'image de fond en fonction de la position du curseur pour afficher la zone survolée agrandie.

voir la page d'exemple

On peut également oter la petite image présente dans la page pour avoir un simple effet de masque.


Code html et css :

Pour le html
<div id="mini">
<div id="curseur">
<img src="cercle.png" width="50" height="50" /></div>
<img src="ptt_cascade.png" width="300" height="400" />
</div>
Pour les css :
#mini {
position:absolute;
left:255px;
top:85px;
width:300px;
height:400px;
z-index:1;
overflow: hidden;
}
#curseur {
position: absolute;
margin-left:-12px;
margin-top:-12px;
width:34px;
height:34px;
background-image:url(cascade.png);
background-repeat: no-repeat;
z-index:5;
top: -75px;
left: -75px;
}
#curseur img {
position: absolute;
top:-8px;
left:-8px;
}


Le javascript :

Pour commencer, ce qui va permettre de récupérer la position du curseur :
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;On teste les navigateurs car ceux-ci gèrent différemment la récupération de cette position.

Ensuite, il s'agit de quelques calculs mathématiques pour déduire l'emplacement de la loupe et de l'image de fond agrandie en fonction de la position du curseur sur l'image et du rapport de proportion entre la grande et la petite image.
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("mini").onmouseover = masque;
Tous le code javascript se place ici dans le body, après le code html sans quoi il ne pourrait trouver les éléments qui ne sont pas encore déclarés.

voir la page d'exemple

Je reconnais que l'utilité de tout ceci peut relever du gadget, il s'agissait plutôt d'un essai pour voir le résultat que l'on pouvait obtenir.

Commentaires momentanément fermés. Merci de votre compréhension.