Chapitre 8

Les balises <IMG> et <MAP>.

La balise <IMG> et ses attributs
La balise <MAP> et ses attributs

La balise <IMG> et ses attributs.

La balise <IMG> a de nombreux attributs, le plus important est bien entendu SRC, il permet de spécifier l'URL complète (chemin) du fichier.
ex:
<IMG SRC="nom de fichier">
nom de fichier doit être remplacé par le nom de l'image et son extension (ordi.gif). si votre fichier ordi.gif se trouve dans un autre répertoire que vos pages, par exemple dans un répertoire gif, cela donne :
ex:
 <IMG SRC="gif/ordi.gif"> 
A noter que vous pouvez charger une image sur un autre site (principe du compteur) il faut pour cela l'adresse complète du serveur.
ex:
<IMG SRC="http://www.monsite.com/gif/logo.gif">
Attention: Pas de barre oblique inverse \.

Précisez la taille de l'image au navigateur.

En précisant la taille de l'image au navigateur, celui ci charge plus rapidement votre page, en effet il n'a pas à la recalculer, de plus si jamais le visiteur a désactivé le chargement des images la mise en page ne sera pas perturbée. Ces dimensions correspondent à la taille en pixels de l'image. Ici l'image fait 40 pixels de large sur 30 pixels de hauteur.
ex:
 <IMG SRC="gif/ordi.gif" WIDTH=40 HEIGHT=30> 
Vous pouvez agrandir ou rétrécir votre image en jouant donc sur les attributs WIDTH et HEIGHT mais attention le dessin ne sera pas chargé plus rapidement si vous diminuez sa hauteur ou sa largeur (ou les deux) bien au contraire.

Fournir un texte de rechange.

Il se fait avec l'attribut ALT.
Deux avantages:
- Si le visiteur désactive le chargement des images, il pourra quand même deviner le sens de l'image.
- Vous pouvez par ce biais fournir une légende à une image lorsque le pointeur de la souris passe au-dessus de cette image.
ex:
<IMG SRC="gif/ordi.gif" WIDTH=40 HEIGHT=30 ALT="Mon ordinateur"> 
Entourer l'image.

Avec l'attribut BORDER vous pouvez entourer l'image d'une bordure. L'attribut BORDER prend une valeur de 1 à x qui exprime la largeur de cette bordure entourant l'image.
ex:
<IMG SRC="gif/ordi.gif" BORDER=1 ALT="Mon ordinateur">
Espacer l'image.

Avec les attributs HSPACE=n VSPACE=n (n étant un nombre en pixels) vous pouvez fixer un espace vertical et horizontal autour de votre image.
ex:
<IMG SRC="gif/ordi.gif" HSPACE=2 VSPACE=2>
Positionner et aligner une image.

Par défaut l'image est placée sur une ligne et, le texte s'il est présent est aligné sur le bas de l'image. Si vous voulez encadrer une image avec du texte (style journal) l'attribut ALIGN est requis elle a 9 attributs:

LEFT: Texte à gauche.

RIGHT: Texte à droite.

MIDDLE: Texte au milieu.

ABSBOTTOM: Texte en bas (absolu).

ABSMIDDLE: Texte au milieu (absolu).

BASELINE: Sur la ligne du texte.

BOTTOM: Texte en bas.

TEXTTOP: Texte en haut.

TOP: En haut.

ex:
<IMG SRC="gif/ordi.gif" ALIGN=RIGHT> 
; Prévisualisation des images.

A l'aide de l'attribut LOWSRC vous pouvez accélérer l'affichage de vos pages, en effet le navigateur affichera en premier lieu ce qu'il trouve dans la balise LOWSRC. Généralement l'image contenue dans l'attribut LOWSRC doit être en basse résolution ou compressée. L'utilisation de cet attribut est surtout intéressant pour des images supérieures à 20 Ko. Précisez également les dimensions de l'image.
Attention cette balise est spécifique à Netscape.
ex:
 <IMG SRC="gif/ordi.gif" WIDTH=40 HEIGHT=30 LOWSRC="gif/ordireduit.gif" >
La balise <MAP> et ses attributs.

La balise permet de créer une image réactive (côté client) en HTML. L'image réactive est utilisée généralement pour définir plusieurs liens (interne ou externe) sur une même image, elle est souvent utilisée pour des banderoles. La balise <MAP> doit être utilisée avec la balise <AREA>. La balise <AREA> possède trois attributs :

SHAPE qui peut prendre trois valeurs :

RECT pour un rectangle.

CIRCLE pour un cercle.

POLY pour un polygone.

COORDS :

Indique les coordonnées des coins supérieur gauche et inférieur droit de la zone pour un rectangle RECT.

Indique les coordonnées de chaque angle du polygone si vous optez pour la valeur POLY.

Indique les coordonnées du centre du cercle et la dimension du rayon de ce même cercle pour la valeur CIRCLE.

HREF définit la page de destination du lien correspondant à la zone. Vous pouvez bien entendu, utiliser un lien interne ou externe.

Exemple d'une image réactive composée d'un rectangle (zone1) et d'un cercle (zone2). La zone1 revient au début de la page et la zone 2 revient au titre "La balise <MAP> et ses attributs".

Voici le code de l'exemple ci dessus.

Note : on remarquera que l'attribut NAME (à l'intérieur de la balise MAP) et que l'attribut USEMAP (à l'intérieur de la balise IMG) ont le même nom, ceci afin de les relier (obligatoire).
  <MAP NAME="TESTMAP>
  <AREA SHAPE="RECT" COORDS="5,5,90,40" HREF="#top"> 
  <AREA SHAPE="CIRCLE" COORDS="139,23,20" HREF="#map"> 
  </MAP> 
  <IMG SRC="gif/area.gif" BORDER=0 WIDTH=191 HEIGHT=45 USEMAP="#TESTMAP" ALT="Exemple balise MAP">