Images

Les balises

IMG | MAP | AREA
Autres balises

IMG

La balise IMG permet d'insérer une image au format GIF ou JPG dans un document. Elle nécessite l'utilisation d'un certain nombre d'arguments.

SRC="nom_fichier"
Cet attribut est indispensable : il indique le nom du fichier image à afficher.
Exemple :

Texte source	Résultat obtenu
<img src="images/bruno.gif">

BORDER=taille
Cet attribut permet de définir la taille de la bordure de l'image en pixels. La valeur 0 correspond à l'absence de bordure.
Exemple :

Texte source	Résultat obtenu
<img src="images/bruno.gif" border=3>

WIDTH=largeur HEIGHT=hauteur
Ces deux attributs permettent de préciser la taille de l'image. En ne donnant qu'un seul de ces attributs on conserve les proportions.
Exemple :

Texte source	Résultat obtenu
<img src="images/bruno.gif" width=100 height=50> <img src="images/bruno.gif" width=100>

ALT="texte"
Cet attribut permet de définir un texte à afficher si l'image n'est pas disponible ou lorsque le pointeur de la souris s'arrête sur elle.
Exemple :

Texte source	Résultat obtenu
<img src="images/bruno.gif" alt="Ma photo">

ALIGN="alignement"
Cet attribut permet de définir la façon dont la légende de l'image doit s'afficher. Les valeurs possibles pour "alignement" sont TOP, MIDDLE, et BOTTOM. La légende se termine par <P>.
Exemple :

Texte source	Résultat obtenu
<img src="images/bruno.gif" align=middle> Légende au milieu.<p>	Légende au milieu.

USEMAP="#defmap"
Cet attribut permet de faire référence à une structure définissant des zones de l'image jouant le rôle de liens hypertextes et donc sensibles à un clics de la souris. Une telle structure est définie entre les balises MAP et /MAP, MAP ayant comme attribut NAME="defmap".

MAP

Les balises MAP et /MAP entourent une structure définissant les zones d'une image représentant un lien hypertexte et donc sensibles à un clic de la souris.
L'attribut NAME permet de donner un nom à la structure qui est repris par la balise IMG.
Exemple :
<MAP NAME="lenom"> ... </MAP>

AREA

Les balises AREA et /AREA permettent de définir les zones sensibles d'une image. Elles sont utilisées à l'intérieur d'une structure définie par la balise MAP. La balise AREA utilise trois attributs.

SHAPE="nom_forme"
L'attribut SHAPE permet de définir la forme de la zone; il peut prendre les valeurs RECT (pour un rectangle), CIRCLE (pour un cercle) et POLYGON pour un polygone.

COORDS="coordonnées"
L'attribut COORDS permet de donner les coordonnées de la zone définie sous la forme d'une suite de nombre séparés par des virgules.
Pour un rectangle on donne les coordonnées des coins supérieur gauche et inférieur droit.
Pour un cercle on donne les coordonnées du centre et le rayon.
Pour un polygone on donne les coordonnées des sommets.

HREF="lien"
L'attribut HREF permet d'indiquer sous forme d'URL vers quoi pointe la zone sensible.

Exemple :

Texte source

Résultat obtenu

<map name="defzones"> <area shape="rect" coords="21,20,55,53" href="javascript:alert('Carré bleu !')"> </area> <area shape="circle" coords="68,99,18" href="javascript:alert('Cercle rouge !')"> </area> <area shape="polygon" coords="124,46,178,29,216,63,188,97,151,88" href="javascript:alert('Polygone vert !)"> </area> </map> <img src="images/map.gif" usemap="#defzones" border=0 width=264 height=150 alt="dessin">

Balises HTML | Page d'accueil