Effet de survol sur vos éléments avec mootools

julien lavault — Mon, 16 Jun 2008 10:15:00 +0000

Pour enrichir vos sites internet, il peut être sympa d'ajouter des effets de survol progressif à vos liens, boutons, images, illustrations... Pour cela, mootools est parfaitement adapter et permet très facilement d'ajouter un gestionnaire d'évènement sur certains éléments !

Prenons l'exemple d'un effet de changement de couleur progressif de la couleur d'un texte d'un lien au survol de celui ci:

var fx = new Fx.Styles($('idElement'), {duration:200, wait:false});

$('idElement').addEvent('mouseenter', function(){
fx.start({
'background-color': '#666'
});
});

$('idElement').addEvent('mouseleave', function(){
fx.start({
'background-color': '#333'
});
});

Voila, l'exemple est assez simple, il ne reste plus qu'a paramétrer le Fx.Styles et le tour est joué !

JFLAD Blog: Recherche & développement: Ajax, Javascript, CSS, XHTML, Flash, Référencement, Webmarketing, Open Source, gestion de projet - effets

Effet de survol sur vos éléments avec mootools