Discussion :

[RootsRagga]

Bonjour à tous,

Lorsque je veux insérer une image en HTML, j'utilise:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<img src="images/mon_image.jpg" alt="ici se trouve mon image" />

Ainsi, si l'image ne s'affiche pas, le texte contenu dans alt s'affiche et c'est bien pour les mal-voyants.
Si je veux gérer l'image en CSS, je place un div dans le HTML:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<div id="mon_image">
</div>

Mais alors, je n'ai plus le contenu de alt...
Comment faire?
Pardonnez mon inexpérience,

A bientôt,
Bruno

[Jannus]

Dans le second code que tu nous présentes, tu gères l'image comment ?
En background du DIV ?

Sinon, ceci fonctionne :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div class="image">
  <img src="images/monimage.jpg" alt="monimage 01" />
</div>

[Erwan31]

Bonjour Bruno,
une information doit toujours passer par le HTML et non CSS.
Si ton image apporte une information utile, ou nécessaire à la compréhension du contenu, elle doit se trouver dans le HTML avec le alt adéquate.
CSS ne doit gérer QUE la présentation indépendamment du contenu car en l'absence de couche de présentation (CSS désactivée, périphérique de restitution qui ne sait pas lire CSS, navigateurs textes...), l'information sera perdue. D'autre part elle ne pourra ni être indéxée par un crawler (Googlebot...) ni lue par un lecteur d'écran (logiciel de synthèse vocale pour les non-voyant) ou d'autres aides techniques.
Et tu peux oublier les astuces qui consistent à masquer le texte inclue dans le div via un règle CSS, si les images ne sont pas chargées pour une raison ou une autre et CSS chargée, tu perd l'info.

[GihefBey]

Bonjour,

Oui, en effet, avec un background tu ne donnes pas une information, tu agrémentes la présentation.

Si ton image illustre ton propos, elle ne doit pas servir d'arrière-plan (un truc derrière, qu'on n'a même pas besoin de voir pour comprendre le contenu), elle doit être placée dans le code de la page.

-

[RootsRagga]

tu gères l'image comment ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
#mon_image
{
	background-image:url("images/mon_image.png");
}

J'étais parti sur l'idée de gérer une image uniquement en CSS, mais ça n'a pas d'intérêt...


Merci pour vos réponses,

[HiRoN]

J'étais parti sur l'idée de gérer une image uniquement en CSS, mais ça n'a pas d'intérêt...

Comme dis plus haut, tout dépend de l'image... de son but / utilité au sein du site...