Images : balise <img>

Utilisation dans un document

La balise <img> est généralement employée pour insérer un schéma, une icône ou une photographie dans un texte.

Insertion dans le code

La balise img comporte deux attributs obligatoires : src et alt.

<img src="fichier.png" alt="description courte de l'image" />

Lorsque l'image est utilisée à des fins esthétiques ou n'a pas de signification importante pour comprendre un principe, l'utilisation de la propriété CSS background: url(nomImage.png) no-repeat; peut être un excellent moyen de ne pas utiliser la balise img. Toutefois dans certain cas, on doit utiliser une balise img avec peu de signification. Dans ces cas précis, l'attribut alt="" doit avoir une valeur vide. Lors de la validation, un attribut alt vide est valide tandis qu'un oubli entraîne une erreur XHTML.

Note pour la présentation

On peut la placer en retrait à gauche ou à droite (float:left, float:right) ou encore dans le texte courant. Par défaut, pour une image placée à l'intérieur d'un texte, le bas de l'image se situe à la hauteur de base du texte (vertical-align:baseline). On peut lui appliquer les propriétés CSS background (fond de l'image), border (bordure), padding (espacement), float (position horizontal dans le texte), vertical-align (alignement vertical), width (largeur) et height (hauteur). Enfin, pour placer une image au centre d'un bloc, il faut spécifier text-align:center sur le bloc et non sur l'image. À la limite, on pourrait utiliser <img src="image.gif" alt="" style="display:block;margin:0 auto;" /> et ne pas utiliser de bloc conteneur supplémentaire.

Image cliquable

Une image cliquable est un moyen de navigation sur un site Web. On peut changer de page ou exécuter des actions avec la zone entière de l'image ou une partie de l'image.

Insertion d'une image cliquable simple

<a href="lien.htm"><img src="image.gif" alt="description de l'image" 
  title="info-bulle lorsque la souris est sur l'image" /></a>

Utilisation d'une "carte" : la balise <map>

La balise <map> permet de créer des zones cliquables en associant une "carte" à une ou plusieurs images. Ces zones peuvent être de formes rectangulaires, circulaires ou variées. Pour ce faire, on doit lié une image, avec l'attribut usemap de la balise img au nom d'une carte, l'attribut name de la balise map. On doit spécifier dans chaque zone (balise area, les coordonnées géométriques de la forme) ainsi qu'une courte description de la zone.

<!-- définitions de la carte pour l'image -->
<map name="planNavigationVisuel">
 <!-- Ordre de la forme "rect": x1-gauche, y1-haut, x2-droit, y2-bas (coin gauche-haut, coin droit-bas) -->
 <area shape="rect" coords="10, 10, 50, 60" alt="page d'accueil" />

 <!-- Ordre de la forme "circle": centre-x, centre-y, rayon -->
 <area shape="rect" coords="80, 100, 20" alt="page de contact" />

 <!-- Ordre de la forme "poly": x1, y1, x2, y2, x3, y3, ..., xN, yN 
      (les cordonnées de début devraient être les mêmes que les coordonnées de fin
       pour fermer la forme même si c'est facultatif) -->
 <area shape="rect" coords="200, 100, 400, 120, 400, 320, 200, 300, 200, 100" alt="page d'information" />
 
</map>

<!-- la carte est superposée sur l'image à l'aide de l'attribut usemap -->
<img src="plandusite.jpg"
     alt="plan du site"
     usemap="#planNavigationVisuel" />
			

N.B.: La valeur de l'attribut usemap doit avoir un dièse (#) devant le nom de la carte.

Note pour les documents XHTML 1.1 seulement: on doit utiliser l'attribut id pour la carte au lieu de l'attribut name et il ne faut pas ajouter de dièse (#) pour l'attribut usemap de l'image.

La balise <object>

La balise object a été introduite pour remplacer la balise applet et embed et même, à un certain point, la balise img. En effet, <object> possède un moyen puissant d'intégrer un document multimédia à l'intérieur d'une page Web. En théorie, on pourrait inclure tous les types de documents lorsque le bon plugiciel est installé. Malgré tout, la balise <object> est peu maitrisée par les webmestres et la majorité des navigateurs implémentent mal cette balise. Certains navigateurs ne supporte pas le phénomène en cascade lors de l'affichage dans le navigateur ou lors de l'impression.

La balise <object> est surtout utilisée sur Internet pour inclure les animations Flash. On peut aussi inclure des images (gif, png, jpg, svg), des sons, des documents XHTML, des vidéos, des applets Java. Avec les documents XHTML, il faut éviter la création d'inclusion récursive, c'est à dire, il ne faut pas que la page A appelle la page A qui appelle la page A...

L'utilisation des attributs est assez compliquée. En effet, la valeur et la signification est différente d'un type de document à l'autre. Il faut donc se référer pour la plus part du temps à la documentation fournie par le format spécifique. Regarder sur le site de Macromedia pour savoir comment inclure une animation Flash par exemple.

Voici un exemple d'inclusion d'un son au format Ogg Vorbis: (note: le code a été généré par mon générateur).

<object width="0" height="0" type="application/ogg" data="son.ogg">
	<param name="src" value="son.ogg" />
	<param name="loop" value="true" />
	<param name="autostart" value="true" />
</object>

On peut voir la spécification de la hauteur et largeur comme la balise <img>. Suit le type mime qui doit être déclaré de la même manière que la balise <script>, <link> ou <style>. On peut aussi voir que le chemin du fichier est spécifié deux fois: avec l'attribut data et avec le paramètre src. Les balises <param> permettre d'ajouter des paramètres supplémentaires à l'objet.

L'utilisation des paramètres <param>

La balise <param> permet de spécifier des paramètres à la balise <object>. La balise <param> se situe à l'intérieur de la balise <object>. L'attribut name="" est le nom de l'attribut. L'attribut value="" est la valeur prise par le paramètre. Puisque la valeur des paramètres ne sont pas définies dans la recommendation XHTML, on doit lire la documentation des navigateurs et des plugiciels.

L'accessibilité en cascade

Contrairement à la balise <img>, la balise <object> permet d'inclure d'autres balises à l'intérieur d'elle. En général, les navigateurs devraient afficher les balises (autres que param) qui sont à l'intérieur de la balise <object> si et seulement si l'objet en question ne peut pas être affiché. Il n'en est pas toujours le cas. En théorie, cette imbrication est tout à fait légale:

<object width="100" height="100" type="video/quicktime" data="test.mov" 
        standby="veuillez patienter s.v.p." classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B">

	<param name="src" value="test.mov" />

	<object width="0" height="0" type="application/ogg" data="son.ogg">
		<param name="src" value="son.ogg" />
		<object type="image/png" data="test.png">
			Texte final...
		</object>
	</object>
</object>

Tout ce code signifie: Affiche un vidéo dans un espace de 100x100 pixels. Si le navigateur n'est pas capable, il essait de jouer le son "son.ogg". Si le navigateur ne peut pas jouer l'extrait sonore, il essait d'afficher l'image "test.png". Finalement, s'il n'est toujours pas capable, il doit afficher le texte. On peut aussi voir que la balise <object> possède l'attribut "standby" qui permet d'afficher un message lors du chargement d'une document multimédia.

Ceci est bien théorique car les implémentations sont assez pauvres et on le voit assez rarement sur Internet.