Hover en Javascript

[Fathom]

Salut à tous !

Cette-fois ci, j'ai (encore) besoin de votre aide.

Certaines liens de mon site sont des images. Et comme beaucoup de monde (je crois), j'ai décidé de leur mettre un effet de hover, avec le CSS.

Jusqu'ici, bien de bien méchant. Ma solution fonctionne à 100%, aucun souci.

Le truc dont je me suis rendu compte, c'est qu'avec cette façon de faire, les images n'étaient parfois pas "chargées" instantanément. Je ne sais pas si je suis une exception, mais dans tous les cas ça fait perdre en beauté à mon site. (Même si le temps de chargement n'excède jamais une petite seconde)...

Alors voilà, j'aimerai savoir si certains d'entre vous se sont tournés vers un usage du JS (et je ne crache surtout pas sur JQuery par la même occasion ) afin d'avoir un hover sur lien-image parfait.

[Sephi-Chan]

Le mieux est d'utiliser la technique des sprites CSS : une image qui contient les 2 états de ton bouton, normal et survolé. Le but est ensuite de jouer avec la propriété background-position pour afficher la partie que tu veux.

Voici un article qui parle de cette technique sur Alsacréations.

[php_addict]

a.balise

{

width:20px;

height:20px;

background:url(sprite.gif);

background-repeat:no-repeat ;

background-position:-95px 0px;

}



a.balise:hover

{

width:20px;

height:20px;

background:url(sprite.gif);

background-repeat:no-repeat ;

background-position:-95px -59px;

}

la coordonnées 0px 0px etant le coin en haut à gauche, et tu est en negatif quand tu descend en bas ou deplace à droite

[Fathom]

Hum, je vois à peu près... Merci de votre aide.

Je posterai ici sous peu, si j'ai réussi à mettre en place la solution proposée.