Le langage HTML Balise <IMG>

Somaire

Insertion d'image

LES BALISES HTML La balise <img> insère une image dans un HTML page.
Notez que les images ne sont techniquement pas insérés dans une page HTML, les images sont liées aux pages HTML.
La balise <img> crée un espace dans la page HTML pour l'image référencée.

Balise <img /> : Image

Balise de fermeture en xHTML la balise doit être fermée comme ceci : <img />
La balise (Image) IMG permet d'insérer une image dans le document
. Les extensions les plus fréquentes sont .bmp, .gif et .jpg. Il est possible d'associer à une image un libellé sous forme de tooltip afin de la décrire au survol du curseur. La taille de l'image est également paramétrable et se fait de façon proportionnelle si une seule dimension est spécifiée.

Ses attributs spécifiques sont :
- alt : Description de l'image
- border : Détermine la bordure de l'image.
- height / width : Défini les dimensions de l'image, utile pour mettre en forme la page durant le chargement des images.
- ismap : Si cet attribut est renseigné, l'image est utilisé par une balise MAP comme carte cliquable.
- hspace / vspace : Détermine les espaces horizontaux ou verticaux à appliquer pour ajuster le positionnement de l'image. - longdesc : Lien vers un fichier décrivant l'image
- lowsrc : Source de l'image à un format moins volumineux (aperçu) permettant de prévisualiser une image lourde à télécharger.
- src : Source de l'image, chemin absolu (http://...) ou relatif.
- usemap : Référence vers une balise MAP utilisant l'image comme carte cliquable.
Exemple :

Sélectionner le code
    
Affichage de l'image IE en taille par défaut et en taille forcée :
<img src="../Images/image.gif" />
<img src="../Images/image.gif" width="60" />
<img src="../Images/image.gif" width="80" />

Note :

L'attribut alt est censé être employé comme texte alternatif si l'image n'est pas disponible
Pour montrer le texte quant la souris pointe au dessus des images ou d'imagemap, employez l'attribut titre, comme ceci : <img title= " texte à afficher" alt= " texte de remplacement " src= " image.gif " />

Quand une page Web est chargée, c'est le navigateur qui réellement obtient l'image d'un web server et l'insère dans la page. , Assurez-vous par conséquent que les images existent réellement là où référencez par l'attribut src, autrement vos visiteurs obtiendront une icône de lien cassée. L'icône de lien cassée est montrée si le navigateur ne peut pas trouver l'image.


Ses attributs

La colone DTD dan l tablau suivant indique dans quel HTML 4.01/XHTML 1,0 DTD l'attribut est autorisé:
S=Strict, T=Transitional, and F=Frameset.


Attributs obligatoires

Attribut Valeur Description DTD
alt texte Spécifie un texte alternatif pour une image STF
src URL Spécifie l'URL d'une image STF

Les attributs optionnels

Attribut Valeur Description DTD
align Top
bottom
middle
left
right
Obsolète.Employez les modèles à la place. Spécifie l'alignement d'une image selon les éléments environnants TF
border pixels Obsolète.Employez les modèles à la place. Spécifie la largeur de la frontière autour d'une image TF
height Pixels
%
Spécifie la taille d'une image STF
hspace pixels Obsolète.Employez les modèles à la place. Spécifie le whitespace du côté gauche et droit d'une image TF
ismap ismap Spécifie une image comme imagemap de côté serveur. Rarement utilisé. Regardez l'usemap à la place STF
longdesc URL Spécifie l'URL à un document qui contient une description longue d'une image STF
usemap #mapname Spécifie une image comme imagemap decôté client STF
vspace pixels Obsolète.Employez les modèles à la place. Spécifie le whitespace sur le dessus et le bas d'une image TF
width Pixels
%
Spécifie la largeur d'une image STF

Attributs standards

Attribut Valeur Description DTD
class nom de classe Spécifie un nom de classe d'un élément STF
dir ltr rtl Spécifie l'orientation du texte pour le contenu dans un élément STF
id nom de l'id Spécifie un ID unique pour un élément STF
lang language_code Spécifie un code de langue pour le contenu dans un élément STF
style style_definition Spécifie un style en ligne pour un élément STF
title text Spécifie des informations supplémentaires sur un élément STF
xml:lang language_code Spécifies une langue pour le code contenu dans un élément, en XHTML documents Spécifie STF

Les attributs de l'événement

Attribut Valeur Description DTD
onclick action à exécuter Script à exécuter sur un clic de souris STF
ondblclick action à exécuter Script à exécuter sur une souris double-cliquez sur la souris STF
onmousedown action à exécuter Script à exécuter lorsque le bouton de la souris est pressé STF
onmousemove action à exécuter Script à exécuter lorsque le pointeur de la souris se déplace STF
onmouseout action à exécuter Script à exécuter lorsque le pointeur de la souris sort d'un élément STF
onmouseover action à exécuter Script à exécuter lorsque pointeur de la souris sur un élément STF
onmouseup action à exécuter Script à exécuter lorsque le bouton de souris est relâché STF
onkeydown action à exécuter Script à exécuter quand une touche est pressée STF
onkeypress action à exécuter Script à exécuter lorsqu'une touche est enfoncée et relâchée STF
onkeyup action à exécuter Script à exécuter quand une touche est relâchée STF

      Vous êtes ici:Balise IMG        Retour à la liste des balises






Retour à l'accueil du site

Par carabde 10 mars 2014