ISET MEDENINDE | Programmation Web
Chapitre 5
Les images en HTML
I. La balise <img>
C'est la commande <IMG> qui permet d'afficher des images au sein d'une page codée en
HTML et de la positionner à l'endroit voulu dans le texte. Cette commande n'a pas besoin
d'être fermée. Elle a un attribut indispensable qui est : src (pour SouRCe). Ce dernier permet
de définir exactement le chemin de l’image à utiliser. Donc pour afficher une image il faut au
moins écrire : <img src= "chemin/nom_image.extension ">
Le tag <IMG> possède d’autres attributs :
WIDTH et HEIGHT : Ce sont la largeur et la hauteur de l'image en pixels. Cela
permet la fluidité de l'affichage car le navigateur doit connaitre l'emplacement à réserver
à l'image pour pouvoir continuer à afficher le texte.
ALT : Cette option permet d'afficher un texte à la place de l'image quand elle n'a pas
encore été chargée.
BORDER : Taille du cadre autour de l'image en pixels (par défaut 1). Pour ne pas
afficher une bordure de l’image, il suffit de mettre border= "0".
ALIGN : Alignement de l'image. Il prend les valeurs LEFT, RIGHT, MIDDLE, TOP et
BOTTOM.
VSPACE et HSPACE : Espace vertical et Espace horizontal. Permet de déterminer en
pixels l'espace laissé libre autour de l'image.
II. Les Types des images en HTML
1. Image lien
Il est possible de mettre un lien sur une image, par exemple un clic de souris sur cette image
appelle une autre page Web. Cela est fait en encadrant la balise <IMG> par une balise d’un
lien hypertexte <A></A>
2011-2012 | Enseignantes : R.Ben Azzoun & S.Ben Guirat Page |1
ISET MEDENINDE | Programmation Web
Exemple : <A href= "http://www.google.tn"> <img src="image1.jpg"> </A>
En cliquant sur l’image image1.jpg insérée vous allez redirigés vers le lien hypertexte
externe du site www.google.tn
2. Image arrière-plan
Il est possible d'afficher une couleur ou une image en guise de fond sur la page web.
Couleur d'arrière-plan : <BODY BGCOLOR="#******">
Image (Texture) d'arrière-plan : <BODY BACKGROUND="chemin/nom_img.ext">
3. Les images mappées
Les images mappées ou cliquables ont la particularité d'avoir des zones sur lesquelles il est
possible de cliquer et d'ouvrir ainsi d'autres fichiers.
Pour réaliser ce genre des images on a besoin de la portion du code suivante:
<IMG SRC="image à utiliser" USEMAP="#nom_du_map">
<MAP NAME="nom_du_map">
<AREA SHAPE="rect" COORDS="coordonnées" HREF="URL" ALT="texte">
<AREA SHAPE="circle" COORDS="coordonnées" HREF="URL" ALT="texte">
…….
…….
</MAP>
<IMG ……>: c'est la même balise <img> pour une image normale avec tout les
attributs définis dans cette balise sauf qu'on ajoute l'attribut usemap qui indique le nom
du MAP qu'on va utiliser.
La valeur de l'attribut NAME de la balise <MAP> doit être le même que celui donné
dans l'attribut USEMAP de la balise <IMG>.
On utilise la balise <AREA> exactement autant des fois qu'on a des zones cliquables
dans notre image.
SHAPE: définit la forme de la zone : rect (rectangle), circle (cercle), polygon
(polygone).
COORDS: indique les coordonnées de la zone. Elles varient selon la forme géométrique
déjà choisie avec l'attribut SHAPE.
2011-2012 | Enseignantes : R.Ben Azzoun & S.Ben Guirat Page |2
ISET MEDENINDE | Programmation Web
pour le rectangle: COORDS="x1,y1,x2,y2" (l’abscisse et l’ordonnée du coins haut
gauche et du coin bas droit)
pour le cercle: COORDS="x,y,r" (l’abscisse et l’ordonnée du centre et la valeur
du rayon)
pour le polygone: COORDS="x1,y1,x2,y2,x3,y3,…..." (les abscisses et les
ordonnées des sommets du polygone)
HREF: définit l'adresse vers laquelle pointe la zone.
ALT: attribut facultatif, permet d'afficher un commentaire quand la souris s'arrête au-
dessus de la zone.
Exemple :
On va utiliser l'image (carte.jpg) suivante en tant qu'image mappée :
2011-2012 | Enseignantes : R.Ben Azzoun & S.Ben Guirat Page |3
ISET MEDENINDE | Programmation Web
On veut créer 3 zones chacune pointe vers une page html comme ceci :
<img src="carte.jpg" usemap="#division">
<map name="division">
<area shape="circle" coords="115,101,20" href="amérique.html"></area>
<area shape="rect" coords="258,51,368,120" href="europe.html"></area>
<area shape="poly" coords="298,178, 269,143, 320,143,351,176, 320,214, 269,214,
239,176" href="afrique.html"> </area>
</map>
III. Insertion du son et vidéo
Pour insérer du son, du vidéo ou d’animations flash dans une page web, il suffit d’utiliser
l’une de ces deux balises :<embed> ou <object>.
Ces deux balises sont très riches en attributs, et à utilisation multiple puisqu'elles permettent
d'insérer tout types d'objet (texte, image, son, vidéo, document PDF, etc.).
Dans la suite, on va donner juste le nécessaire pour une insertion simple et correcte du son,
vidéo ou animation flash.
1. La balise <embed> </embed>
<embed src="…" height="…" width="…" align="…" hspace="…" vspace="…"
alt="…" autostart="…" loop="… " hidden="…" > </embed>
src: chemin complet de l'objet à insérer
height: hauteur
width: largeur
align: alignement
hspace : Espacement horizontal entre les côtés de l'objet et le reste du contenu dans la
page.
vspace: Espacement vertical entre les côtés de l'objet et le reste du contenu dans la
page.
alt: texte de remplacement à afficher
autostart: pour la valeur true le fichier sera joué automatiquement, pour la valeur false
l'utilisateur doit cliquer sur le bouton de lecture pour jouer le média.
2011-2012 | Enseignantes : R.Ben Azzoun & S.Ben Guirat Page |4
ISET MEDENINDE | Programmation Web
(autostart peut être remplacé par autoplay, ça dépend du plugin mis en jeu, exemple
pour Media Player et Real Player c'est autostart alors que pour Quicktime c'est autoplay.
En pratique on peut écrire les deux successivement dans la balise pour que cette valeur
soit tenue en compte quelque sois le plugin utilisé).
loop: pour la valeur true, le media sera rejoué automatiquement, pour une valeur égale
à un entier (1, 2, 3,….) le media sera rejoué exactement ce nombre de fois. (pour la
valeur false ne sera pas joué)
hidden: pour la valeur true l'objet sera invisible, pour la valeur false l'objet sera
visible.
Exemple:
<embed src="site/fondsonore.mp3" autostart="true" autoplay="true" loop="true"
hidden="true" alt="musique"></embed>
2. La balise <object> </object>
<OBJECT type="…" height="…" width="…" align="…"
hspace="…" vspace="…" standby="…" >
<PARAM name="SRC" VALUE="le chemin complet du fichier">
<PARAM name="AUTOSTART" VALUE="true ou false">
<PARAM name="LOOP" VALUE="true ou false ou entier(1,2,3…)">
</OBJECT>
type : définit le type de l'objet inséré .On cite ici quelques types utiles pour cette partie:
audio/mpeg : pour les fichiers mp3 ou autres MPEG (.mp2, .mp3…)
audio/mp3: pour le mp3
audio/x-ms-wma:pour les fichiers Windows Media Audio (.wma)
audio/vnd.rn-realaudio : pour les fichiers RealAudio (.ra, .rm …)
audio/x-wav : pour les fichiers WAV (.wav)
video/mp4:(.mp4)
video/mpeg: (.mpeg, .mpg, .mpe)
video/quicktime : vidéo QuickTime (.qt, .mov)
video/msvideo: Microsoft Windows videos (.avi)
video/x-ms-wmv :Windows Media Video (.wmv)
video/x-flv : Flash Video (.flv)
application/x-shockwave-flash : pour les fichiers Adobe Flash (.swf)
2011-2012 | Enseignantes : R.Ben Azzoun & S.Ben Guirat Page |5
ISET MEDENINDE | Programmation Web
standby : message affiché au cours du chargement de l'objet.
pour height, width, align, hspace et vspace c'est comme en <embed>
pour src, autostart et loop c'est aussi comme en <embed> sauf que cette fois on utilise
<param name="…" value="…">
Exemple:
<OBJECT type=" video/msvideo" height="200" width="300" standby="voici mon
video">
<PARAM name="SRC" VALUE="monsite/video/sec1.avi">
<PARAM name="AUTOSTART" VALUE="false">
<PARAM name="LOOP" VALUE="false">
</OBJECT>
2011-2012 | Enseignantes : R.Ben Azzoun & S.Ben Guirat Page |6
