Background-image disparaît au premier hover

Bonjour à tous,

Pour simplifier l'explication, au passage de la souris j'aimerai obtenir ce résultat ultra-basique:
www.alterterra.fr/testhover2.html

Au lieu de celui-ci : www.alterterra.fr/testhover.html

A savoir ce problème de courte disparition du background-image (de ma <div> dans le cas présent) lors du changement de background avec le hover. Disparition uniquement à la première tentative de hover lorsque la page est chargée.

Dans le second lien, testhover.html vous constaterez que j'ai essayé aussi avec du javascript (div "deux") sans que cela change quoi que ce soit.

Seul le "javascript" généré par dreamweaver mais pas apprécié par le W3C donc que j'aimerais éviter, fonctionne du premier coup.

La solution doit être tellement évidente que je ne la voit pas.

Si quelqu'un peut m'aider...

Il faut créer une image contenant les 2 états, normal et hover, ça s'appelle un sprite.
Ensuite il faut que l'élément ciblé soit de type block qu'il ait la hauteur et largeur de l'élément mis en fond.
Et au hover on affiche le meme sprite mais positionné différemment en CSS

Ornitorinc a écrit :
Il faut créer une image contenant les 2 états, normal et hover, ça s'appelle un sprite.
Ensuite il faut que l'élément ciblé soit de type block qu'il ait la hauteur et largeur de l'élément mis en fond.
Et au hover on affiche le meme sprite mais positionné différemment en CSS

Que se passerait-il si les images ou les CSS ne pouvaient pas être chargés (les raisons sont multiples, variées et pas si anecdotiques que cela...) ?
Si l'utilisateur ne pouvait ou ne voulait pas les voir (troubles de la vue, cécité, lecteur d'écran, etc...) ?
Comment aurait-il l'information sur la fonction du lien (vide en l'occurrence) ?

A priori, si je me fie aux exemples donnés, l'image est porteuse de sens, d'information, et devrait donc idéalement trouver sa place dans le html via la balise image, comportant obligatoirement une alternative textuelle pertinente.

Il faudrait donc gérer les évènements sur le lien via JavaScript pour onmouseover et onfocus (pour la navigation au clavier), le script doit substituer l'image (en modifiant l'attribut src), et pourra éventuellement précharger les images de l'état de survol pour supprimer la latence du chargement.
Il existe de nombreux scripts sur le Web qui font cela très bien.

Ainsi, l'information reste disponible pour tout le monde (même si JavaScript est désactivé, même si les images ou les feuilles de styles ne sont pas chargés)

My two cents.

Merci pour vos réponses,

Je vais tester le système du sprite dans un premier temps et puis également un preload d'image en javascript (que j'ai déjà utilisé dans d'autres cas de figures) et je choisirai au final, si les 2 fonctionnent, la méthode la plus pratique à mettre en place.

Bonsoir,

Les deux solutions vont fonctionner, mais ne répondent pas aux mêmes problématiques.
Le choix te revient évidemment, mais le meilleur choix possible consiste à sauvegarder l'information indépendamment des solutions mises en œuvre (CSS ou JavaScript), ou de leur facilité d'implémentation, indépendamment du média utilisé pour accéder à cette information, indépendamment du matériel, des personnes qui veulent y accéder...

Perso quand j'utilise les sprites j'ajoute un text-indent de -9999em ce qui fait disparaitre le texte visuellement, mais si un deficient visuel passe par la ou que la personne a désactivé les css on a toujours le contenu du lien
Modifié par Ornitorinc (06 May 2013 - 08:50)