Image non-significative, c’est à dire décorative.

    Table : 

  • Icône sur une classe
  • Icône sur une liste (puce graphique)
  • Image d’arrière plan (image de fond)
  • Image d’arrière plan avec un lien et doublée par un texte.

Icône sur une classe

On peut associer une image d’arrière plan à du texte grace à une classe.

	// style
	.pdfdata {
	    background-image: url(pdfdata.png);
	   	background-repeat: no-repeat;
	    background-position: center right;
	    padding-left: 18px;
	}

	// HTML
	<a href="fichier.pdf" class="pdfdata" alt="fichier PDF">Télécharger</a>	

Exemple : Télécharger

Icône sur une liste (puce graphique)

ON peut associer une image à une liste et ainsi choisir sa puce graphique.

	// style
	li {list-style-image: url(dot01.gif);}

Exemple :
 

<ul class="example">
	<li>un</li>
	<li>deux</li>
	<li>trois</li>
</ul>

Rappel sur les images d’arrières plan

Les images non-signifiantes ou décoratives dite d’arrière plan permette de rendre les pages plus lisibles et accessibles.

On insère une image d’arrière plan sur une balise de bloc (div, p, h1, h2, etc.)

	// Style
	.container {
	    width:100px; // on donne une taille au conteneur
	    height:50px;
	    background-image:url(image.png);
	    background-position: top left;
	    background-repeat: no-repeat;
	}
	// version courte
	.container {background:url(image.png) top left no-repeat;
	// HTML
	&lt;div class="container"&gt;&lt;/div&gt;

Une image de fond avec un lien doublée par du texte

On a quelquefois besoin d’avoir un titre ou un texte en image à cause d’exigence graphique. Mais on souhaite avoir en même temps une page standard sans avoir à insérer une balise IMG dans la page. Une seule solution, insérer l’image via un style et doubler cette image par un texte que l’on rendra invisible à l’utilisateur. Bien sur cette image de fond sur texte invisible on le souhaite cliquable et compatible IE6.

Cela est possible en respectant cette architecture :

  • un bloc accueillant l’image de fond (DIV, h1, h2, p, etc.)
  • la balise A indispensable pour créer un lien.
  • le texte de doublage entre balise SPAN

Le principe :

  • container DIV avec les propriétés WIDTH, HEIGHT et l’image de fond
  • balise A avec la propriété PADDING de la hauteur de l’image de fond en display:block.
  • Entouré de SPAN le texte en display:none.
	// Dans le BODY de la page :
	&lt;div class="container"&gt;&lt;a href="www.mylink.com"&gt;&lt;span&gt;My text &lt;/span&gt;&lt;/a&gt;&lt;/div&gt;
	// dans le HEADER
	.container {
    border:1px solid #0000FF;
    width:150px;
    height:64px;
    background:url(image.jpeg) bottom left no-repeat;
}
.container a {
    padding:64px 0 0 0;
    border:1px solid #FF3333;
    display:block;
}
.container span {display:none;}

Exemple : image de fond cliquable

Liens :