Intégrer des images

L'élément <IMG>

On utilise l'élément <IMG> pour placer les images. Deux attributs sont obligatoires :

• L'attribut src pour spécifier le nom du fichier image à charger. Les fichiers image doivent impérativement être aux formats GIF ou JPG.
• L'attribut alt pour indiquer un contenu alternatif, c'est à dire un texte à afficher à la place de l'image lorsque, pour différentes raisons, elle n'apparaît pas.

<IMG src=lefrance.gif alt="Le France">
Le <STRONG>France</STRONG> a...

Le France a été construit en 1957. Pour vous donner une idée de sa puissance, un chiffre suffit : chacune des deux hélices qui servent de propulseurs pèse 18 tonnes. La vitesse est de 25 noeuds, soit 25 milles marins à l'heure ou, pour parler terrien, plus de 46 km/h.

Les attributs optionnels de l'élément <IMG>

L'attribut align

Il indique le mode d'alignement de l'image. Il y a 5 valeurs possibles : top, middle, bottom, left, right. Les trois premiers concernent l'alignement vertical par rapport à la ligne.

Voilà un joli bateau qui entre dans l'estuaire.<br>
Ici, il est aligné sur le haut
<img src=images/bateau01.jpg alt="Un bateau sur la seine" align=top>,
puis au milieu
<img src=images/bateau01.jpg alt="Un bateau sur la seine" align=middle>,
et enfin sur le bas de la ligne
<img src=images/bateau01.jpg alt="Un bateau sur la seine" align=bottom>.

Voilà un joli bateau qui entre dans l'estuaire.
Ici, il est aligné sur le haut , puis au milieu , et enfin sur le bas de la ligne .

Les valeurs left et right permettent d'habiller une image avec le texte, en plaçant l'image respectivement à gauche et à droite.

<IMG src=lefrance.gif alt="Le France" align=left>
Le <STRONG>France</STRONG> a...

Le France a été construit en 1957. Pour vous donner une idée de sa puissance, un chiffre suffit : chacune des deux hélices qui servent de propulseurs pèse 18 tonnes. La vitesse est de 25 noeuds, soit 25 milles marins à l'heure ou, pour parler terrien, plus de 46 km/h.

<IMG src=lefrance.gif alt="Le France" align=right>
Le <STRONG>France</STRONG> a...

Le France a été construit en 1957. Pour vous donner une idée de sa puissance, un chiffre suffit : chacune des deux hélices qui servent de propulseurs pèse 18 tonnes. La vitesse est de 25 noeuds, soit 25 milles marins à l'heure ou, pour parler terrien, plus de 46 km/h.

L'attribut border

Permet de régler l'épaisseur du trait entourant l'image, en pixels. La valeur 0 signifie qu'il n'y a pas de bordure (c'est la valeur par défaut sauf dans le cas où l'image est dans un lien).

<IMG src=lefrance.gif alt="Le France" border=3 align=left>
Le <STRONG>France</STRONG> a...

Le France a été construit en 1957. Pour vous donner une idée de sa puissance, un chiffre suffit : chacune des deux hélices qui servent de propulseurs pèse 18 tonnes. La vitesse est de 25 noeuds, soit 25 milles marins à l'heure ou, pour parler terrien, plus de 46 km/h.

Les attributs width et height

Ils permettent de déterminer la hauteur et la largeur de l'image, en pixels.

Il faut toujour éviter de les utiliser pour redimensionner l'image. Mieux vaut utiliser un logiciel de dessin pour modifier la taille de l'image source :

• Essayer d'agrandir une image par ce moyen donne de mauvais résultats (voir à droite)
• Réduire une image par ce biais n'altère pas la qualité de l'affichage. En revanche, dans ce cas, l'image téléchargée sur le réseau est trop grosse, ce qui fait perdre beaucoup de temps à l'utilisateur.

Malgré tout, la mise à jour de ces attributs permet au navigateur d'afficher un cadre correctement dimensionné à la place de l'image, et du même coup l'affichage correct du reste de la page, pendant le temps de chargement de l'image elle-même, comme ci-dessous.

(l'image a été volontairement retirée pour simuler l'apparence durant le chargement des images).

Les attributs hspace et vspace

Permettent de déterminer les espaces, en pixels, entre l'image et le texte autour (hspace horizontalement et vspace verticalement).

Les images cliquables

Utiliser une image dans un lien

L'utilisation d'une image comme étiquette dans un lien ne pose bien entendu aucun problème. Il suffit de placer un élément IMG dans un élément A. Attention toutefois : par défaut les images cliquables ont une bordure de la couleur des liens. Pour la supprimer, il faut utiliser l'attribut border (en lui attribuant la valeur 0).

<A href="exemples/lefrance.html"><IMG src=lefranc_.gif alt="Le France"></A>
Cliquer sur la vignette pour aller voir une belle photo <STRONG>France</STRONG> (36ko)

Cliquer sur la vignette pour aller voir une belle photo (36ko)

L'exemple précédent montre une façon courante de proposer une image volumineuse. On fabrique, avec un logiciel de dessin une copie de l'image, de toutes petites dimensions, et on l'utilise comme lien vers l'image originale (ou mieux, une page contenant cette image). Ainsi l'utilisateur est informé que s'il suit ce lien, il aura accès à une image de bonne qualité, mais que le temps de chargement risque d'être un peu long.

Les cartes cliquables

On appelle "carte cliquable" une image dans laquelle sont définis des zones associées à des liens. Selon l'endroit où l'on clique sur la carte, un lien différent est activé.

Il existe théoriquement deux techniques pour construire une telle image. Dans la première, les coordonées du point sont envoyées au serveur qui renvoie au navigateur l'adresse du lien, celui-ci est alors activé. Cette technique est plus difficile à mettre en oeuvre que la suivante, et implique une requête supplémentaire (et donc une attente plus longue). De plus elle est devenue obsolète, et est incompatible avec la nécessité d'accessibilité des pages.

Nous allons donc étudier la seconde technique, qui permet de spécifier dans la page HTML elle même les différentes zones de la carte. Cette carte sera alors interprétée localement, c'est-à-dire que le logiciel de navigation déterminera lui-même, en fonction de la position du clic sur l'image, du lien à activer. Elle est plus rapide et n'empêche pas l'accessibilité du site.

On place l'image comme d'habitude avec l'élément IMG, tous les attributs ci-dessus sont autorisés. On ajoute un attribut map qui permet d'indiquer le nom de la carte qui doit être utilisée.

Cette carte est définie avec l'élément MAP. Elle permet de définir les différentes zones avec des éléments AREA.

<IMG src=imagemap.gif alt="Carte cliquable" usemap=#map>

<MAP name=map>
<AREA href="index.html"... >
<AREA href="intro.html"... >
<AREA href="bases.html"... >
<AREA href="liens.html"... >
...
</MAP>

Chaque élément AREA définit une zone. Il doit comporter différents attributs :

l'attribut href

pour indiquer l'adresse du lien correspondant à cette zone

l'attribut shape

pour indiquer la forme de la zone. 3 formes sont possibles :

• rect pour un rectangle
• circle pour un disque
• poly pour un polygone

De plus, la valeur default permet de définir un lien qui sera activé si l'on clique en dehors des zones définies. L'élément AREA contenant cette valeur doit être le dernier de la liste.

l'attribut coords

pour indiquer les coordonées des différentes formes :

• rect : un rectangle est défini par son coin supérieur gauche (x1,y1) et son coin inférieur droit (x2,y2) soit coords="x1,y1,x2,y2"
• circle un disque est défini par son centre (x,y) et son rayon (r) coords="x,y,r"
• poly un polygone est défini par la liste de ses sommets (x1,y1), (x2,y2), (x3,y3)... (maximum 100) soit coords="x1,y1,x2,y2,x3,y3..."

l'attribut alt

pour indiquer un texte alternatif que les navigateurs textuels pourront utiliser.

Les coordonnées sont données en pixels et ont pour origine le coin supérieur gauche de l'image.

En supplément, il est possible d'indiquer une zone qui ne doit pas réagir (dans le cas de l'utilisation de la valeur default de un attribut shape. Pour ce faire, on remplace l'attribut href=... par l'attribut nohref

Voici l'exemple précédent complet :

<IMG src=imagemap.gif alt="Carte cliquable" usemap=#map>

<MAP name=map>
<AREA href="index.html" shape="rect" coords="10,10,280,40" alt="Cours HTML">
<AREA href="intro.html" shape="rect" coords="10,50,70,110" alt="Introduction">
<AREA href="bases.html" shape="circle" coords="110,80,30" alt="Bases">
<AREA href="textes/liens.html" shape="poly" coords="150,70,180,70,180,50,
  210,80,180,110,180,90,150,90" alt="Liens">
<AREA nohref shape="rect" coords="220,50,280,110" alt="Rien">
<AREA href="textes/refs.html" shape="default" alt="Références">
</MAP>

Dans le chapitre suivant nous allons aborder la forme avec les feuilles de style.