La balise img du langage HTML permet d'insérer des images dans une page HTML. L'image peut être située sur le même serveur que la page dans laquelle elle est insérée mais également sur un autre serveur en spécifiant son URL complète.
Les principaux attributs de la balise img sont :
Attribut | Valeur | Résultat |
---|---|---|
ALIGN | bottom center left middle top right |
Alignement de l'image. |
ALT | Texte alternatif au cas où l'image ne s'affiche pas. | |
BORDER | Nombre entier | Nombre de pixels de la bordure. La couleur de la bordure peut être définie par l'attribut LINK ou TEXT de la balise <BODY>. Par défaut l'attribut BORDER vaut 1 ce qui crée un petit cadre autour de l'image. Pour ne pas avoir ce désagrément pensez à le définir comme étant égal à 0. |
HEIGHT | Nombre entier | Hauteur de l'image (en pixels ou en %). Lorsque cet attribut précise une dimension différente de la dimension originale du graphique, le navigateur la redimensionne dynamiquement, ce qui peut provoquer un affichage de moins bonne qualité. |
HSPACE | Nombre entier | Nombre de pixels d'ajustement entre l'image et le texte adjacent (horizontalement). |
LONGDESC | URL de la description de l'image. | |
LOWSRC | URL | Image alternative (généralemnt plus petite) affichée le temps que la vraie image soit chargée par le navigateur. |
NAME | Permet de définir un nom pour l'image. Cet attribut est notamment utile pour la gestion des images en Javascript. | |
SRC | URL | URL de l'image |
TITLE | Texte alternatif au cas où l'image ne s'affiche pas. | |
USEMAP | URL ou nom de l'ancre définissant l'image réactive. | |
VSPACE | Nombre de pixels d'ajustement entre l'image et le texte (verticalement). | |
WIDTH | Nombre entier | Largeur de l'image (en pixels ou en %). Lorsque cet attribut précise une dimension différente de la dimension originale du graphique, le navigateur la redimensionne dynamiquement, ce qui peut provoquer un affichage de moins bonne qualité. |
<img src="url_de_l_image" alt="Texte remplaçant l'image" title="Texte à afficher"/>Codes exemples :
<img src="php.png" alt="image" title="PHP Hypertext Preprocessor" />
<a href="http://www.php.net"> <img src="php.png" alt="image" title="www.php.net" /> </a>
<img src="php.png" alt="image" title="PHP Hypertext Preprocessor" border="3" width="340" height="186" />
Il est possible de créer des zones cliquables à l'intérieur même d'une image grâce à l'attribut usemap utilisé conjointement avec la balise map.
L'attribut usemap de la balise img pointe vers une balise map contenant la description du découpage de l'image en zones cliquables.
La balise map a un attribut name définissant son nom (name="nom") et contient les zones cliquables déclarées grâce à des balises area.
Code exemple :
<map name="map"> <area shape="rect" coords="0,0,170,93" href="area_1.html"> <area shape="rect" coords="171,0,340,93" href="area_2.html"> <area shape="rect" coords="171,94,340,186" href="area_3.html"> <area shape="rect" coords="0,93,170,186" href="area_4.html"> </map> <img usemap="#map" src="area_1.png" border="0" width="340" width="186" />