18073 sujets

Questions générales et questions de débutants

[ Résolu ] Image dans la css ou pas !

Bonjour,
Une question me tracasse depuis peu:

Lorsque que l'on à une image qui se répête dans le site, je l'a mets régulièrement dans la css comme ceci:
 <div id="image">
        </div>

et css
#image {
	position: absolute;
	top: 130px;
	left: 13px;
	width: 720px;
	height: 187px;
	margin: 0px;
	padding: 0px;
	background-image: url(../images/image.jpg);
	background-repeat: no-repeat;
}


Jusque là tout va bien Smiley biggrin

Mais bon, pour les moteurs de recherche, les handicapés, j'aimerai mettre les attributs nécessaires, soit "alt" et "title".

Puis-je les introduire dans le code Xhtml? et si oui comment m'y prendre?
Merci du coup de pouce Smiley lol

Dup's Smiley cligne
Modifié par dups (07 Mar 2006 - 07:35)
Bonjour,

Puisqu'il s'agit d'images dont le sens ou la fonction doit avoir un équivalent textuel, il s'agit d'images "de contenu", c'est à dire à insérer en HTML via l'élément img src="..." alt="..."

CSS ne doit pas servir, par commodité technique ou pour produire un effet, à gérer ces images qui ne relèvent pas de la couche de présentation. Les (rares) exceptions sont celles où le contexte de la page rend non indispensable la présence de l'image elle-même (texte HTML assumant la même fonction).

Voir Comment bien exploiter CSS ? (PDF)
Modifié par Laurent Denis (06 Mar 2006 - 08:34)
Administrateur
Bonjour,

dups a écrit :
Lorsque que l'on à une image qui se répête dans le site, je l'a mets régulièrement dans la css comme ceci:

Si c'est juste pour automatiser l'insertion dans le site de cette image qui revient souvent, il y a des méthodes pour automatiser dans le code XHTML également. J'ignore avec quelle technologie tu as réalisé ton site (pages statiques, PHP, CMS, etc) mais en PHP il y a la fonction include par exemple, dont parle ce tutoriel Alsacréations: L'instruction PHP INCLUDE (2ème partie).
Un simple fichier monimage.php contenant la ligne <img ...tout ce qu'il faut> et un appel à include ('monimage.php'); suffiront Smiley cligne
Modifié par Felipe (06 Mar 2006 - 10:03)
Administrateur
Hello Smiley smile

Un résumé (volontairement) très schématique :

Premier cas : l'image est décorative.

Il peut s'agir d'illustration de fond, de bordure imagée, d'arrondi ou toute autre décoration qui n'apporte rien au contenu de la page.

Dans ce cas, il faudrait éviter de faire apparaître cette image dans le code HTML (<img>) mais privilégier la séparation fond/forme en gérant cette image décorative à l'aide d'une feuille de style CSS séparée.

Cela permet de ne pas avoir d'éléments de structure qui vont inutilement allourdir le code ou rendre son interprétation plus difficile.


Second cas : l'image apporte du contenu.

A partir du moment où l'image est informative et fait partie intégrante du contenu (une photo, un bouton, un logo), il faudrait que cette information puisse être véhiculée même si les styles CSS sont désactivés ou sur les navigateurs non graphiques.

Il faut donc faire apparaître l'image dans la structure HTML à l'aide de la balise <img> dûment renseignée avec l'attribut "alt" correspondant.
Sujet clos
Aller à