-=I greg-seth I=-

	Home
	Les Autres Sites
	Apprendre le HTML
	L'Aguzou
	L'Islande
	Environs de Paris
	Paroles de chansons
	Goodies
	Liens
	Forum de discussion

Les Images et le Multimedia

Les images

Tout ce que nous venons de voir, est très bien pour la mise en page, mais c'est pas très "design". Pour cela on peut ajouter des images en utilisant la balise <img>.

<img>

src=	"URL"	URL de l'image.
alt=		Bulle d'aide affichée quand la souris reste au-dessus de l'image.
align=	"left" "center" "right" "top" "middle" "bottom"	Alignement à gauche, centré, à droite, au milieu verticalement, en haut ou en bas.
width=		Largeur de l'image. Par défaut l'mage n'est pas redimensionnée.
height=		Hauteur de l'image.
border=		Bordure de l'image. Les images définies en tant que liens ont par défaut une bordure de 2px. Donner la valeur "0" pour l'enlever.
hspace=		Marge horizontale de l'image.
vspace=		Marge verticale de l'image.
usemap=		Utilistation d'une zone cliquable. (voir-ci après)

Les images peuvent bien sûr servir de liens, il suffit d'imbriquer les balises :

1.	<a href="page.htm">
2.	<img src="mon_image.gif" border="0" />
3.	</a>

Vous remarquerez que la balise <img>, comme d'autres, ne possède pas de balise de fermeture du type </img>. Dans ce cas le W3C (World Wide Web Consortium) recommande, selon la réglementation XHTML d'ajouter un slash précédé d'un espace en fin de balise.

On peut aussi créer des zones cliquables sur une grande image. (Par exemple une carte du monde, en cliquant sur un pays on obtient des infos le concernant...). Plusieurs zones sont définies dans des balises <area> toutes comprises entre la balise <map> .

<area>

shape=	"rect" "circle" "polygon" "point"	Forme de la zone à cliquer.
coords=	rect : "xl, yl, xr, yr" circle : "x, y, rayon" polygon : "x, y, x2, y2, x3, y3, ..." point : "x, y"	Coordonnées de la zone.
alt=		Bulle d'aide affichée quand la souris reste au-dessus de l'image.
href=	"URL"	Lien vers le fichier à afficher.

Dans l'exemple qui suit il sera fabriqué deux zones cliquables sur une image de 400 par 400px. La première, rectangulaire, aura son coin supérieur gauche à 5px du haut et 5px de la gauche de l'image et son coin inférieur droit à 100px du haut et 50px de la gauche. La deuxième, en forme de poly gone, aura les angles de coodonnées 65,5 ; 120,40 ; 250,10 ; 350,350 ; 65,350.

1.	<map name="clickzone">
2.	<area shape="rect" href="page1.htm" coords="5, 5, 50, 100">
3.	<area shape="polygon" href="page2.htm"
4.	coords="65, 5, 120, 40, 250, 10, 350, 350, 65, 350">
5.	</map>
6.
7.	<img src="imageacliquer.jpg" usemap="clickzone">

Points importants : la balise <map> comporte un attribut name pour ensuite pouvoir plaquer les différentes zones sur l'image. De plus, ici, le code de la deuxième zone cliquable tient sur deux lignes. Ça n'a absolument aucune importance : je l'ai fait pour cause de restriction de place mais le code fonctionnerait tout aussi bien sur une seule ligne ou sur trois. J'en profite pour préciser que les indentations (espaces ou tabulations en début de ligne) ne changent pas non plus le code, ça le rend simplement plus lisible.

Les objets multimedia

<embed>

La balise <embed> comporte de nombreux paramètres qui varient selon les plug-in utilisés pour visualiser les objets multimedias insérés dans les pages. Parmi eurx on peut retrouver certains classiques comme name, src, width, height. Les paramètres étant très nombreux l'utilisation de cette balise est déconseillée par le W3C qui lui préfère la balise <object> associée à la balise <param> qui sont plus évolutives.

Voici les différents attributs de la balise <object>, les paramètres du plugin se définissent grêce aux attributs name et value de la balise <param>.

name=		Nom de l'objet.
align=	"left" "center" "right" "top" "middle" "bottom"	Alignement à gauche, centré, à droite, au milieu verticalement, en haut ou en bas.
width=		Largeur de l'image. Par défaut l'mage n'est pas redimensionnée.
height=		Hauteur de l'image.
border=		Bordure. Donner la valeur "0" pour l'enlever.
hspace=		Marge horizontale.
vspace=		Marge verticale.
usemap=		Utilistation d'une zone cliquable.
classid=		ID de la classe ou position de la classe.
codebase=		Adresse de base du plugin.
standby=		Texte affiché pendant le chargement de l'objet.

Dans cet exemple c'est une animation flash qui va être affichée. Les deux balises vues précédemment seront utilisées pour respecter une compatibilité nouveaux / anciens navigarteurs. Il est à remarquer que les balises <object> et <embed> sont imbriquées.

1.	<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
2.	codebase="http://active.macromedia.com/flash4/cabs/swflash.cab#version=4,0,0,0"
3.	width="400" height="250">
4.	<param name="src" value="animation.swf">
5.	<param name="bgcolor" value="000000">
6.	<param name="loop" value="yes">
7.	...
8.	<embed src="animation.swf" width="400" height="250"
9.	plugispage="http://active.macromedia.com/flash4/cabs/swflash.cab#version=4,0,0,0"
10.	bgcolor="000000" loop="yes" ...>
11.	</object>

Suite de la leçon.