Quelques images sur un site Web peuvent le rendre plus attractif et plus convivial, cependant il
est important de ne pas sombrer dans l'excès car les images peuvent impliquer un temps de
chargement assez long et peuvent dans certains cas nuire à la lisibilité.
La balise IMG du langage HTML permet d'insérer des images dans une page HTML.
L'image peut être située sur le même serveur que la page dans laquelle elle est insérée
mais également sur un autre serveur en spécifiant son URL
complète.
Seuls les formats d'images suivants sont acceptés en standard dans les spécifications
du W3C :
- Les images JPEG (.JPG) : les images ayant un grand nombre de couleurs seront bien compressées, c'est-à-dire
qu'elles prendront moins de place, donc nécessiteront un temps de chargement moindre)
- Les images PNG : Leur taille est faible dans le cas d'images avec peu de couleurs avec des tons uniformes,
ce format permet en outre d'avoir
des images entrelacées (qui s'affichent progressivement) avec une profondeur de couleurs de 24 bits
et des images dont on définit une couleur comme transparente.
- Les images GIF : Elles possèdent les mêmes atouts que les images PNG, si ce n'est que
le format GIF est limité à 256 couleurs maximum et que ce format n'est pas totalement libre.
Les principaux attributs de la balise IMG sont les suivants :
- SRC: Indique l'emplacement de l'image (il est obligatoire)
- ALIGN: Spécifie l'alignement de l'image par rapport au texte adjacent. Il peut prendre les valeurs: TOP, MIDDLE, et BOTTOM (au-dessus, au milieu et en-dessous)
- ALT: Permet d'afficher un texte alternatif lorsque l'image ne s'affiche pas.
- TITLE: Permet d'afficher une infobulle lors du survol de l'image par le curseur.
- WIDTH: Permet de spécifier la largeur de l'image.
- HEIGHT: Permet de spécifier la hauteur de l'image.
Ainsi pour insérer une image, il faudra saisir une balise du type suivant :
<IMG SRC="url_de_l_image"
ALT="Texte remplaçant l'image"
TITLE="Texte à afficher">
| Attribut |
Valeur |
Résultat |
Effet Visuel |
| ALIGN |
bottom
center
left
middle
top
right |
Alignement de l'image. |
|
| ALT |
|
Texte alternatif au cas où l'image ne s'affiche pas. |
|
| BORDER |
Nombre entier |
Nombre de pixels de la bordure.
La couleur de la bordure peut être définie par l'attribut
LINK ou TEXT de la balise <BODY>. Par défaut l'attribut BORDER vaut 1 ce
qui crée un petit cadre autour de l'image.
Pour ne pas avoir ce désagrément pensez à le définir comme étant
égal à 0. |
 |
| HEIGHT |
Nombre entier |
Hauteur de l'image (en pixels ou en %).
Lorsque cet attribut précise une dimension différente de la dimension originale du graphique, le
navigateur la redimensionne dynamiquement, ce qui peut provoquer un affichage de moins bonne qualité. |
|
| HSPACE |
Nombre entier |
Nombre de pixels d'ajustement entre l'image et le texte adjacent (horizontalement). |
Texte |
| LONGDESC |
|
URL de la description de l'image. |
|
| LOWSRC |
URL |
Image alternative (généralemnt plus petite) affichée le temps que la vraie image soit chargée par le navigateur. |
 |
| NAME |
|
Permet de définir un nom pour l'image. Cet attribut est notamment utile pour la gestion des images en JavaScript. |
|
| SRC |
URL |
URL de l'image |
|
| TITLE |
|
Texte alternatif au cas où l'image ne s'affiche pas. |
|
| USEMAP |
|
URL ou nom de l'ancre définissant l'image réactive. |
|
| VSPACE |
|
Nombre de pixels d'ajustement entre l'image et le texte (verticalement). |
Essai de texte
|
| WIDTH |
Nombre entier |
Largeur de l'image (en pixels ou en %).
Lorsque cet attribut précise une dimension différente de la dimension originale du graphique, le
navigateur la redimensionne dynamiquement, ce qui peut provoquer un affichage de moins bonne qualité. |
|
Les images s'insèrent dans le texte comme un caractère, ainsi il semble impossible
de faire s'écouler du texte le long d'une image.
Il existe en fait plusieurs façons, nous allons en voir deux:
- La première consiste à créer un tableau
avec une ligne et deux colonnes, dans lesquelles on met l'image et le texte.
- La seconde (moins précise) consiste à aligner l'image à gauche
ou à droite avec l'attribut ALIGN puis de taper son texte. Il suffit, pour
arrêter cet enveloppement de mettre l'attribut CLEAR.
Il est possible de créer des zones
cliquables à l'intérieur même d'une image grâce à l'attribut
USEMAP utilisé conjointement avec la balise MAP.
L'attribut USEMAP de la balise <IMG> pointe vers une balise <MAP>
contenant la description du découpage de l'image en zones cliquables.
La balise <MAP> a un attribut NAME définissant
son nom (NAME="nom") et contient les zones cliquables déclarées
grâce à des balises AREA.
| Balise |
Attribut |
Valeur |
Effet Visuel |
| MAP |
NAME |
|
|
| AREA |
SHAPE |
RECT
CIRCLE
POLY
|
Rectangle (ses coordonnées sont:
"abscisse sup gauche, ordonnée sup gauche,
abscisse inf droit, ordonnée inf droit")Cercle
(ses coordonnées sont:
"abscisse centre, ordonnée centre, rayon")
Polygone (ses coordonnées sont:
"la suite des coordonnées séparées par des
virgules")
|
| HREF |
URL |
Lien vers l'URL |
| COORDS |
"XX,XX,XX,XX" |
Contient les coordonnées de la zone
cliquable, séparées par des virgules. |
Voici ci-dessous un exemple d'image réactive :
<IMG SRC="images/image.gif"
WIDTH=150
HEIGHT=70
USEMAP="#Map">
<MAP NAME="Map">
<AREA SHAPE="rect"
HREF="debut.html"
COORDS="0,0,48,28">
<AREA SHAPE="circle"
HREF="precedent.html"
COORDS="50,30,10">
<AREA SHAPE="poly"
HREF="suivant.html"
COORDS="60,50,80,30,100,40,50,100">
</MAP>
|
