Les Images

Sommaire

Insertion d'image: La balise <img />
Images réactives: Les balises <map> et <area />

Insertion d'images: Balise <img />

Il est possible d'insérer des images dans les pages web. Elles peuvent aussi bien faire partie d'un texte, être entre deux paragraphes, ou bien être situées d'un coté ou d'un autre du texte.

Pour insérer une image et en définir les propriétés, il faut utiliser la balise <img />.
Une image étant un élément ponctuel, la balise est immédiatement refermée.

Les attributs de la balise <img />: src="URL" : Indique l'URL pour accéder à l'image.; alt="..." : permet de donner un titre à l'image, mais surtout de donner un affichage textuel alternatif lorsque l'image ne peux être chargée, qu'elle soit indisponible, ou que le butineur lisant la page, n'affiche pas les images.; height="..." : permet de donner la hauteur de l'image en pixels, ou en pourcentage. Lors du chargement de la page, un emplacement de la hauteur correspondante sera réservée en attendant que l'image soit chargée.; width="..." : permet de donner la largeur de l'image en pixels, ou en pourcentage. Lors du chargement de la page, un emplacement de la largeur correspondante sera réservée en attendant que l'image soit chargée.; usemap="URL" : Permet de dire que l'image est une image réactive coté client, et d'indiquer l'URL de la "carte" décrivant les zones réactives de l'image.; ismap="..." : Permet de dire que l'image est une image réactive coté serveur. L'URL de la "carte" décrivant les zones réactives de l'image est indiqué par un lien hypertexte qui entoure l'image.

Certains attributs sont déclassée en XHTML en faveur des feuilles de style:

align="..." permet d'aligner l'image horizontalement.

left : alignement de l'image à gauche. Si elle est située dans un paragraphe, tout le texte qui suivra sera écrit à droite de l'image.
center : l'image est considérée comme un caractère du texte, et le milieu horizontale de l'image est aligné avec le texte.
right : alignement de l'image à droite. Si elle est située dans un paragraphe, tout le texte qui suivra sera écrit à gauche de l'image.
justify : l'image est considérée comme un caractère du texte, et le bas de l'image est aligné avec le texte.

border="..." : permet de donner une bordure en pixels à l'image

hspace="..." : définit l'espace en pixels qui sépare les bordures gauche et droite de l'image de tout autre élément (texte, image, bordure de la feuille...).

vspace="..." : définit l'espace en pixels qui sépare les bordures supérieure et inférieure l'image de tout autre élément (texte, image, bordure de la feuille...).

code	effet
<img src="image.gif"	insère l'image image.gif
width="68"	l'image aura une largeur de 68 pixels
height="44"	et une hauteur de 44 pixels
alt="faerie flower"	son nom est "faerie flower". Ce nom sera affiché si l'image ne peux être chargée, ou que le butineur est non-graphique.
/>	fermeture de la balise image
Résultat

Retour au sommaire

Images réactives: Les balises <map> et <area />

Une image réactive est une image découpée en plusieurs zones qui ont des propriétés différentes. Généralement, chaque zone définie dans une image réactive permet lorsqu'elle est sélectionnée d'accéder à une page web différente.
Une même "carte" peut être utilisée par plusieurs images, mais la carte ne sera pas forcement correcte pour toutes les images, c'est pour cette raison qu'il y a généralement une seule "carte" par image réactive..

La Balise <map>

Cette balise permet de déclarer que ce qui est entre la balise <map> d'ouverture et la balise </map> de fermeture, est une description de plusieurs zones définies avec des balises <area />.

L'attribut de la Balise <map> :: name="..." : donne un nom à la "carte" . Lorsqu'une image utilisera cette carte, c'est ce nom qui devra être mentionné comme valeur de l'attribut usemap.

La Balise <area />

Cette balise permet de définir une zone et le lien qui sera utilisé lorsque l'utilisateur activera la zone.
Si plusieurs zones distinctes mènent vers un même lien, elles doivent être définies dans des balises <area /> différentes.
La balise area n'étant qu'une description, elle est fermée dans la balise d'ouverture.

Les attributs de la Balise <area /> :

coords="..." : coordonnées délimitant la zone réactive. Les coordonnées à inscrire changent suivant la valeur de l'attribut shape. Les valeurs à utiliser sont donc indiquées ci-dessous suite à chaque valeur de l'attribut shape. Les coordonnées sont indiquées point par point, en commençant par les coordonnées verticales, puis horizontales. Chaque valeur est séparée par des virgules. Les valeurs peuvent être exprimées en pixels ou en pourcentage de la largeur/hauteur de l'image.

shape="..." : définit le type de la zone réactive:

rect : zone de type rectangle.
Les valeurs à inscrire dans l'attribut coords correspondent aux coordonnées de 2 points situés à 2 angles opposés du rectangle (soit 4 valeurs).
circle : la zone est un cercle.
Les valeurs à inscrire dans l'attribut coords sont les coordonnées du centre du cercle, suivit du rayon du cercle (soit 3 valeurs).
poly : la zone est un polygone. Ce polygone peut avoir autant de coté que vous le désirez.
Les valeurs à inscrire dans l'attribut coords sont les coordonnées de chaque point situé à un angle de la zone, dans l'ordre de parcourt du périmètre. Le dernier point définit sera automatiquement relié au premier point définit.
default : toute zone qui n'a pas été définie avec l'une des 3 valeurs précédentes utilisera cette zone qui couvre donc l'ensemble de l'image (sauf les zones définies avec l'une des 3 autres valeurs).
L'attribut coords n'a pas a être définit.

href="URL" : Lien hypertexte vers lequel pointe la zone réactive.

target="..." : zone d'affichage du lien.

nom d'un cadre : La page ciblée par le lien s'affichera dans le cadre dont vous aurez donné le nom comme valeur dans l'attribut name de celui-ci .(si toutefois celui-ci existe).
_blank : La page ciblée par le lien s'affichera dans une nouvelle fenêtre.
_parent : La page s'affiche en occupant la place qu'occupe le cadre qui définit le cadre ou se trouve de la page actuelle.
_self : La page s'affichera dans la fenêtre ou le cadre ou se situe l'image réactive.
_top : La page s'affichera dans la fenêtre ouverte actuellement en occupant toute la fenêtre (ceci fera disparaître les éventuels cadres de la fenêtre).

nohref="..." : la zone définie n'est pas réactive. Il ne se passera donc rien si l'utilisateur sélectionne cette zone.

alt="..." : permet de donner un nom à la zone (ce nom sera utilisé par les navigateurs nom graphique).

tabindex:"..." : la touche "tab" permet de passer d'une zone à une autre grâce au clavier. Cet attribut définit l'ordre dans lequel la zone sera sélectionné lorsque l'utilisateur utilisera la touche de tabulation.

Exemple de déclaration et d'utilisation d'une image réactive
Code	Effet
`<map name="map">`	Déclaration d'une carte d'image réactive dont le nom est map. c'est ce nom qui sera utilisé comme variable dans l'attribut usemap de l'image réactive.
`<area shape="poly" coords="4,110, 33,118, 68,118, 95,77, 169,77, 169,125, 137,158, 4,158" href="images.html" alt="images" />`	Déclaration d'une zone de polygone dont les coordonnées des points du périmètre de l'aire sont: (4,110), (33,118), (68,118), (95,77), (169,77), (169,125), (137,158), (4,158). Lorsque cette zone est activée, la page chargée est image.html .
`<area shape="rect" coords="86,3,205,65" href="tableaux.html" alt="Tableaux" />`	Déclaration d'une zone rectangulaire dont deux angles opposés ont pour coordonnées (86,3), (205,65) . Lorsque cette zone est activée, la page chargée est tableau.html .
`<area shape="circle" coords="41,73,40" href="css.html" alt="Feuilles de style en Cascade (CSS)" />`	Déclaration d'une zone circulaire dont le centre à pour coordonnée (41,73), et dont le rayon est de 40 pixels. Lorsque cette zone est activée, la page chargée est css.html .
`</map>`	Fin de la déclaration de la carte d'image réactive.
`<img src="map.gif" alt="exemple d'image reactive" usemap="#map"/>`	Insertion de l'image map.gif qui utilise la carte d'image réactive map.
Résultat

Retour au sommaire

1 juillet 2002
Stéphane Chalamet : stephane.chalamet@free.fr