Accueil    HTML    Balise IMG
 



balise img  Balise IMG : image

«  Partie précédente  |  Index  |  Partie suivante  »


  • Tag de fermeture facultatif (.../> en xhtml) | Support :
  • Google Chrome
  • Firefox
  • Internet Explorer
  • Opera
  • Safari



La balise <img> permet de lier une image à un document en spécifiant sa source via l'attribut "src". Il est important de décrire l'image en utilisant l'attribut "alt" ce qui permettra d'afficher le texte au survol de l'image et de servir de texte par défaut dans le cas où l'image ne peut être chargée.

Il faut également bien penser à définir la taille qui sera donnée à l'image pour bien contrôler et maitriser le rendu de celle-ci dans le document. Pour mettre en place différentes régions cliquables sur une image, il faut employer la balise <map>.

Pour afficher des images comme arrière plan dans une page html ou dans certains éléments, il suffit d'utiliser les styles CSS suivants :
    - background-image : url("URLimage")
    - background-repeat : [repeat / no-repeat]
    - background-position : [bottom / center / left / right / top]



Propriétés pour la balise img :




Propriétés Définition Valeurs
align Détermine l'alignement de l'image par rapport à son conteneur
déprécié, appliquer les styles css pour un rendu similaire		 bottom
left
middle
right
top
alt Description de l'image affichée lors de son survol, et sert de texte alternatif si l'image n'est pas chargée Texte
border Epaisseur de la bordure de l'image
déprécié, appliquer les styles css pour un rendu similaire		 px
height / width Hauteur et largeur de l'image
Appliquer les styles css pour un rendu similaire		 px
%
ismap Cet attribut permet d'indiquer si l'image est utilisée par une balise <map> comme carte cliquable. "ismap"
hspace / vspace Détermine les espaces horizontaux ou verticaux à appliquer pour ajuster le positionnement de l'image
déprécié, appliquer les styles css pour un rendu similaire		 px
longdesc Spécifie un lien vers un fichier décrivant l'image URL
lowsrc Source alternative de l'image à un format moins volumineux (aperçu) permettant de prévisualiser une image lourde à télécharger URL
src Source du fichier physique de l'image écrit en chemin absolu (http://...) ou relatif (par rapport à l'arborescence du site). URL
usemap Référence vers la balise <map> utilisant l'image comme carte cliquable #name



Exemples d'utilisation de la balise img :





Affichage simple d'une image :
<img src="../images/ico_html5.png" alt="icone html5" />


Utilisation d'une image comme lien hypertexte (utiliser le style "border:none" pour supprimer les bordures) :
<a href="#"><img src="../images/ico_html5.png" alt="html5" style="width:64px; height:64px; border:none;" /></a>


Affichage d'une image avec différentes tailles :
<img src="../images/ico_arobas.png" alt="arobas" style="width:16px; height:16px;" />
<img src="../images/ico_arobas.png" alt="arobas" style="width:32px; height:32px;" />
<img src="../images/ico_arobas.png" alt="arobas" style="width:64px; height:64px;" />


Affichage d'une image en arrière plan d'un conteneur html :
<div style="border:solid 1px black; width:320px; height:180px; font-size:14px;
   background-image:url('../images/ico_html5.png'); background-color:silver;
   background-repeat:no-repeat; background-position:center;">
exemple d'affichage d'une image en image de fond d'un élément div.
</div>

Utilisation du style css box-shadow appliquant une ombre portée autour de l'image :
<img src="exemple.png" alt="exemple" style="box-shadow:0 0 15px 5px grey;" />




Affichage simple d'une image :
icone html5

Utilisation d'une image comme lien hypertexte (utiliser le style "border:none" pour supprimer les bordures) :
html5

Affichage d'une image avec différentes tailles :
arobas arobas arobas

Affichage d'une image en arrière plan d'un conteneur html :

exemple d'affichage d'une image en image de fond d'un élément div.



Utilisation du style css box-shadow appliquant une ombre portée autour de l'image :
exemple box-shadow