L'élément img permet d'afficher une image, quels que soient les formats MIME pris en charge par le navigateur. Les types MIME d'image les plus répandus sont GIF et JPEG, mais les navigateurs modernes peuvent souvent décoder les images bitmap au format PNG ou BMP (à moins que les paramètres des applications auxiliaires ne redirigent ces types de fichiers vers des applications externes). Les éléments img sont des éléments internes, qui apparaissent à l'emplacement où ils sont spécifiés, donc éventuellement au beau milieu d'une ligne de texte. Un grand nombre des attributs qui affectent la présentation visuelle des éléments sont délaissés dans HTML 4, en faveur des attributs équivalents dans des feuilles de style. Toutefois, il restera possible d'utiliser ces attributs sans problème dans plusieurs générations futures de navigateurs, car ces derniers devront être dotés de la compatibilité ascendante en raison du très grand nombre de documents contenant des images qui existent déjà sur le Web. Si vous avez l'intention d'utiliser des feuilles de style pour les bordures et les marges de l'élément img dans Navigator 4, notez que cet élément img doit être imbriqué dans un élément div ou span auquel seront affectées les règles de feuille de style. Ce palliatif fonctionne également avec tous les autres navigateurs comprenant CSS, ce qui vous permet d'utiliser des feuilles de style indépendamment du navigateur cible.

Pour que la totalité d'une image devienne un lien, placez l'élément img à l'intérieur d'un élément a. Pour éliminer la bordure typique des liens qui encadrera alors l'image, paramétrez l'attribut border avec la valeur 0. Quant aux "cartes images" (images dont diverses parties contiennent des liens pointant vers diverses destinations), les recommandations HTML conseillent de les utiliser du côté client (à l'aide de l'attribut usemap) plutôt que du côté serveur (avec l'attribut ismap). Pour une action autre qu'un lien, vous pouvez affecter le gestionnaire d'événements onclick à une image dans IE 4 et versions ultérieures et Netscape 6. L'inconvénient est que vous devrez contrôler le style de curseur au moyen d'autres événements, car la pseudo-classe :hover a une action fiable (le cas échéant) sur les éléments a uniquement.

Pour assurer la compatibilité ascendante avec les anciennes versions des navigateurs gérant les scripts, il est conseillé d'insérer des attributs height et width à l'intérieur des balises de tous les éléments img. Lorsque des valeurs sont affectées à ces attributs, le navigateur affiche ces pages plus rapidement, puisqu'il n'a pas besoin d'attendre que l'image soit chargée pour déterminer sa taille et positionner en conséquence le reste du contenu de la page.

Détermine le rendu de l'élément img par rapport au conteneur père et au contenu environnant. Certains paramètres permettent de faire "flotter" l'image en l'alignant sur la marge gauche ou droite, et en laissant le texte environnant encadrer l'image (sauf avec une image centrée).

La plupart des règles concernant les constantes d'alignement indiquées au début de ce chapitre s'appliquent à l'élément img. L'attribut align est délaissé dans HTML 4, qui conseille d'utiliser les attributs de feuille de style. Mais vous pouvez utiliser l'attribut align pour assurer la compatibilité ascendante de votre document.

Dans un monde où les navigateurs graphiques se sont taillé la part du lion, il est facile d'oublier que les navigateurs ne peuvent pas tous télécharger les images et que certains internautes ne peuvent pas afficher les images. Sans parler des utilisateurs de terminaux VT100 équipés de navigateurs en mode texte tels que Lynx, les ordinateurs de poche offrent en général de meilleures performances lorsque les images ne sont pas téléchargées. S'ils ne peuvent pas voir une image spécifique, les utilisateurs malvoyants pourront quand même savoir à quoi elles se rapportent. Les navigateurs de type texte affichent le texte attribué à l'attribut alt d'un élément img lorsque ce dernier apparaît sur la page. Les navigateurs capables de lire le texte de la page peuvent également lire le texte alt. L'attribut alt devrait contenir une brève description de l'image (ou une chaîne vide lorsque l'image remplit uniquement une fonction de remplissage). La recommandation HTML attache une telle importance à cette fonction qu'elle définit l'attribut alt comme une spécification de l'élément img.

Contrôle l'épaisseur de la bordure qui entoure un élément img. Par défaut, la bordure est affichée en noir, mais si l'élément img est imbriqué dans un élément a, cette bordure reprend les diverses couleurs du lien, selon l'état de celui-ci. Pour créer une bordure dans une autre couleur, utilisez les feuilles de style (en imbriquant l'élément img dans l'élément div ou span approprié pour Navigator 4). Lorsqu'un lien encadre l'image, vous pouvez éliminer la bordure colorée en indiquant une valeur de zéro pour l'attribut border.

Cet attribut est utilisé avec IE dans le cadre d'une liaison de données, pour associer le nom d'une colonne d'une source de données distante à l'adresse URL indiquée dans l'attribut src de l'élément img. Vous devez également définir un attribut datasrc pour l'élément img. S'applique uniquement aux sources de données de fichier texte dans IE 5 pour Mac.

Utilisé avec la fonction de liaison de données de Microsoft Internet Explorer pour spécifier l'ID de l'élément object de la page, qui charge l'objet de source de données pour l'accès distant aux données. Le contenu à extraire de la source de données est spécifié à l'aide de l'attribut datafld. S'applique uniquement aux sources de données de fichier texte dans IE 5/Mac.

Internet Explorer 4 et versions ultérieures permettent d'afficher des clips vidéo (et des fichiers VRML) à l'aide de l'élément img (comme alternative aux éléments embed ou object). Pour aider le navigateur à différencier les sources d'images statiques ou dynamiques, vous pouvez utiliser l'attribut dynsrc à la place de l'attribut src pour charger le clip vidéo. Tous les autres aspects visuels de l'élément img sont donc immédiatement applicables à la zone rectangulaire destinée à l'affichage du clip vidéo. Consultez les sections consacrées à l'attribut loop, qui permet de contrôler le nombre de lectures du clip, et à l'attribut start.

Indique si les images d'un format minimal de 130  pixels de haut et de large affiche la barre d'outils  «  Mes images   » du système d'exploitation Windows lorsque la souris passe au-dessus d'un élément. Cette barre d'outils propose des raccourcis rapides qui permettent, par un clic, d'enregistrer ou d'imprimer l'image, ou bien de l'envoyer par e-mail. Vous n'avez aucun contrôle sur les boutons qui apparaissent dans la barre d'outils.

Définit les dimensions de l'espace qui est réservé à l'image sur la page, quelle que soit la taille réelle de l'image. Pour garantir la meilleure qualité d'image et la compatibilité ascendante avec les scripts, il est conseillé de donner à ces attributs les valeurs de hauteur et largeur réelles (en pixels) de l'image source. Si vous indiquez des valeurs différentes, le navigateur modifiera (mais de façon insatisfaisante) l'échelle de l'image pour adapter celle-ci à l'espace défini par ces attributs.

Définit une marge qui fait office de réserve autour du contenu visuel de l'élément img. L'attribut hspace définit une marge sur les côtés gauche et droit du rectangle de l'image; l'attribut vspace définit une marge sur les côtés inférieur et supérieur du rectangle de l'image. Les deux attributs sont délaissés dans HTML 4, qui conseille d'utiliser les attributs CSS de marge ou de remplissage.

Identifiant unique qui distingue cet élément de tous les autres au sein du document. Peut être utilisé pour associer un simple élément à une règle de style nommant cette valeur d'attribut — en tant que sélecteur d'ID. Un élément peut recevoir un ID qui en assurera l'unicité, ainsi qu'une classe qui le rattachera à un groupe. Reportez-vous au chapitre 3.

IE 4 et les versions ultérieures ainsi que Netscape 6 autorisent les attributs id pour les éléments non affichables, mais si votre code requiert une validation, sachez que les DTD HTML 4 W3C et XHTML ne l'autorisent pas. Comme tous les éléments du DOM W3C ont une propriété id, il est naturel d'affecter un attribut id aux éléments non affichables si les scripts doivent référencer ces éléments. Ou vos scripts peuvent utiliser d'autres moyens (par exemple le tableau renvoyé par document.getElementsByTagName( )) pour référencer de tels éléments.

Affectez des identifiants aux attributs id afin de dupliquer des valeurs précédemment affectées seulement aux attributs name dans des éléments comprenant l'attribut name. Les contrôles de formulaire des navigateurs actuels nécessitent encore des attributs name pour que les paires nom/valeur soient envoyées avec le formulaire et les éléments a jouant le rôle d'ancres nécessitent toujours ces attributs de nom. N'oubliez pas d'affecter un identifiant à l'attribut id de tout élément que vous avez l'intention de référencer par script.

L'attribut booléen ismap indique au navigateur que l'élément img est une carte image (image interactive) côté serveur. Pour transformer une image en carte image côté serveur, imbriquez l'élément img dans un élément a dont l'attribut href pointe vers l'adresse URL du programme CGI chargé d'interpréter les coordonnées du point sur lequel l'utilisateur clique. Le navigateur ajoute les informations relatives aux coordonnées du clic à l'adresse URL, de la même manière que la méthode GET d'un formulaire ajoute les données relatives à l'élément de formulaire à l'adresse URL de l'attribut action. Dans l'exemple ci-dessous, si l'utilisateur clique sur le point situé aux coordonnées 50, 25, le navigateur renvoie au serveur la chaîne "http://www.giantco.com/cgi-bin/nav.pl?50,25". Un programme CGI nommé nav.pl examine alors la zone qui contient les coordonnées indiquées, et renvoie au client le code HTML adéquat.

Les navigateurs récents permettent d'utiliser des cartes images côté client (voir l'attribut usemap), dont le fonctionnement est plus rapide car elles ne nécessitent pas d'échange avec le serveur pour examiner les coordonnées du point cliqué.

Description de l'élément. Pour les éléments HTML qui produisent du contenu visible sur la page, IE 4 et versions ultérieures ainsi que Netscape 6 affichent le contenu de l'attribut title sous forme d'info-bulle lorsque le curseur reste un moment sur l'élément concerné. Par exemple, l'élément de colonne col n'affiche pas le contenu, donc son attribut title fournit simplement des informations. Pour générer des info-bulles dans les tableaux, affectez des attributs title aux éléments tels que table, tr, th ou td.

Les propriétés de police et de couleur sont régies par le navigateur et ne peuvent pas être modifiées par script. Dans IE pour Windows, l'info-bulle est le petit rectangle jaune clair standard; dans IE pour Macintosh, l'info-bulle s'affiche comme une bulle de BD, à la manière du système d'aide de MacOS. Dans Netscape 6, les info-bulles s'affichent toujours sous la forme du même petit rectangle quelle que soit la version du système d'exploitation. Si aucun attribut n'est spécifié, l'info-bulle ne s'affiche pas.

Vous pouvez affecter à cet attribut le texte descriptif de votre choix. Etant donné que tout le monde ne le verra pas, n'y placez pas d'informations essentielles. Peut-être les navigateurs conçus pour satisfaire les critères d'accessibilité Web utiliseront-ils les informations de cet attribut pour lire les informations au sujet d'un lien ou d'éléments autres que du texte à des utilisateurs malvoyants. Donc, ne négligez pas cette aide potentiellement utile pour décrire l'objectif d'un élément sur une page.

Bien que les indications de compatibilité pour cet attribut le fassent remonter à l'époque de Microsoft Internet Explorer 3 et HTML 3.2, il est nouvellement affecté à de nombreux éléments à partir de Microsoft Internet Explorer 4 et de HTML 4.0.

Permet de spécifier l'adresse URL d'un document contenant une description de l'élément plus longue que celle qui apparaît dans les attributs alt ou title. Une application de cet attribut, dans de futures versions des navigateurs, pourra consister à recevoir une description annotée de l'élément, pour les utilisateurs qui ne peuvent pas lire l'écran du navigateur. La sélection de Properties pour le menu contextuel de Netscape 6 de cet élément affiche une petite fenêtre qui inclut un lien actif vers l'URL assigné à l'attribut. Les navigateurs de la Version 6 ne proposent aucune autre fonctionnalité pour cet attribut.

Si vous avez spécifié un clip vidéo à l'aide de l'attribut dynsrc, l'attribut loop permet de contrôler le nombre de lectures (en boucle) du clip après son chargement. Si vous donnez la valeur zéro à cet attribut, le clip est chargé mais sa lecture n'est pas immédiatement déclenchée. La lecture des clips vidéo qui ne sont pas déjà en cours d'exécution est déclenchée lorsque l'utilisateur double-clique sur l'image, mais il peut être nécessaire de fournir à l'utilisateur des instructions à cet effet, car aucun contrôle n'est visible. Cet attribut ne contrôle par la lecture des .gif animés.

Les développeurs de Navigator et de Microsoft Internet Explorer étaient conscients du fait que la majorité des utilisateurs ne disposent pas d'une connexion rapide à l'Internet, et que le chargement des images en haute résolution peut alors prendre beaucoup de temps. Pour aider l'internaute à patienter, l'attribut lowsrc permet d'indiquer l'adresse URL d'une image en basse résolution (ou image alternative) qui sera chargée dans un premier temps à l'emplacement prévu dans le document pour l'image normale. L'image lowsrc doit en principe avoir la même taille, en pixels, que l'image src principale.

Pour contrôler une image à l'aide d'un script (en particulier pour une interversion d'images), les scripts à compatibilité ascendante utilisent la valeur de l'attribut name pour référencer l'objet img, car l'attribut id n'existait pas. Les références sont plus fiables lorsqu'elles sont définies par nom que sur la base d'un index numérique dans le tableau document.images, puisque vous pouvez réorganiser ou supprimer des images quand bon vous semble tout en conservant les références aux images nommées restantes. Pour les navigateurs modernes uniquement, vous pouvez utiliser la valeur de l'attribut id au lieu de l'attribut name.

Adresse URL d'un fichier contenant l'image affichée par l'élément img. Sauf si vous utilisez l'attribut dynsrc pour afficher un clip vidéo dans Internet Explorer ou l'attribut datasrc pour la liaison de données IE, l'attribut src est nécessaire pour qu'une image soit affichée dans l'espace affecté à l'élément img. Le navigateur doit prendre en charge le type MIME du format d'image utilisé. Sur le World Wide Web, les formats d'image les plus répandus sont GIF et JPEG. Bien sûr, la validation HTML ou XHTML exige l'attribut src et n'accepte pas les alternatives d'attribut IE.

Si vous utilisez l'attribut dynsrc d'un élément img pour afficher un clip vidéo dans Internet Explorer, vous pouvez indiquer à cet élément que la lecture du clip doit débuter automatiquement dès la fin du chargement du fichier vidéo, ou seulement lorsque l'utilisateur amène le curseur sur cette image. L'attribut start permet de choisir l'interface utilisateur de votre page.

Cet attribut permet de définir une ou plusieurs propriétés de style pour l'élément considéré. Vous pouvez utiliser la syntaxe CSS ou (pour Navigator 4 uniquement) JavaScript pour affecter des attributs de style. Utilisez l'attribut style uniquement avec les éléments visibles (affichables).

Lorsque vous l'activez, cet attribut interdit à Navigator 4 d'afficher l'icône d'image générique, le texte alt et la zone d'image surélevée tant que l'image est en cours de téléchargement. Lorsque le chargement de l'image est impossible, les avatars apparaissent dans l'espace de l'image si l'attribut n'est pas activé.

Vous pouvez définir une carte image côté client à l'aide des éléments map et area. L'élément map est le conteneur nommé d'un ou plusieurs éléments area. Chaque élément area définit une zone sensible de l'image et affecte une destination (et autres paramètres) à un lien en réponse au clic de l'utilisateur dans cette zone. La raison d'être de l'élément usemap consiste à établir une connexion entre l'élément img et un élément map nommé figurant dans le même document. Dans un sens, le nom de l'élément map est traité comme une ancre, dans la mesure où son  «  adresse   » est le nom de l'élément précédé du symbole #.

Voir hspace.

Voir height.