LES IMAGES

Les 3 formats d'images reconnus par le web sont le format :

ð JPEG (Joint Photographic Expert Group) ou JPG (photographies)
ð GIF (Graphics Interchange Format) Logos, dessins, images
ð PNG (Portable Network Graphic)

A) La balise img
Elle permet d'insérer une image dans une page HTML. Pas de balise de
fermeture. C'est une balise vide
Syntaxe :
<img src=adresse_de_l'image ./>
l'attribut src (attribut obligatoire) permettant de donner l'adresse ou le chemin
d'accès de l'image à insérer dans une page HTML.
Il existe d'autres attributs optionnels que l'on peut combiner
name : nom de l'image (nécessaire pour le javascript)
width : largeur en pixels ou en pourcentage de l'image
height : hauteur en pixels ou en pourcentage de l'image
border : bordure en pixels (par défaut 2 pixels lors d'un lien, sinon 0)
alt (attribut obligatoire) : commentaire placé dans le cadre en attendant son
chargement (ou si l'image n'existe plus)
title : permet d'afficher une info-bulle lorsqu'on survole l'image
usemap : permet d'indiquer au navigateur que l'image contient des zones
réactives
vspace : permet de définir un espace (en pixel) entre le texte et le bord vertical
de l'image²
hspace : permet de définir un espace (en pixel) entre le texte et le bord horizontal
de l'image
Exemple :

<img src="../images/chouette.jpg"

<img src="../images/chouette.jpg" vspace="30"

 <img src="../images/chouette.jpg" hspace="30"

On peut cumuler les attributs vspace et hspace

align : alignement du texte par rapport à l'image :
- left : alignée à gauche,
- right : alignée à droite,
- top : alignée en haut,
- middle : alignée au milieu,
- bottom : alignée en bas
Exemples :

<img src="../images/chouette.jpg align="bottom"> La chouette

<img src="../images/chouette.jpg align="top"> La chouette

<img src="../images/chouette.jpg" align="middle"> La chouette

La chouette <img src="../images/chouette.jpg" align="left">

La chouette

La chouette <img src="../images/chouette.jpg" align="right">

Remarque : si on veut :
- garder les proportions de l'image, il suffit de renseigner l'attribut
height ou l'attribut width
- déformer l'image, il faut renseigner les 2 attributs height et width
B) Prévisualisation
Si vous voulez afficher une image particulièrement volumineuse qui, par
conséquent, va mettre beaucoup de temps à s'afficher, il est possible de spécifier
en valeur à l'attribut lowsrc une autre images (en fait la même mais un fichier
différent) beaucoup plus légère car compressé ou avec énormément moins de
couleurs.

Exemple :

<img src="veranda.jpg" width="200" height="150" lowsrc="verandamini.gif"

alt="Ma belle vérenda!">

Dans cet exemple, vous avez une image JPEG de 200 Ko à afficher mais comme
vous savez que cela prendra longtemps à afficher : vous spécifiez une autre
image de 15 Ko (en 32 couleurs) à afficher en attendant que l'originale soit
totalement chargée.

Différentes méthodes pour limiter la taille d'une image :

• diminuer la taille de l'image

• diminuer le nombre de couleurs
• augmenter la compression (JPEG)

Ici, l'image de prévisualisation peut être de taille différente de l'originale, être d'un
autre format, etc...

Remarques

• Il vous est tout à fait possible de combiner les zones circulaires,

rectangulaires et polygonales au sein d'une seule et même carte.
• Vous pouvez mettre autant de zone que vous voulez dans une carte.

Les adresses destinations comme celles des images ne doivent pas contenir
d'antislash (\) mais seulement des slash (/).