[Résolu] Images qui disparaissent lorsque la souris passe dessus

Je ne sais pas si vous avez déjà été confronté à ce glitch visuel: vous passez la souris sur un bouton, et pendant une demi-seconde, l'image disparait pour ensuite devenir une image légèrement différente.

Ce bug arrive lorsque le bouton change d'image de fond (background-image), car la nouvelle image de fond n'est pas encore (télé)chargée.
Je n'ai pas trouvé de sujet qui en parle, et j'ai vu un bug de ce type sur le site de alsacréations, qui pourrait être corrigé par la méthode que je vais proposer.

Après quelques recherches, j'ai trouvé une méthode dans laquelle la nouvelle image de fond est nécéssairement chargée, puisqu'elle est sur la même image que l'image de fond principale.

Comment ça fonctionne? C'est simple, il suffit de faire une image deux fois plus grande, dans laquelle on retrouve les deux images que l'on veux utiliser et au lieu de changer la propriété css background-image, il faut modifier la propriété background-position.

Prenons un exemple d'une image qui doit faire 100x20 pixels sur un site. (donc une image de 100x40 pixels minimum)

.bouton_envoyer {
background-image: url("images/envoyer.png");
background-position-x: 0; /*il est possible d'enlever les unités pour une valeur de 0*/
background-position-y: 0;
}

.bouton_envoyer:hover {
background-position-y: 20px;
} 

On peux bien sûr avoir une image de 200x20 pixels, mais il faut alors avoir:

.bouton_envoyer:hover {
background-position-y: 20px;
}

Il est aussi possible d'utilisé une méga-propriété background-position ou background, avec la valeur de x puis y:

.bouton_envoyer {
background: url("images/envoyer.png") 0 0; /* avec une seule propriété*/
}

.bouton_envoyer:hover {
background-position: 0 20px;
}

Modifié par Madeck (29 Oct 2009 - 21:37)

Bonjour,

Tu viens de réinventer la méthode des portes coulissantes en CSS ("sliding doors"). C'est donc une méthode largement connue, que l'on retrouve par exemple vers la fin de ce tutoriel. C'est donc bien trouvé, mais c'est un sujet largement traité. Dans le même genre et pour aller plus loin, on pourra s'intéresser aux sprites CSS.

Je profite de cette réponse pour signaler qu'il faut éviter les pseudo-contenus en CSS. Concrètement, dans l'exemple que tu donnes, sur l'image `envoyer.png` est une image qui porte le texte «envoyer» (ou tout autre texte utilisé pour faire un bouton), alors on a un gros problème d'accessibilité. On se repose sur CSS pour afficher un contenu (le texte), ce qu'il faudrait éviter. Du côté du HTML, on a peut être même quelque chose d'aussi affreux que ceci:

<input type="submit" value="" class="bouton_envoyer" />

ou encore

<a href="..." class="bouton_envoyer"></a>

Dans certains cas, on aura placé tout de même un texte dans le lien ou en value du bouton, mais on aura caché ce texte en CSS d'une manière ou d'une autre, et il suffit que l'image de fond utilisée à la place ne s'affiche pas pour qu'on ait un bouton invisible...

Une image-bouton accessible, c'est ceci:

<a href="..."><img alt="Intitulé du bouton" src="..." /></a>

ou encore ceci:

<input type="image" src="..." alt="Intitulé du bouton" />

... et rien d'autre. Dans ce cas de figure, et si on veut rester accessible, il faudra gérer le changement d'image au survol en JavaScript (c'est l'occasion d'apprendre si on n'y connait rien ), et on pourra aussi gérer le préchargement de la deuxième image en JavaScript.

Sur ce, bonne continuation.

Je suis d'accord avec le problème d'accessibilité. Cependant, si un utilisateur ne supporte pas le css, alors le texte qui est masqué par du css apparaîtrait, non? Il est aussi possible, comme dans le tutoriel vers lequel tu as mis un lien, de n'utiliser cette technique que pour le fond du lien, et d'afficher du texte par dessus.

Aussi, l'utilisation d'une seule image de fond dont on n'affiche que certaines partie (comme le fait facebook, avec cette image) semble avoir plusieurs avantages: si jamais on modifie cette image, il suffit d'en modifier le nom pour être sûr qu'une ancienne version en cache ne s'affiche pas à la place; moins d'images signifie moins de requêtes, et donc un temps moins long de chargement.

Bonjour,

Madeck a écrit :
Cependant, si un utilisateur ne supporte pas le css, alors le texte qui est masqué par du css apparaîtrait, non?

Oui en effet, le problème se pose plutôt quand le navigateur supporte les CSS mais pas les images (ce qui sera le cas pour un aveugle utilisant un lecteur d'écran avec n'importe quel navigateur actuel, son navigateur affichera la page parfaitement, mais son lecteur d'écran ne pourra lui restituer le contenu de l'image).

Madeck a écrit :
Il est aussi possible, comme dans le tutoriel vers lequel tu as mis un lien, de n'utiliser cette technique que pour le fond du lien, et d'afficher du texte par dessus.

C'est tout à fait le but présenté dans le tutoriel.

Madeck a écrit :
Aussi, l'utilisation d'une seule image de fond dont on n'affiche que certaines partie (comme le fait facebook, avec cette image) semble avoir plusieurs avantages: si jamais on modifie cette image, il suffit d'en modifier le nom pour être sûr qu'une ancienne version en cache ne s'affiche pas à la place; moins d'images signifie moins de requêtes, et donc un temps moins long de chargement.

C'est bien la technique des sprite dont parlait Florent.

Notons que les sprites, quand on y place des boutons, des pictogrammes ou des titres en images, multiplient le risque d'abus des «faux contenus» en CSS.

Je pensais que les lecteurs aveugles utilisaient des navigateurs tels que Lynx, mais effectivement, il est plus logique qu'il utilisent un navigateur normal, qui ne lira pas le texte «effacé» par le CSS.

Merci pour vos réponses complètes et rapides. Au moins, maintenant, je sais que ça s'appelle des sprite, et que sur mon site elles peuvent poser des problème d'accessibilité.

Edit: J'ai vu quelque part des gens qui proposent cette méthode:

<a href="..." title="envoyer"></a>

Est-ce une bonne alternative? Est-ce qu'utiliser un attribut name au lieu de title serait mieux?
Modifié par Madeck (29 Oct 2009 - 14:18)

Non ce n'est pas une bonne méthode car title n'est pas lu comme le alt (cela dépends de la configuration du lecteur d'écran). Lorsqu'une image porte du contenu et/ou est le support d'un lien elle DOIT se trouver, toujours, dans le code HTML. Pour des raison évidente d'accessibilité, mais surtout parce que c'est logique (HTML = contenu / CSS = styles).

Par définition, l'attribut title donne une information facultative, c'est à dire pas nécessaire à la compréhension du contenu. Ce ne doit pas être l'information principale.

Madeck a écrit :
Est-ce une bonne alternative?

Non.

Madeck a écrit :
Est-ce qu'utiliser un attribut name au lieu de title serait mieux?

Ce serait pire. L'attribut name n'est pas pensé pour être consulté directement par l'utilisateur, même de manière volontaire.

La seule solution accessible est la suivante:

<a href="..."> Ici l'intitulé de mon lien </a>

Que l'intitulé soit une image avec un texte alternatif n'invalide pas cette solution. L'élément IMG, avec l'attribut alt, est le seul moyen en HTML d'associer directement un texte à une image (avec l'élément OBJECT, mais l'implémentation de ce dernier laisse à désirer). Tout autre moyen qui ne lie pas directement le texte et l'image expose à des problèmes dans les cas où l'image ne peut pas être affichée pour une raison ou une autre.

Exemples de situations où des images peuvent ne pas être affichées:
- le chemin vers l'image est mauvais et on ne s'en est pas rendu compte avant de passer en production;
- l'image est un fichier qui contient des erreurs, et ne sera pas affichée par certains navigateurs; le serveur qui héberge les images du site ne répond pas temporairement;
- un problème de connexion de l'utilisateur fait que l'image n'est pas récupérée ou mets beaucoup de temps à être chargée;
- une connexion en bas débit fait que l'image n'est pas chargée pendant de longues secondes, voire minutes;
- l'utilisateur a une connexion bas débit et utilise un outil pour bloquer le chargement des images lorsqu'il surfe;
- l'utilisateur surfe avec un téléphone mobile et bloque le chargement des images pour gagner du temps;
- l'utilisateur surfe avec un téléphone mobile qui n'interprète pas complètement CSS ou JavaScript;
- etc.

Ok, ok, j'ai compris .

Edit: j'ai ajouté [Résolu] au titre de mon sujet.
Modifié par Madeck (29 Oct 2009 - 21:38)