all html : Le portail des webmaster

Article publié le mardi 16 mars 2004 par ALL HTML.
Cet article est classé dans les catégories « HTML »

La balise <img> et ses attributs

La balise <img> a de nombreux attributs, le plus important étant bien entendu src qui permet de spécifier l'URL complète (chemin) du fichier :

<img src="nom de fichier">

Le 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 :

<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 :

<img src="http://www.allhtml.com/gif/logoalltml.gif">

Note : Pas de barre oblique inverse \.

a) 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 et, 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.

<img src="gif/ordi.gif" width=40 height=30>

Vous pouvez donc agrandir ou rétrécir votre image en jouant 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.

b) Fournir un texte de rechange

On déclare un texte dit "de rechange" avec l'attribut alt et cela offre 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

Note : L'attribut longdesc (HTML 4.0) permet de spécifier l'URL d'un document contenant une description complète de l'image, ceci afin de ne pas pénaliser les navigateurs dits navigateurs "textes".

<img src="gif/ordi.gif" width=40 height=30 alt="Mon ordinateur">

c) 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.

<img src="gif/ordi.gif" border=1 alt="Mon ordinateur">

d) 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.

<img src="gif/ordi.gif" hspace=2 vspace=2>

e) 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. il possède 9 attributs :

- left : Texte à gauche
- right : Texte à droite
- middle : Texte au milieu
- absbottom : Texte en bas (absolu)
- abmiddle : Texte au milieu (absolu)
- baseline : Sur la ligne du texte
- bottom : Texte en bas
- texttop: Texte en haut
- top : En haut

<img src="gif/ordi.gif" align=right>

f) 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éressante pour des images supérieures à 20 Ko. Précisez également les dimensions de l'image. Attention : cette balise est spécifique à Netscape !

<img src="gif/ordi.gif" width=40 height=30 lowsrc="gif/ordi2.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>qui, elle, 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érieurs 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 (zone 1) et d'un cercle (zone 2). La zone 1 revient au début de la page et la zone 2 se retrouve à nouveau au niveau du titre "La balise <map> et ses attributs".
<map name="testmap"><area shape="rect" coords="10,9,58,27" href="#top"><area shape="circle" coords="104,18,14" href="#map"></map><img src="/gifdata/html4.gif" usemap="#testmap" alt="Exemple balise MAP" border="0" height="36" width="136">

Voici le code de l'exemple ci-dessus :

<map name="testmap"> <area shape="rect" coords="10,9,58,27" href="#top"> <area shape="circle" coords="104,18,14" href="#map"> </map> <img src="/gif/image.gif" border=0 width=136 height=36 usemap="#testmap" alt="Exemple balise MAP">

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).