11521 sujets

JavaScript, DOM et API Web HTML5

Je ne vois pas trop ce qui nécessite un plugin pour changer le background image au survol d'un lien...

Je t'ai fait un exemple simple, je pense que tu peux facilement l'adapter. L'image qui apparait au survol est juste la source (contenu de l'attribut 'href') du lien.
Modifié par Freez (13 Jan 2015 - 15:54)
Je te remercie pour ton exemple !

Entre temps, j'ai trouvé un site plus récent avec l'effet désiré: http://joris.works

Je débute en JavaScript si quelqu'un peut me fournir un début d'ébauche ou juste m'expliquer les grandes lignes par rapport à l'exemple ci-dessus se serait gentil.
Modifié par Starbuck (13 Jan 2015 - 23:38)
Oui effectivement avec un effet de fondu c'est forcément un peu plus complexe... mais pas impossible sans se casser la tête.

Un nouvel exemple ici !

Il suffit de mettre une transition CSS sur le background de la page et d'alterner entre une image blanche (ici un gif de 1x1px étiré sur toute la surface de la page) et les images de fond que tu veux afficher au survol de chaque lien.
Le secret est de pré-charger les images pour ne pas les voir se charger lorsqu'on survole le lien.

EDIT : rectification, ça fonctionne que sous chrome ... je regarderais si il y a des techniques compatibles tous navigateurs (récents).

EDIT 2 : Une technique qui marche aussi avec Firefox, créer un pseudo élément body:before en position absolue qui couvre entièrement la page et faire varier son opacité. Cela assure l'effet fondu vers la couleur de fond de cet élément.
Exemple ici !
Modifié par Freez (15 Jan 2015 - 10:14)