9. Images
<IMG …>
<IMG src="…" width=… height=… alt="…" title="…">
L’attribut
src est obligatoire. Sa valeur, obligatoirement entre guillemets "…", indique le fichier contenant l’image à afficher. Ce fichier peut être de type
gif (dessins, schémas, de 256 couleurs au plus ; le format gif, très utilisé, est propriété de la firme
Compuserve, qui s’est, jusqu’à présent, abstenue d’en réclamer les droits d’utilisaton),
jpeg (photos),
png (équivalent libre de
gif ; offre les mêmes possibilités de transparence et d’animation) ou
bmp (déconseillé).
Localisation du fichier source
| src="fichier.gif" | le fichier se trouve, sur le serveur que l’on est en train de visiter, dans le même répertoire que la page HTML d’où il est appelé. |
| src="images/fichier.gif" | le fichier se trouve, sur le serveur que l’on est en train de visiter, dans un sous-répertoire appelé images. |
| src="../fichier.gif" | le fichier se trouve, sur le serveur que l’on est en train de visiter, dans le répertoire parent du répertoire contenant la page HTML d’où il est appelé. |
| src="/fichier.gif" | le fichier se trouve, sur le serveur que l’on est en train de visiter, dans le répertoire d’accueil du site. |
| src="http://www.un_autre_site.com/fichier.gif" | le fichier se trouve sur un autre site que celui qui contient la page HTML en cours de consultation. |
width et
height fixent, en pixels, les dimensions de l’image telle qu’elle s’affiche à l’écran. On peut la déformer dans un sens ou dans l’autre, mais généralement, on indique les dimensions exactes pour optimiser l’affichage. Si ces attributs sont absents, le navigateur utilise les dimensions exactes de l’image, mais il est préférable de les lui indiquer par avance, car les images sont chargées en dernier, et le navigateur est alors amené à modifier, autant de fois que d’images à charger, la disposition de la page.
alt n’est pas formellement obligatoire, mais il est plus que recommandé.
- il est utilisé par les moteurs de recherche et les logiciels pour mal-voyants ;
- le texte qu’il indique est affiché à la place de l’image quand l’affichage des images est désactivé ;
- Certains navigateurs (par exemple Internet Explorer) utilisent ce paramètre pour afficher une bulle à la place du paramètre title lorsque celui-ci fait défaut.
title indique le contenu d’une bulle (semblable aux bulles d’aide) qui s’affiche lorsqu’on place le pointeur de souris sur l’image.
Conventions relatives au paramètre alt :
- élément décoratif dépourvu de contenu informationnel alt=""
- image représentant une "puce" ou un tiret dans une liste alt="*"
- image servant de trait horizontal alt="----------"
- texte dessiné (par exemple logo) alt="Ce texte"
- image apportant une information alt="Description succincte du contenu de l’image"
Exemple :
<IMG src="sapin.gif" width=200 height=200 alt="sapin de Noël" title="Joyeux Noël !">
produit :
Autres paramètres de la balise <IMG …>
<A href="…"><IMG src="…" border=0></A>
Par défaut, une image qui est aussi un lien est entourée d’un cadre bleu ou violet, de la même couleur que les liens soulignés ; border=0 permet de supprimer ce cadre.
<A href="…"><IMG src="…" border=0></A>
 |
<A href="…"><IMG src="…"></A>
|
<IMG src="…" align=LEFT>
Le paramètre
align détermine le positionnemment de l’image par rapport au texte environnant. Il peut prendre les valeurs
LEFT,
RIGHT,
TOP,
MIDDLE ou
BOTTOM (par défaut).
|
align=LEFT
Avoir un chaton chez soi, quel rêve ! Minuscule, fragile et si doux, il donne envie à l’enfant de le tenir contre son cœur, de le caresser.Il procure cette même sensation à l’adulte, curieux de le voir grandir.C’est ainsi qu’une envie de chaton s’installe, tenace, et que l’on se met à en attendre un avec impatience.[1]
|
pas de paramètre align
Avoir un chaton chez soi, quel rêve ! Minuscule, fragile et si doux, il donne envie à l’enfant de le tenir contre son cœur, de le caresser.Il procure cette même sensation à l’adulte, curieux de le voir grandir.C’est ainsi qu’une envie de chaton s’installe, tenace, et que l’on se met à en attendre un avec impatience.
|
align=RIGHT
Avoir un chaton chez soi, quel rêve ! Minuscule, fragile et si doux, il donne envie à l’enfant de le tenir contre son cœur, de le caresser.Il procure cette même sensation à l’adulte, curieux de le voir grandir.C’est ainsi qu’une envie de chaton s’installe, tenace, et que l’on se met à en attendre un avec impatience.
|
|
align=TOP
Avoir un chaton chez soi, quel rêve ! Minuscule, fragile et si doux, il donne envie à l’enfant de le tenir contre son cœur, de le caresser.Il procure cette même sensation à l’adulte, curieux de le voir grandir.C’est ainsi qu’une envie de chaton s’installe, tenace, et que l’on se met à en attendre un avec impatience.
|
align=MIDDLE
Avoir un chaton chez soi, quel rêve ! Minuscule, fragile et si doux, il donne envie à l’enfant de le tenir contre son cœur, de le caresser.Il procure cette même sensation à l’adulte, curieux de le voir grandir.C’est ainsi qu’une envie de chaton s’installe, tenace, et que l’on se met à en attendre un avec impatience.
|
align=BOTTOM
Avoir un chaton chez soi, quel rêve ! Minuscule, fragile et si doux, il donne envie à l’enfant de le tenir contre son cœur, de le caresser.Il procure cette même sensation à l’adulte, curieux de le voir grandir.C’est ainsi qu’une envie de chaton s’installe, tenace, et que l’on se met à en attendre un avec impatience.
|
| Laisse un espace supplémentaire (20 pixels) entre le bord de l’image et le texte environnant. |
|
Avoir un chaton chez soi, quel rêve ! Minuscule, fragile et si doux, il donne envie à l’enfant de le tenir contre son cœur, de le caresser.Il procure cette même sensation à l’adulte, curieux de le voir grandir.C’est ainsi qu’une envie de chaton s’installe, tenace, et que l’on se met à en attendre un avec impatience.
|
|
Lancement de programmes
<IMG … onLoad="alert('Image chargée !')">
Le message "Image chargée !" s’affichera après chargement.
Lexique
align=aligner, bottom=bas, center=centre, height=hauteur, left=gauche, load=chargement, middle=milieu, pixel (picture element)=point de l’écran, right=droite, title=titre, top=haut, width=largeur