+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : Hover en Javascript (/showthread.php?tid=5466)
Hover en Javascript - Fathom - 29-05-2011
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. 
RE: Hover en JS - Sephi-Chan - 29-05-2011
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.
RE: Hover en Javascript - php_addict - 30-05-2011
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
RE: Hover en Javascript - Fathom - 04-06-2011
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.