Sprites et menu déroulant

Bonjour,

Mes recherches s'avérant négatives, je voudrais savoir si je peux refaire le menu suivant en utilisant une image sprite ?

le menu en question
Modifié par yuzin (12 Aug 2010 - 18:59)

Bonjour,

Comme les images de background ne peuvent pas avoir d'attribut alt, créer un menu avec une image sprite est déconseillé pour des questions d'accessibilité. Si pour une raison particulière les images ne se chargent pas (connexion internet problématique, serveur instable, désactivation des images pour sauver de la bande passante), l'utilisateur n'aura plus accès au menu comme c'est présentement le cas avec ton site.
Modifié par Tony Monast (12 Aug 2010 - 19:10)

Bien sur, il y a des gens qui n'ont pas l'adsl, bien sur il y a des pannes de serveur, mais si l'on désactive les images lorsque l'on va sur le site d'un peintre, je suis surpris. Dois-je faire un site pour le minitel ?

Il n'y pas que des images (peintures) qui sont accessibles par le menu de ton site. Il y a la biographie, le livre d'or, les coordonnées où acheter les oeuvres, etc. Le site n'est pas exclusivement visuel. Alors oui, c'est possible que les images soient désactivées par le visiteur.

À toi maintenant de choisir la qualité et le niveau d'accessibilité désiré pour ton site.

Sinon, pour répondre à ta question, je ne vois pas ce qui t'empêcherait techniquement d'utiliser une image sprite.
Modifié par Tony Monast (12 Aug 2010 - 20:05)

Je signale que lorsque les images sont désactivées, mon site est accessible par un menu situé en bas de page, rubrique "plan sommaire" où l'on peut atteindre les catalogues où l'on voit les images qui sont en flash, sauf si on a aussi désactivé flash.
Donc je suis bien content de savoir que ce type de menu déroulant soit réalisable avec une image sprite, mais je n'ai pas compris comment faire pour résoudre ce problème. J'arrive à faire une barre de menu où les images changent au survol mais pas faire dérouler un nombre variable d'images, d'où ma question de départ que je complète par un "comment".
Merci

Juste pour bien te situer, as-tu lu quelques tutoriaux sur les images sprites? Est-ce ta première expérience?

En ce moment, je ne peux pas aller trop dans le détail, mais de ce que je vois de ton menu, je dirais qu'il suffirait de modifier ton fichier menu-css.php et :

- Créer ton image contenant toutes les images
- Donner une taille fixe aux li de ton menu
- Utiliser background-position pour placer la bonne image pour chaque li

Non?

J'ai découvert les sprites il y a peu de temps, j'ai lu tous les tutoriels que j'ai trouvé et je me suis essayé sur un autre site: ici où je n'ai pas réussi. Il faut dire que le problème est différent et qu'il n'est peut-être pas réalisable par cette technique.

C'est pourquoi, avant de m'engager, j'ai posé la question de la faisabilité hier pour ce menu déroulant qui est assez fourni et qui me prendra un certain temps. Je vais attaquer incessamment dès que j'aurai remplacé mon vieux G5 qui vient de rendre l'âme. (je travaille sur un eMac encore plus vieux et je vois la différence)

Hello,

@Tony : Il est possible de faire un menu accessible et avec des sprites dans ce cas. Les images sont de tailles fixes et non transparentes.

On peut facilement mettre l'image en fond de chaque lien en changeant le background-position et masquer le texte avec le bon vieux text-indent:-999em. Il faudra aussi donner un display:block et les bonnes dimensions aux liens. Un overflow:hidden ne fera pas de mal non plus.

Si tu veux quelque chose de plus accessible (text-indent a ses détracteurs), tu peux rajouter un <span></span> vide à l'intérieur de chaque lien, positionné en absolute et en width/height 100% pour qu'il prenne toute la dimension de son parent <a>. C'est ce span qui contiendra l'image de fond, et comme il se positionnera sur le texte, il est alors inutile de masquer le texte avec text-indent.
Si les images sont désactivée, le texte normal deviendra visible. Parfaitement accessible à mon sens.

Si tu veux en plus éviter de polluer ton code avec des <span> inutiles, tu peux obtenir le même effet avec :after ou :before, mais tu perds une petite compatibilité avec IE7 et moins.

A toi de voir la solution qui te semble la plus adaptée (pour ma part, c'est la dernière que j'utiliserai, au diable IE7. Au pire tu fais une feuille de style rien que pour lui où tu utilises le text-indent plutot que le :after)
Modifié par Tymlis (13 Aug 2010 - 14:33)

Bonjour,

@Tymlis : aucune des solutions de masquage de texte pour les sprites n'est parfaitement accessible. Il me semble que Tony avait raison en parlant de "choix d'un niveau d'accessibilité".

text-ident ne fonctionne pas mieux que display: none quand l'image ne s'affiche pas. Quant à l'élément positionné en absolu par dessus le texte, cela n'est pas "parfaitement accessible" : si le texte dépasse de la boîte du lien, il est tronqué ; il n'est pas sélectionnable ; ...
Modifié par Julien Royer (13 Aug 2010 - 10:43)

Merci. Je vais essayer tout ça.

Hello,

Bien sur, la solution a choisir est en fonction du degré d'accessibilité que tu souhaites obtenir. Pour ma part, une navigation clavier, et la possibilité d'utiliser le menu avec toutes les combinaisons de images on/off, css on/off me semble généralement acceptable.

Pour ce qui est du texte selectionnable, le span en position absolute n'empeche pas la selection du texte.

Tymlis a écrit :
Bien sur, la solution a choisir est en fonction du degré d'accessibilité que tu souhaites obtenir. Pour ma part, une navigation clavier, et la possibilité d'utiliser le menu avec toutes les combinaisons de images on/off, css on/off me semble généralement acceptable.

Je préfère ce discours à celui de ton message précédent.

Tymlis a écrit :
Pour ce qui est du texte selectionnable, le span en position absolute n'empeche pas la selection du texte.

Elle empêche la sélection du lien si le premier clic a lieu sur la boîte du lien : dans ce cas, la boîte du span récupère l'événement clavier et la sélection ne peut pas avoir lieu. Dans le cas d'un lien, c'est anecdotique, mais ce que je voulais démontrer c'est que comme il s'agit d'une "bidouille", on n'est pas à l'abri de quelques mauvaises surprises.

Bonjour,
J'ai modifié le css de mon menu, mais je bute sur problème d'affichage de l'image de fond.
voir: ici . Je n'ai fait que les sous-menus "l'artiste".
Et je n'ai pas compris l'histoire du span vide. Pour le moment j'en suis resté à text-indent.

J'ai bien compris les objections sur les sprites en matière d'accessibilité, mais je cherche à passer d'un menu comportant 48 images (avec le survol) à une seule.
Modifié par yuzin (16 Aug 2010 - 14:32)

Bonjour Yuzin,

Je cherche depuis un bon moment à faire un menu dans le genre du tiens, (menu déroulant avec des images), et je dois avouer que mes recherches ne mène pas à grand chose.

J'étais soulagé de voir ton site et d'avoir un exemple concret et fonctionnel ! Par contre, j'ai beau éplucher le code, je ne comprends pas comment cela fonctionne. Pas de display: hidden, ni quoi que ce soit... Est-ce géré avec mootools ? mais là encore le css devrait être visible...

Bref : si certains sont disposés à m'expliquer comment a été réalisé le menu du site de Yuzin (http://www.joseeleroux.fr/), j'en serai très heureux !

et un petit merci à alsacréation en passant pour cette mine d'info =)

En fait, pour être tout à fait exact, les premiers éléments sont en place, mon code ressemble à cela :

<a href="#" id="menu_drapeau">drapeau actuel
	<span>
	<ul id="menu_drapeau_list">
		<li id="drapeau_a" class="menu_drapeau_x"><a href="#">langue A</a></li>
		<li id="drapeau_b" class="menu_drapeau_x"><a href="#">langue B</a></li>
		<li id="drapeau_c" class="menu_drapeau_x"><a href="#">langue C</a></li>
	</ul>
	</span>
</a>

avec un tout petit bout de css

#menu_drapeau {display: block;}
#menu_drapeau_list {display: none;}
#menu_drapeau:hover #menu_drapeau_list {display: block;}

J'ai beau retourner le code dans tous les sens (des div à la place des <a>, avec ou sans liste, etc...), je dois oublier quelque chose, puis que même si le résultat arrive à varier, il ne fait en tout pas ce que j'aimerais... Quelqu'un saurait me dire pourquoi ?

Je ne reviendrai pas sur la question évoquée plus haut sur l'accessibilité : c'est un choix qui ne dépend pas de moi, mais j'essaye de faire rentrer l'idée progressivement ;o)

En attendant vos réponses, je vous souhaite une bonne fin de journée

N.