28173 sujets

CSS et mise en forme, CSS3

Image background ou <img> accesibilité

Bonjour à tous, (j'espere que je suis dans le bonne section pour poser ma question ...)

Question simple pour ceux qui connaissent la réponse.

J'ai un menu dans mon site Web sous forme de tableau:
ex upload/4442-exemple.jpg

J'ai mis une balise <a> contenant un id avec une image background pour faire afficher mes menus.... Êtes-ce mieux mettre un id et de mettre un image background ou de mettre un <img src... /> dans le <li> ? Lequelle est le plus accessibilité!? Mais je crois qu'il me sera impossible de faire des images rollover plus tard si je met des <img>...

Les navigateurs ne doivent pas interpréter les "title" et les "alt" de la même maniere.... Lequelle est le plus justifier à utiliser pour mon cas.

Avantage "id" = Je peut changer les images de toute mon site en quelque minute...


merci de votre savoir.


/*css*/

a#b_garde{
   background: url(../img/fr/menu/b_garde.gif ) no-repeat top left;
   width: 89px;
   height:27px;
}
<ul id="menu">
         <li><a href="#" id="a" title="a"></a></li>
         <li><a href="#" id="b" title="b"></a></li>
         <li><a href="#" id="c" title="c"></a></li>
         <li><a href="#" id="d" title="d"></a></li>
         <li><a href="#" id="e" title="e"></a></li>
</ul>


Ou

<ul id="menu">
         <li><a href="#"  title="a"><img src="img/fr/menu/b_garde.gif " /></a></li>
         <li><a href="#"  title="b"><img src="" /></a></li>
         <li><a href="#"  title="c"><img src="" /></a></li>
         <li><a href="#"  title="d"><img src="" /></a></li>
         <li><a href="#"  title="e"><img src="" /></a></li>
</ul>

Modifié par bensti2 (25 Jan 2006 - 20:57)
Salut,
Pour commencer, tu pourrais faire un peu plus attention à ton orthographe et à tes fautes d'inattention parce que là ton texte en est truffé!


a écrit :
Mais je crois qu'il me sera impossible de faire des images rollover plus tard si je met des <img>...


Oui tout à fait sauf si tu utilises javascript. Les backgrd sont recommandés dans ce cas.


a écrit :
Les navigateur ne doivent pas interpréter les "title" et les "alt" de la meme maniere.... Lequelle est le plus justifier à utiliser pour mon cas.


Firefox n'affiche pas les alt mais les titles au passage du curseur.
Les alt sont vivement conseillés pour des questions d'accessibilités, tu peux même mettre alt="" si l'image n'evoque rien.
Dans ton cas, met un title sur le li ou le a mais là je ne sais pas quelle est le meilleur choix pour l'accessibilité.
Modifié par Hermann (25 Jan 2006 - 20:54)
Modérateur
S'il s'agit d'un menu en images, sans texte écrit en dur dans le html, la méthode la plus accessible est la suivante :


...
<li><a href="accueil.htm"><img src="mnu_accueil.jpg" alt="Accueil" width="100" height="40" /></a></li>
<li><a href="photos-coquines-de-raphael.htm"><img src="mnu_photos.jpg" alt="Photos" width="100" height="40" /></a></li>
...


Pour t'assurer de l'accessibilité de ton menu, installe la Web Developer Bar pour Firefox, et test ton menu. Avec cet outil, tu peux activer ou désactiver les images et les CSS séparément :

- Avec images et avec CSS
- Avec images mais sans CSS
- Sans images mais avec CSS
- Sans images et sans CSS

* Tester aussi sans Javascript

Si tu peux encore utiliser ton menu facilement, avec la souris et le clavier, c'est que c'est accessible.

Par contre, il est toujours préférable de prévilégier le menu en texte html pour permettre à l'utilisateur d'agrandir le texte du menu.

Mais parfois, il faut faire des concessions entre accessibilité et graphisme.
Modifié par Tony Monast (25 Jan 2006 - 21:10)
a écrit :
Par contre, il est toujours préférable de prévilégier le menu en texte html pour permettre à l'utilisateur d'agrandir le texte du menu.


Je le sais mais la job c'est la job! faut écouter le patron Smiley fache
Modifié par bensti2 (25 Jan 2006 - 21:43)
Modérateur
bensti2 a écrit :
Je le sais mais la job c'est la job! fait écouter le patron Smiley fache


Bon alors utilise les images <img /> avec un alt et un hover en Javascript. C'est tout à fait acceptable et ton patron sera content.

Est-ce parce qu'il veut que tes boutons possèdent une typographie spéciale ? Il y a toujours moyen d'utiliser du texte en html et de mettre une image de background à chaque lien du menu, ca donne parfois un effet intéressant et l'utilisateur peut encore agrandir le texte.

Comme je te dis, utilise la méthode que tu veux, mais assure-toi que ca reste accessible après la série de test CSS/Images actives ou non dans le navigateur.
Modifié par Tony Monast (25 Jan 2006 - 21:28)
Tony Monast a écrit :
Est-ce parce qu'il veut que tes boutons possèdent une typographie spéciale ? Il y a toujours moyen d'utiliser du texte en html et de mettre une image de background à chaque lien du menu, ca donne parfois un effet intéressant et l'utilisateur peut encore agrandir le texte.


Autre solution intéressante :
- une image (<img>) à fond transparent pour le texte, avec attribut alt correctement renseigné pour l'accessibilité ;
- une image de fond (CSS) et une deuxième au survol (toujours en CSS).

J'avais fait un test dans cet esprit là il y a quelques jours (il n'y manque que le changement d'image de fond au survol).
http://web.covertprestige.info/test/01-zone-cliquable-graphique-et-accessible.html
Hermann a écrit :

Mais je crois qu'il me sera impossible de faire des images rollover plus tard si je met des <img>...

Oui tout à fait sauf si tu utilises javascript. Les backgrd sont recommandés dans ce cas.

Bonsoir,
Il me semble au contraire que c'est tout à fait possible.
Par exemple, l'image unique suivante avec laquelle on voudrait faire l'effet rollover : 
<a href="#"><img src="menu1.gif" width="100" height="50" /></a>

Il suffit simplement de faire le code suivant pour que seule la première partie de l'image apparaisse d'abord, et le seconde seulement au survol : 
 a {
	display: block;
	width: 50px;
	overflow: hidden;
}
a img:hover {
	margin-left: -50px;
}


Sauf que bien sûr, ça ne marche pas avec la version actuelle de IE (mais seulement avec la prochaine, IE7)

Je m'étais déjà penché sur la question, et pour que ça marche avec IE, et il suffit d'appliquer une marge négative à l'image, qui cacherait la première partie de l'image, et appliquer un padding left au "a:hover" afin que la première partie de l'image soit révelée. Bien sûr cela implique d'inverser les deux parties de l'image unique :la partie de droite apparaissant d'abord, et celle de gauche au survol.

Le css pour l'ensemble des navigateurs + le commentaire conditionnel pour IE 6

<style type="text/css">
a {
	display: block;
	width: 50px;
	overflow: hidden;
}
a img {
	margin-left: -50px;
}
a img:hover  {
	margin-left: 0px;
}
</style>
<!--[if IE 6]>
<style type="text/css">
a:hover  {
	padding-left: 50px;
	width: 0px;
}
</style>	
<![endif]-->


On peut éventuellement ajouter un hack pour IE mac, ou un autre commentaire conditionnel pour IE 5.5 (simplement remplacer le "width 0", par un width 50 à cause de box model de IE).


remarque : pourquoi ne pas utiliser le code destiné à IE6 pour tous, en s'épargnant ainsi le commentaire conditionnel ? Ca marcherait en effet aussi pour Firefox et Opera. Mais ça ne marcherait pas avec Netscape. (Safari, je sais pas). Celui ci applique le "padding-left" sans pour autant faire apparaître la partie caché par le 'margin-left', donc plus rien. A vrai dire je m'attendais à ce que Firefox et Opera réagissent ainsi. Donc autant garder ça juste pour IE.
Modifié par Alan (26 Jan 2006 - 00:26)
D'ailleurs j'y pense après coup. Puisqu'il n'y aura plus ce problème de prise en charge avec IE 7, autant utiliser un hack lu par IE mac et win (sauf IE7), et un commentaire conditionnel à cause de model box IE pour les versions inférieures à IE6 win :
<style type="text/css">


a {
	display:block;
	width: 50px;
	overflow: hidden;
}
a img {
	margin-left: -50px;
}
a img:hover  {
	margin-left: 0px;
}
* html a:hover { /*hack uniquement interprété par IE Win+Mac*/
	padding-left: 50px;
	width:0;
}
</style>

<!--[if lt IE 6]> 
<style>
* html a:hover { 
	width: 50;
</style>	
<![endif]-->


EDIT :
Je viens de me rendre comte que quand j'écris :
< ! [ endif ] -->
sans les espaces, les crochets disparaissent une fois envoyé ! C'est pas pratique pour partager du code Smiley ohwell
Modifié par Alan (26 Jan 2006 - 01:47)
Bonjour,

Les hacks peuvent être évités en recourant à la propriété clip plutôt qu'à un overflow:hidden. Voir http://blog-and-blues.org/recherche/?q=clip

D'autre part, lorsqu'on utilise via <img> des images "doubles" (incluant l'aspect au survol)... pensez au résultat lorsque les styles CSS ne seront pas appliqués comme prévu. A éviter, AMHA Smiley cligne
Modifié par Laurent Denis (26 Jan 2006 - 05:39)
Bonjour,

Ah oui merci, c'est effectivement plus simple avec cette propriété (que je n'avais encore jamais testée dans mon bac à sable )
Le simple code suivant fonctionne, et plus besoin de hack ni de commentaire conditionnel (sauf éventuellement pour IE 5.01, qui a l'air de mal digérer), ni d'inverser les parties de l'image "double".
a {
	position: absolute;
	clip: rect(0 50px auto 0);
}
a:hover {
	margin-left: -50px;
	clip: rect(0 100px auto 50px);
}

Je n'ai pas placé de virgule dans le cadre de l'exemple, mais sur la question de la syntaxe, lire http://blog-and-blues.org/weblog/2004/08/14/272

A+
Modifié par Alan (26 Jan 2006 - 11:58)
Alan >
Il n'y aurait pas eu moyen de simplifier ta méthode en précisant les propriétés CSS ainsi :
a {
	display: block;
	width: 50px;
	overflow: hidden;
}
a:hover img {		/* et non pas a img:hover */
	margin-left: -50px;
}

Comme IE reconnait la pseudo-classe :hover pour les liens, ça pourrait marcher, non ?
Bah j'avais commencé par ça (sans trop y croire), et non, marche pas du tout avec IE. Maintenant pour te donner l'explication précise ?
uhmm assez difficile comme choix... le prob c'est qu'il faut 2 choses , fonctionne sur pas mal toute les navigateur , internet 5.x netscape 6+ firefox et opéra..
Salut,

C'était juste pour dire que c'est possible juste en css. C'est autre chose de savoir si souhaitable ou préférable. Laurent estime que c'est à éviter.

La seule fois que j'ai utilisé cet effet, j'ai simplement cliqué sur la jolie petite icône "image survolée" dans Dreamweaver Smiley rolleyes ...

Bonne soirée,
Alain
Modifié par Alan (26 Jan 2006 - 19:58)
Merci pour vos réponses

Il est vrai que le texte est beaucoup mieux pour les menu et cela donne beaucoup plus d'accesibilité comme dit Laurent. Mais des fois quand il faut concevoir un site Web au delà de la "grille" il faut tricher. Mais j'essai de tricher dans les règles.
mpop a écrit :
Alan >
Il n'y aurait pas eu moyen de simplifier ta méthode en précisant les propriétés CSS ainsi :
a {
	display: block;
	width: 50px;
	overflow: hidden;
}
a:hover img {		/* et non pas a img:hover */
	margin-left: -50px;
}

Comme IE reconnait la pseudo-classe :hover pour les liens, ça pourrait marcher, non ?


Salut,

Finalement, si, ça marche ! mais il faut ajouter un petit truc juste pour IE

a:hover {background: none;}

En revanche, le overflow sur <a> est mal digéré par IE 5.01. Mais, dans l'exemple suivant il n'y aurait aucun problème :
li {
	width: 50px;
	overflow:hidden;
}
a:hover {
	background: none; /*pour le bug IE*/
}
a:hover img{
	margin-left: -50px;
}

<ul>
   <li><a href="#" ><img src="test.gif" width="100" height="50"></a></li>
   <li><a href="#" ><img src="test.gif" width="100" height="50"></a></li>
</ul>

A+
Modifié par Alan (02 Feb 2006 - 22:10)
J'ai pensé à un truc tout bête pour éviter les problèmes éventuels liés à l'image double :
faire deux images séparées, mettre l'image alternative (qui doit apparaitre au survol) en fond et rendre invisible l'image initiale au survol.

par exemple comme ça : 
<a href="#" id="image1" ><img src="image1a.gif" width="100px" height="50px"></a>

a#image1 {background: url(image1b.gif) no-repeat;}
a:hover {display:block;} 
a:hover img {visibility:hidden;}

ça peut paraître étrange de mettre le "display" sur "a:hover", mais en le mettant su "a", ça pose des problèmes avec IE. (et sans, c'est sur Firefox et Opera que ça poserait problème)

Le seul navigateur à faire une petite bizarrerie est Opera, où l'image en background déborde légèrement au chargement de la page (après un survol, tout est normal.. étrange). On peut contourner cette difficulté en gardant la même idée de base.
par exemple : 
a#image1 img {border: none; background: url(image1b.gif)} /*pour le preload*/
a#image1:hover {display:block;	background: url(image1b.gif) no-repeat;} 
a:hover img {visibility:hidden;}

@+
Sujet clos
Aller à