Le langage HTML Balise <IMG>

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 à accueil du site

Retour à l'accueil du site

Par carabde 10 mars 2014

Le langage HTML Balise <IMG>

Balises HTML

Plus...