Les images

L'insertion d'images dans une page participe de son allégement visuel : si un contenu sans images est tout aussi parlant, il n'en est pas moins lourd et affadi.

Il existe deux formats d'images pris en charge par les navigateurs : GIF (Graphics Interchange Format) et JPEG, tous deux en mode point et fortement comprimés (les autres formats ayant besoin d'un programme externe pour être interprétés).

La réduction des données d'une image est de grande importance pour sa rapidité d'affichage et les formats en mode point, où chaque pixel est déterminé et sauvegardé avec toutes ses informations (position et couleur), s'avèrent être les plus performants.

Les images au format GIF se composent, non par lignes, mais par couche, c'est-à-dire que l'affichage de l'image s'effectue dans son ensemble : plus ou moins floue au début, elle s'affine ensuite à chaque arrivage de paquet de données.

Ce format d'image a deux avantages : à l'aide de programmes spécifiques, une couleur de transparence peut lui être attribuée et il peut être constitué de plusieurs images affichées les unes à la suite des autres pour former une animation.

L'inconvénient des images au format GIF est qu'elles sont limitées à l'emploi de 256 couleurs.

Les images au format JPEG peuvent comporter jusqu'à 16,7 millions de couleurs et sont donc particulièrement adaptées aux graphismes à grande profondeur de couleur, tels que les photos.

Le format JPEG n'a cependant pas les avantages du format GIF quant à la création d'animation ou l'attribution d'une couleur de transparence.

Insertion d'images

<IMG SRC="URL et|ou nom">

Référence d'image (Image Source), définition de l'insertion d'une image à un endroit précis de la page.

<IMG SRC="nom">

Pour une image située dans le même dossier que celui de la page, il suffit d'indiquer son nom pour définir son emplacement.

<IMG SRC="URL">

Pour une image située dans un dossier différent, il faut en définir le chemin d'accès de la même manière que sont définis les liens hypertextes locaux ou universels.

Association d'un lien à une image

<A HREF="URL"><IMG SRC="URL et|ou nom"></A>

Définition d'un lien vers lequel pointe une image.

<IMG SRC="URL" BORDER="?">

Bordure de l'image : lorsqu'une image est définie en tant que lien, elle est affichée automatiquement entourée d'une bordure, on supprime cette bordure en lui attribuant la valeur 0.

Ceci est un lien : <A HREF="imagexpl.htm"> <IMG SRC="../img/chat.gif"> </A>

Ceci est un lien :

<IMG SRC="URL" NAME="nom">

Spécification d'un nom pour l'image.

Commentaires

Pour aller plus vite, certains utilisateurs paramètrent leur navigateur de manière à ce que les images ne s'affichent pas lors du chargement de la page, cette image est alors remplacée par une icône à côté de laquelle il est possible de placer un texte alternatif (non visible lorsque l'image est chargée).

<IMG SRC="URL" ALT="commentaire">

Texte alternatif, affichage d'un commentaire relatif à l'image (son nom, le lien vers lequel elle pointe...).

<IMG SRC="../img/x.gif" ALT="Commentaire sur l'image">

Dans le cas de l'utilisation du caractère " à l'intérieur du commentaire, il est indispensable de le coder (") pour que le texte s'affiche correctement.

Attributs de l'image

La plupart des navigateurs calculent et affichent les images automatiquement en conservant leur taille d'origine mais il est utile d'en définir les dimensions pour plusieurs raisons :

- l'affichage d'une image est accéléré lorsque le navigateur dispose d'informations sur sa taille (évitant ainsi les temps de calcul, il la compose alors plus rapidement),

- réduire ou agrandir une image s'avère parfois utile en fonction des autres éléments de la page,

- retoucher les dimensions d'une image peut permettre de créer des effets particuliers de déformation.

Taille

<IMG SRC="URL" WIDTH="?">

Largeur de l'image, détermine la largeur de l'image dans la page (valeur en pixel ou en pourcentage).

<IMG SRC="URL" HEIGHT="?">

Hauteur de l'image, détermine la hauteur de l'image dans la page (valeur en pixel ou en pourcentage).

<IMG SRC="chatnoir.gif">
<IMG SRC="chatnoir.gif" WIDTH="50" HEIGHT="50">
<IMG SRC="chatnoir.gif" WIDTH="100" HEIGHT="50">
<IMG SRC="chatnoir.gif" WIDTH="50" HEIGHT="100">

Alignement

Il est intéressant de pouvoir aligner du texte et une image pour différentes raisons, notamment en fonction des autres éléments de la page ou pour lui attribuer une légende.

<IMG SRC="URL" ALIGN="LEFT|RIGHT">

Alignement vertical de l'image à côté d'un texte (gauche ou droite).

<IMG SRC="chatroug.gif" ALIGN="LEFT"> C'est un chat.

C'est un chat.

<IMG SRC="URL" ALIGN="TOP|MIDDLE|BOTTOM">

Alignement horizontal de l'image à côté d'un texte (en haut au milieu ou en bas).

C'est un chat. <IMG SRC="chatroug.gif" ALIGN="BOTTOM">

C'est un chat.

<IMG SRC="URL" ALIGN="BASELINE|TEXTTOP">

Alignement de l'image par rapport au texte (en haut ou en bas).

C'est un chat. <IMG SRC="chatroug.gif" ALIGN="TEXTTOP">

C'est un chat.

<IMG SRC="URL" ALIGN="ABSBOTTOM|ABSMIDDLE">

Alignement de l'image par rapport à la ligne (au-dessus ou au milieu).

C'est un chat. <IMG SRC="chatroug.gif" ALIGN="ABSBOTTOM">

C'est un chat.

L'attribut ALIGN n'accepte cependant qu'une seule valeur et ne peut être répété à l'intérieur d'une seule et même balise; ainsi, si l'alignement souhaité n'est pas obtenu à l'affichage, il faut recourrir à la création de tableau.

Distance entre le texte et l'image

<HSPACE="?">

Détermine l'espace (Horizontal Space) à laisser à droite et à gauche de l'image (en pixel).

<VSPACE=>

Détermine l'espace (Vertical Space) à laisser en haut et en bas de l'image (en pixel).

La commande <BR CLEAR=ALL> permet de reprendre l'alignement normal dans la page.

C'est un chat noir. <BR> La distance entre le texte et <IMG SRC="chatnoir.gif" HSPACE="15" VSPACE="10"> l'image du chat noir est définie de manière à ce que l'un <BR CLEAR=ALL> ne touche pas l'autre.

C'est un chat noir. La distance entre le texte et l'image du chat noir est définie de manière à ce que l'un ne touche pas l'autre.

Images cliquables

Une image cliquable (Imagemaps) combine l'insertion d'image avec l'insertion de lien : dans la mesure où chaque point d'une image est sensible au passage de la souris, il peut servir de point d'ancrage à un lien hypertexte.

Ainsi la technique de l'image cliquable consiste à déterminer la position du curseur par rapport aux dimensions de l'image de manière à y délimiter des zones sensibles interprétées en tant que liens par le navigateur.

Il existe deux formes d'images cliquables, l'une faisant appel à un serveur vers lequel les données sont transférées et qui ne fonctionnent qu'en mode connecté, l'autre nécessitant la définition manuelle des points sensibles au passage de la souris.

<A HREF="URL"><IMG SRC="URL" ISMAP></A>

Définition d'une image cliquable, fait appel à un CGI

abrité sur le serveur.

Un CGI (Commun Gateway Interface) est un langage standard permettant la génération de scripts de dialogue entre le client et le serveur : l'image est transférée au serveur, traitée par le programme CGI et la page ainsi référencée est alors renvoyée au client.

La déclaration d'une image cliquable hors connexion s'effectue en deux temps :
- définition de la structure de surface cliquable et des coordonnées des zones sensibles,
- association de cette structure à l'image elle-même.

<IMG SRC="URL" USEMAP="#ancre">

Attribution à l'image d'une ancre, qui correspond à la définition des différentes zones clicables

<MAP NAME="ancre"> ... </MAP>

Définit la structure externe d'une surface cliquable : en lui donnant un nom, on définit une ancre pour une image clicable de la même manière qu'on définit une ancre pour un lien.

<AREA SHAPE="forme" COORD="coordonées" HREF="URL">

Définition d'une zone sensible de l'image cliquable (il faut déclarer une zone sensible pour chaque lien).

AREA SHAPE="rect|circle|polygon"

Forme de la surface cliquable (rectangle, cercle ou polygone).

AREA COORDS="coordonées"

Système de coordonnées dépendant de la forme géométrique définie, établissant les différents points qui délimitent une surface sensible dans l'image.

AREA HREF="URL"

Insertion du lien vers lequel pointe la surface sensible.

<IMG SRC="../img/map.gif" USEMAP="#map"> <MAP NAME="map"> <AREA SHAPE=RECT COORDS="0,0,71,51" HREF="imagexpl.htm#map1"> <AREA SHAPE=RECT COORDS="72,0,150,51" HREF="imagexpl.htm#map2"> <AREA SHAPE=RECT COORDS="0,52,71,100" HREF="imagexpl.htm#map3"> <AREA SHAPE=RECT COORDS="72,52,150,100" HREF="imagexpl.htm#map4"> </MAP>

Note :

Il existe des éditeurs capables de gérer entièrement la définition des images cliquables : ils déterminent les coordonnées des surfaces cliquables et associent un lien à chacune d'entre elles.

Pour gérer soi-même la définition des coordonnées, il faut les établir manuellement selon les différents systèmes de coordonnées propres à chaque figure géométrique à partir de l'angle supérieur gauche sur les axes x et y.

Coordonnées des formes géométriques :

Rectangle

Détermine l'angle gauche supérieur et l'angle droit inférieur : x1,y1,x2,y2

x1 : angle supérieur gauche, sur l'axe horizontal

y1 : angle supérieur gauche, sur l'axe vertical

x2 : angle inférieur droit, sur l'axe horizontal

y2 : angle inférieur droit, sur l'axe vertical

Cercle

Détermine les coordonnées du centre et du rayon du cercle : x,y,r

x : centre, sur l'axe horizontal

y : centre, sur l'axe vertical

r : rayon en pixel

Polygone

Détermine le nombre d'angles du polygone : x1,y1,x2,y2....xn,yn

x1 : pixel d'un angle de gauche sur l'axe horizontal

y1 : pixel d'un angle du haut sur l'axe vertical