5568 sujets

Sémantique web et HTML

Bonjour,
J'ai juste un petit soucis sous IE6
En HTML j'ai :

<img alt="" />


En CSS :

img{
width: 90px;
background: #dde url(image.jpg);
}


Ce code fonctionne bien sous tous les nav sauf IE6, puisque IE6
me met l'icone par defaut lorsqu'un bitmap manque (le fameux src="").
Logique, je rajoute donc (pour IE6) :

Code : HTML

<img src="" alt="" />


La l'icone disparait, mais il reste un carré blanc à la place Smiley ohwell
Je pourrais mettre les images dans l'HTML, mais c'est plus pro dans les CSS.
Alors question :
Comment tromper IE6 en lui donnant un src vide ?
Merci
Salut,

J'aimerai comprendre un peu mieux, quel intérêt d'une balise <img> si tu n'appelle pas d'image avec ? Si c'est une image de contenu, tu DOIS avoir un src liant l'image souhaitée. Si c'est une image du design du site, à ce moment la pas besoin de mettre spécifiquement une balise <img>, tu peux utiliser un background sur n'importe quelle autre balise.
J'ai oublié de préciser qu'il s'agit d'une image qui change au survol.

#IMG1 a:hover img{
background: url(image2.jpg);
}

Si je précise le src dans le tag img
le a:hover ne marche plus.

Et si je remplace le img par un div ou un span, la largeur
du jpg n'est pas prise en compte malgré le width: 90px dans les css.
ce qui m'a ammené à opter pour le img.

il n'y a que IE6 qui pose soucis Smiley ohwell
Modifié par tsumiko (02 Nov 2009 - 20:47)
Bonjour,
tsumiko a écrit :
Je pourrais mettre les images dans l'HTML, mais c'est plus pro dans les CSS.

Non, ce n'est pas plus pro... Au contraire, vouloir mettre toutes les images dans le CSS, c'est non seulement idiot mais également inaccessible. Essaye de désactiver l'affichage des image et/ou l'utilisation des CSS...

Les images porteuses de contenu et/ou support de lien doivent se trouver dans le HTML, avec l'attribut alt correctement rempli. Si l'image est purement décorative, elle sera appliquée en fond à un élément, mais pas à un img auquel on n'aura pas préciser de src.

tsumiko a écrit :
J'ai oublié de préciser qu'il s'agit d'une image qui change au survol.

Le JavaScript c'est bien, mangézan !
Modifié par Laurie-Anne (02 Nov 2009 - 21:30)
Oui merci pour le conseil :
"Le javascript c bon magézan"
mais a chaque fois que je dis "je met du javascript" on me dit : stooooooooop
malheureux, pas de javascript, pense à ceux qui le désactive! ça marche plus Smiley ohwell

Bon ok... "jfé koi alors ?"

Perso, les survols, j'ai pris l'habitude de les faire SANS javascript.
le "a:hover img" ne pose pas de soucis en particulier.
Bon, je finirai par l'avoir ce bug...
tsumiko a écrit :
Bon ok... "jfé koi alors ?"

Tu pèses les arguments sans t'effrayer des cris des uns et des autres.

tsumiko a écrit :
Perso, les survols, j'ai pris l'habitude de les faire SANS javascript.

C'est très bien quand tu peux faire des effets de survol accessibles sans JavaScript. Si c'est une image de fond décorative, ça marche très bien. Si c'est pour une image-bouton qui porte un texte (sans texte dans le HTML directement visible), eh bien c'est juste pas possible de manière accessible sans JavaScript.

tsumiko a écrit :
«pas de javascript, pense à ceux qui le désactive!»

Et donc tu y penses un instant, et tu te dis:
- avec JavaScript, effet de survol décoratif;
- sans JavaScript, on perd un effet décoratif.

Dans les cas où l'alternative est d'utiliser une technique de faux-contenu en CSS (en gros, ton contenu, texte ou pictogramme, est dans une image de fond en CSS, parce que «c'est plus pratique»), tu peux peser le pour et le contre:
- un effet décoratif en CSS, qui reste actif même si JS est désactivé, mais qui n'est pas accessible;
- un effet décoratif en JavaScript, qui est perdu si JS est désactivé, mais qui reste accessible dans tous les cas.

Moi je vote plutôt pour le deuxième.

(Non en fait je vote pour ne pas avoir d'effet de survol qui implique le changement d'une image qui contient un texte ou un pictogramme. Et je tape sur les graphistes avec un hareng saur si besoin.)
Après la réponse complète de Florent, je rajouterais juste que le JS, lorsqu'il est bien intégré à une page, c'est-à-dire de manière non-obstrusive, n'est absolument pas gênant pour ceux qui le désactivent, au contraire.

Il vaux mieux un document bien construit avec une surcouche de JS qui apportera un plus à ceux qui activent JS sans perturber ceux qui le désactivent ; qu'un document où une partie du contenu est indisponible parce que, par exemple, lors d'une MAJ tu as déplacé les images sans mettre à jours la feuille de style CSS.
Ca y est j'ai trouvé la solution, SANS javascript et tous les navigateurs dont IE sont ok.
Qui cherche trouve...

"Si c'est pour une image-bouton qui porte un texte (sans texte dans le HTML directement visible), eh bien c'est juste pas possible de manière accessible sans JavaScript."
--> Je viens de le faire FULL-CSS, alors arretez de dire que c'est pas possible.
Quelle présomption de tout connaitre!!
Modifié par tsumiko (03 Nov 2009 - 20:10)
La présomption de partager est là toujours Smiley cligne

Impossible d'avoir un effet de survol de bouton accessible portant un texte en le passant uniquement par CSS. Si tu désactives les styles le bouton (le graphisme du bouton, et donc le texte attaché au graphisme) va disparaitre...

Mais les conseils fournis restent valables, a toi de peser l'utilité des agréments de ton site sans tuer son accessibilité.

Bonne continuation Smiley cligne

PS : si ton problème est résolu je crois qu'il peut être intéressant de le signaler en titre (si possible, je ne connais pas encore très bien le forum)
tsumiko a écrit :
--> Je viens de le faire FULL-CSS, alors arretez de dire que c'est pas possible.

J'ai dit que c'est pas possible de manière accessible. Alors bien sûr je peux me tromper, mais j'ai effectivement la prétention (plutôt que la présomption) de savoir de quoi je parle.