André Willemijns WebSite

• Gestion des images

Insérer des images

Le 21 octobre 2008

C'est l'élément <img /> qui permet d'inclure des images dans une page web.

Les attributs qui permettent de bien gérer les images sont :

L'attribut src, il précise l'adresse de l'image que l'on désire afficher. Cette adresse peut être absolue ou relative.

L'attribut alt, doit contenir une brève description de l'image.

L'attribut title, contient le même texte que l'attribut alt.

Les attributs height et width permettent de définir la hauteur et la largeur de l'image affichée.

<img alt="Description de l'image" title="Description de l'image" 
src="images/image.jpg" height="100" width="200" />

Les codes CSS sont utilisés pour définir : la position de l'image par rapport au texte, image à droite à gauche ou centrée.

Nous pouvons ajouter une bordure en précisant une valeur de padding qui sera réalisée par la couleur de fond. Pour une image centrée il faudra mettre l'image dans une boîte div et fixer la largeur de cette boîte égale à celle de l'image pour éviter d'avoir la couleur du fond de l'image aussi grande que la largeur de la page.

Pour obtenir une légende sous l'image, il faut placer l'image dans une boite div dont on fixe la largeur égale à celle de l'image et l'on ajoute sous l'image une autre boîte div qui recevra le texte.

.imgleft {
	float: left;
	margin: 5px 10px 5px 0;
	text-align: center;
	border: none;
	padding: 5px;
	background-color: #f1f1f1;
}
.imgright {
	float: right;
	margin: 5px 0 5px 10px;
	text-align: center;
	border: none;
	padding: 5px;
	background-color: #f1f1f1;
}
.imgcentre {
	margin: 10px auto;
	text-align: center;
	text-align: center;
	border: none;
	padding: 5px;
	background-color: #f1f1f1;
}
	
.legende {
	margin: 5px 0;
	font-size: 0.8em;
}
img {
border: 0;
}

Pour tenir compte des codes CSS et les modifications suivantes :

<div class="imgcentre" style="width: 400px;">
<img alt="Pointe-de-Bilfot" title="Pointe-de-Bilfot" 
src="images/Pointe-de-Bilfot.jpg" height="160" width="400" />
<div class="legende">La Pointe de Bilfot, Bretagne</div>
</div>>

<img class="imgright" alt="Etreta" title="Etreta" src="images/etreta.jpg" height="113" width="150" />

<div  class="imgleft" style="width: 100px">
<img alt="Megève" title="Megève" 
src="images/Megeve-entre-les-maisons.jpg" height="150" width="100" />
<div class="legende">Megève</div>
</div>