Effet de loupe (zoom + déplacement sur l'image en fonction de la position du curseur) sur une image lors du survol de la souris, avec un cadre en fondu.
Pour utiliser l'objet MooLoupe il faut inclure dans sa page la bibliothèque mooTools (version actuelle 1.2.4) et le présent script. Ensuite, dans votre page web, il faut instancier sur un élément cible l'objet mooTooltip via l'évènement domready.
Voici la liste exhaustive des options possibles :
- width: Largeur de la zone affichée,
- height: Hauteur de la zone affichée,
- iniLeft: Position initiale de l'image dans la zone affichée (margin-top),
- iniTop: Position initiale de l'image dans la zone affichée (margin-left),
- zoom: Valeur du zoom lorsque la souris entre dans la zone affichée.
Attention ! La taille de l'image utilisée sera celle définie en HTML. Le zoom est défini par rapport à cette taille initiale.
Je mets en source uniquement l'appel à la classe, plus d'infos, ainsi qu'un exemple qui tourne, sur
http://sources.mightyprods.com/index.php?id=3
Source / Exemple :
<script type="text/javascript" src="mooTools.js"></script>
<script type="text/javascript" src="mooLoupe.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
new MooLoupe($('photo'), { width: 750, zoom: 2.5 });
});
</script>
<img id="photo" src="rep/photo.jpg" style="height: 422px; width: 750px;" alt="photo" />
Conclusion :
mooTools, c'est bien ;-)
Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.