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 (/).
