Les insertions d'images


L'insertion d'images dans un document HTML se fait par l'intermédiaire de la balise IMG. HTML n'impose pas de formats d'images particulier mais il faut savoir que les navigateurs ne reconnaisent que les formats JPEG et GIF, standard de facto du Web. L'utilisation d'autres formats graphiques comme TIFF, TGA, BMP ou autres est déconseillé car les navigateurs ne gérent pas ces formats en interne et doivent faire appel à des applications externes ou à des plug-in. Ceci alourdi considérablement la consultation des pages Web.

Les balises

Insertion d'images selon HTML 3.2
IMG -O EMPTY
src %URL #REQUIRED URL de l'image à insérer
alt CDATA #IMPLIED Ce qui doit être mis à la place de l'image (au cas ou...)
align %IAlign #IMPLIED alignement vertical ou horizontale
height %Pixels #IMPLIED hauteur en pixels
width %Pixels #IMPLIED largeur en pixels
border %Pixels#IMPLIED épaisseur de la bordure si l'image sert de lien
hspace %Pixels #IMPLIED
vspace %Pixels#IMPLIED
usemap %URL #IMPLIED utilise une carte d'image sur le poste client
ismap (ismap) #IMPLIED utilise une carte d'image sur le serveur
%URL
%IAlign "(top | middle | bottom | left | right)"
%Length "CDATA" nn pour des pixels ou nn% for une taille en pourcent
%Pixels "NUMBER"

<IMG SRC="url" [...]> HTML 2.0
Insére une image dans la page. Les attributs suivants peuvent être utilisé :

SRC="url" HTML 2.0
URL absolue ou relative de l'image.
[ALT="text"] HTML 2.0
Affiche un texte alternatif si pour une raison ou pour une autre l'image ne s'affiche pas. Cela arrive si la location est mauvaise, si l'utilisateur stoppe le téléchargement de la page, si le browser ne peut pas afficher les images ou si cette fonction est désactivée. Ce texte peut aussi être afficher tant que l'image n'est pas encore chargée ou lorsque le pointeur de la souris passe au dessus de l'image.
[ALIGN=top|middle|bottom|left|right|baseline|texttop|center|abscenter|absmiddle|absbottom] HTML 2.0
Définit l'alignement de l'image par rapport au texte environnant.
TOP mets le haut de l'image à la même hauteur que le plus haut point de la première ligne. Les lignes suivantes s'alignent sur la marge gauche de la page sous l'image.
MIDDLE aligne le centre de l'image sur la ligne de base de la ligne de texte.
BOTTOM aligne le bas de l'image à la même hauteur que la ligne de base de la ligne de texte. Valeur par défaut.
LEFT aligne l'image sur la marge gauche de la page. Elle est entouré par le texte environant.
RIGHT aligne l'image sur la marge droite de la page.
BASELINE aligne le bas de l'image sur la ligne de base de la première ligne du texte. Fonctionne comme BOTTOM.
TEXTTOP (NS, IE) aligne le haut de l'image avec le plus haut point de la ligne de texte. Fonctionne comme TOP.
CENTER (NS, IE) aligne le centre de l'image sur la ligne de base de la ligne de texte. Fonctionne comme MIDDLE.
ABSCENTER (NS) aligne le centre de l'image avec la ligne de base de la ligne de texte. Fonctionne comme MIDDLE.
ABSMIDDLE (NS, IE) IE aligne le centre de l'image sur la ligne moyenne de la ligne de texte. NS interprète l'attribut comme MIDDLE.
ABSBOTTOM (IE) aligne le bas de l'image à la même hauteur que le plus bas caractères de la ligne de texte comme g, j, etc...
[WIDTH=n|n%] [HEIGHT=n|n%] HTML 3.2
Indiquent la largeur 'WIDTH' et la hauteur 'HEIGHT' en pixels ou en pourcentage de la largeur de la page ou de la hauteur de la fenêtre que doit prendre l'image. Indiquer une valeur différente de la valeur réel force le navigateur à déformer l'image. Définir la largeur et la hauteur permet d'afficher le document plus rapidement car le navigateur peut ainsi réserver la place nécessaire à l'image et n'aura pas à reconstruire la page lorsqu'il l'aura chargée.
[BORDER=n] HTML 3.2
Définit l'épaisseur de la bordure autour de l'image en pixels. Cette bordure est transparente sauf si l'image sert de lien, auquel cas elle sera coloriée.
[HSPACE=n] [VSPACE=n] HTML 3.2
Définit la taille de l'espace horizontal 'HSPACE' (droit et gauche) et vertical 'VSPACE' (haut et bas) en pixels entre l'image et les éléments environnants. A la différence de BORDER, cette zone n'est pas colorié lorsque l'image sert de lien.
[ISMAP] HTML 2.0
Utilisation d'une Server Side ImageMap. C'est à dire que l'image contient différentes zones cliquables servant chacune de lien vers une ressource. La définition des zones est gérée par le serveur, le navigateur doit donc transmettre les coordonnées du point cliquée. Voir le chapitre "ImageMap" pour plus d'informations.
<A href="cgibin/navbar.map"><IMG src=navbar.gif ismap border=0></A>
[USEMAP=URL#anchor] HTML 3.2
Utilisation d'une Client Side ImageMap. C'est à dire que l'image contient différentes zones cliquables servant chacune de lien vers une ressource. L'URL pointe sur le document HTML contenant la carte de définition des zones. Lorsque la carte est situé dans le même document que l'image, l'URL n'a pas besoin d'être précisée. L'ancre est le nom de la carte. La carte est directement interprétée par le navigateur.
USEMAP peut être utilisé en même temps que ISMAP. Si le browser ne supporte pas les Client-Side maps, ISMAP doit être utilisé à la place. Voir le chapitre "ImageMap" pour plus d'informations.
[LOWSRC="url"] NS 2.0
URL de l'image dans une moindre définition, par exemple en noir et blanc. L'image LOWSRC est chargée et affichée en premier, en attendant que l'image SRC soit entièrement chargée. Utilisez cet attribut lorsque l'image principale est trés grande ou sert d'ImageMap. Cela augmente le confort de l'utilisateur qui recoit ainsi plus vite les informations.
Si l'image principale n'utilise pas plus de 256 couleurs vous pouvez l'enregistrez au format GIF entrelacé. Elle s'affichera alors dans son intégralité en améliorant progressivement sa définition au fur et à mesure de son téléchargement.
[NAME="text"] NS 2.0, IE 3.0
Identificateur de l'image pour son usage dans un langage de script comme JavaScript.
[ONABORT=Event-Handler] NS 3.0
Evénement JavaScript appelé lorsque le chargement de l'image est interrompu par l'utilisateur.
[ONERROR=Event-Handler] NS 3.0
Evénement JavaScript devant être appelé en cas d'erreur de chargement.
[ONLOAD=Event-Handler] NS 3.0
Evénement JavaScript appelé après le chargement réussi de l'image.

L'insertion d'objet multimédia (vidéo, sons...) n'a pas encore de solutions normalisées par le W3C. Netscape utilise la balise EMBED et des attributs de contrôle associés à un plug-in. Microsoft à rajouter les attributs suivants à la balise IMG :

[DYNSRC=url] IE 3.0
'Dynamic Source'. Définit l'URL d'un son, d'une vidéo ou d'un fichier VRML. Si le browser ne supporte pas les IMG dynamique, la valeur de SRC sera utilisée. Un son doit être au format .au, .wav ou .mid. VRML (Virtual Modeling Language) est un standart 3D pour les pages Web.
[CONTROLS] IE 3.0
Indique que l'objet DYNSRC doit afficher les boutons de contrôles (Lecture, Arrêt, Avance, Retour...).
[LOOP=n|infinite] IE 3.0
Définit le nombre de répétition d'un objet DYNSRC. 'INFINITE' ou '-1' s'arréte lorsque la page est fermée.
[START=fileopen, mouseover] IE 3.0
Evénement indiquant à quel moment l'objet DYNSRC doit s'ouvrir. Les deux paramètres peuvent être utilisés à la fois.
'FILEOPEN' exécute le fichier dés qu'une quantité suffisante de donnée à été chargée.
'MOUSEOVER' exécute le fichier lorsque l'utilisateur place le pointeur de la souris sur l'objet.

<SPACER TYPE=horizontal|vertical|block [SIZE=n] [...]> NS
SPACER est un type d'espace.

TYPE=horizontal|vertical|block
est le type d'espace. 'HORIZONTAL' insére un espace vide sur une ligne. 'VERTICAL' insére un espace entre deux blocs comme une image vide. 'BLOCK' a deux dimensions, alors que les autres sont à une dimension.
[SIZE=n]
est la hauteur ou la largeur en pixels de l'espace, non utilisé avec TYPE=block.
HEIGHT, WIDTH et ALIGN
. Utilisés avec TYPE=block, ils fonctionnent de la même manière que dans la balise IMG pour spécifier la taille de l'espace.

Plutôt que d'utiliser cette balise qui n'est interprétée que par Netscape, faites usage d'une image GIF89A constitué d'un pixel transparent agrandi au dimensions voulu grâce aux attributs 'HEIGHT' et 'WIDTH'.

Retour en haut

Exemple

globe terrestre <IMG src="globe.gif" width=144 height=143 alt="globe terrestre" align=right>
Dans cette exemble, l'image "globe.gif" situé dans le même dossier que le fichier HTML sera aligné à doite, entouré par le texte qui suit l'insertion. Pour les utilisateurs qui ont désactivé l'autochargement des images le texte de remplacement est "globe terrestre". Il est aussi indiqué la taille de l'image en hauteur et largeur afin que le navigateur réserve l'espace nécessaire pour l'image et garde une mise en page correcte. De plus cela accélère l'affichage des pages selon les navigateur.

Voir Formats d'images pour plus d'infos...

Retour en haut
Une blague !?? Netscape qui ne fonctionne que sur les versions Macintosh. <HYPE>"Blague ???".


Christophe Merlet
redfox@redfoxcenter.org
©Tous droits réservéseacute;s
27 mars 2000