Hover href et sprites... Je craque un peu... :)

Salut à tous !!

Je suis un peu débutant dans le web, faut-il le dire, j'ai fait un blog en drupal qui doit être bourré de bug...
Et depuis quelques jours je m'intéresse aux sprites parce qu'il me semble que c'est vachement mieux que les onmouseover... Bon, j'ai fait des milliards de recherches (à peine abusé ) sur le sujet, sur l'intégration, pas de problème outre mesure, mais par contre, je bute sur un petit problème qui m'empoisonne la vie.

En effet, je pense que c'est rien à faire, mais je trouve pas :
Depuis l'intégration du sprite, impossible de faire un href qui soit cliquable... Et je ne sais pas pourquoi ! Du coup, je pense qu'ici, vous allez tous me dire : "Ben alors vitrol, c'est facile faut faire ça !!" et moi de dire : "bein ouais c'est vrai !!"

voici le code :

 <div style="width:800px; margin:40px auto;"><!-- la div container-->
        <div id="sprite-blog"><!-- la div en question-->
        <a href="blog" alt="mon blog" title="mon blog"></a>
        </div>

et voilà le CSS comment j'ai fait le truc :

#sprite-blog {float:left; width:240px; margin: 0px 30px 0px 10px; height:240px; display:inline-block;
	background:url("/drupal/sites/all/themes/andromeda/images/icon/icone_sprite_blog.png") 0px 0px no-repeat;}

#sprite-blog:hover,#sprite-blog:active,#sprite-blog:focus{background-position:-240px 0px; }

Voilà tout... Le résultat si vous souhaitez voir : www.awinelife.com

Merci d'avance à tous !!

Vitrol

Bonjour,
Mais si elle est cliquable, dans le coin en haut à gauche de l'image !
Le problème réside dans le fait que ton élément a a une taille nulle (c'est un élément inline vide...). Il faut donc lui donner la taille de ton bloc afin qu'il le remplisse.
Toutefois, comme c'est un élément inline, on ne peut pas lui définir de taille directement, il faut le transformer en élément de type block, pour ça, utiliser display : block.

Au final, tu devrais avoir quelque chose comme ça :

#sprite-blog > a {
  display: block;
  height: 100%;
  width: 100%;
  padding-left : 0;
}

Toutefois, ça reste moyen de créer un élément a en le laissant vide.

Ce serait peut-être mieux, dans ton cas, de garder les images et le mouseover
Modifié par Gothor (03 Aug 2012 - 15:38)

Ben voilà, ce que je disais dans mon intro se révèle vrai : "bein ouai, c'était rien... lol"
Et tu penses que c'est mieux le mouseover ? pourquoi ? si je remplis ma balise a ?

En tout cas merci !! ça à l'air de marcher !!

Bah,
Sur ce forum ils ne sont pas fan des balises vides car elles ne sont pas porteuses d'information et qu'un document HTML doit en procurer. En fait, il faut qu'on puisse comprendre les éléments de ton site même si le CSS était désactivé.
Or, en mettant l'image dans le CSS, elle n'apparaît plus et donc ton lien ne diffuse pas d'information. Donc face à ça, deux choix : mettre du texte dedans, quitte à le cacher en CSS... Ou mettre ton image dans le HTML et la modifier à l'aide de JavaScript et d'un événement mouseover.

Je connais pas grand chose en terme d'accessibilité, mais si quelqu'un sait, est-ce qu'un modèle comme celui-ci est accessible ? http://jsbin.com/ahinex/2/edit (Désolé pour les images nazes)
Modifié par Gothor (03 Aug 2012 - 16:17)

Ben je comprends pourquoi il faut mettre de l'info dans ses balises, mais c'est vrai que sur la W3C, il ne parle pas du côté vide des balises, enfin, j'ai pas vu.
Mais j'ai ajouté du texte dans ma balise a !

et si quelqu'un à la réponse à la question de gothor, c'est une très très bonne question, et je suis preneur aussi

Merci Gothor en tout cas, tu m'as évité de longue nuit d'insomnie pour une taille de balise !!

Bonjour,

Gothor > euh... Ce n'est pas qu'on ne soit pas fan. C'est juste qu'une image porteuse de contenu DOIT être dans le code HTML, ne serait-ce que pour que les robots voient également,tout le contenu. Ton idée de mettre juste du texte masqué à la place est plus que mauvaise :elle donne l'impression de régler le problème mais l'agrave en fait.


En résumé, l'image dans le HTML, avec un attribut alt proprement rempli. Le sprite n'est pas applicable dans ta situation.

Ah ok, merci Laurie-Anne ! Du coup, je vais rechanger et faire du onmouseover... Mais je trouvais cela pas très fluide, mais je vais tenter avec un peu de javascript...

En tout cas, merci beaucoup !!! Le sujet peut être labélisé RESOLU !!

MERCIIIIIIIIII !!!!!!

Bonjour,

Attention à ne considérer qu'une seule vérité existe.

Dans ton cas, l'utilisation de sprites ne serait pas problématique puisque de toute manière, tes images ont une lien textuels (et visible) directement au dessous. Donc, dans tous les cas, tu as un lien accessible aux moteurs de recherche, handicapés et aux personnes sans CSS et sans images.

@Gothor, le seul problème dans ton exemple est que tu utilise un <div> et que cet élément ne peut pas recevoir le focus de la part de certains lecteurs d'écrans. La solution la plus simple serait de remplacer ce div par un élément <a>. Autrement, tu pourrais utiliser aria pour indiquer qu'un élément est interactif, mais ça ne passera pas sous tous les lecteurs. Mais autrement, tu as une image porteuse de contenu et si tu as un attribut alt, elle sera accessible.

Pour des techniques en CSS pour s'assurer qu'un élément soit accessible d'un lecteur d'écran tout en étant caché, je te conseillerais de jeter un oeil aux classes d'aide du html5 Boilerplate

Merci pour ta réponse Vaxilart ! ça alimente bien mon information

Ce que je me suis dit c'est que pour mes images, ça ne pose pas vraiment de problème d'être en mouseover et donc d'avoir mon image dans mon html, par contre, mes "labels" contenant du texte, je peux les conserver dans mon css en sprite.

Néanmoins, quand je fais le test sur le site de la w3c, les "alt" apparemment ne sont pas valide dans le cas de mes labels en sprite.

Bon, ben "y a quelque chose qui cloche là-dedans... J'y retourne immédiatement !!"

Salut,

L'attribut `alt` est seulement valide sur un élément <img>, d'où l'erreur du validateur