|
|
langage html
LES IMAGES
Comment
afficher des images sur une page web?
Quelques
images sur votre site Web le rendront plus attractif. Cependant il ne faut pas
sombrer dans l'excès car les images impliquent un temps de chargement
assez long.
Les
images peuvent être sur le même ordinateur que la page ou bien ailleurs
sur un autre site (il faudra veiller à ce que l'image soit alors accessible).
Il
y a grossièrement deux formats d'images que vous pouvez inclure dans
votre page:
- Les
images JPEG (.JPG): les images ayant un grand nombre de couleurs seront bien
compressées, c'est-à-dire qu'elles prendront moins de place, donc nécessiteront
un temps de chargement moindre)
- Les
images GIF: Leur taille est faible dans le cas d'images avec peu de couleurs,
ce format permet en outre d'avoir des images entrelacées (qui s'affichent
progressivement) et des images dont on définit une couleur comme transparente
On
utilise la balise <IMG> pour inclure une image, il ne crée pas
de retour à la ligne. Ses trois principaux attributs sont:
- SRC:
Indique l'emplacement de l'image (il est obligatoire)
- ALIGN:
Spécifie l'alignement de l'image par rapport au texte adjacent. Il
peut prendre les valeurs: TOP, MIDDLE, et BOTTOM (au-dessus, au milieu et
en-dessous)
- ALT:Permet
d'afficher un texte lorsque l'image ne s'affiche pas
Ainsi
pour insérer une image, il faudra saisir une balise du type suivant :
<IMG SRC="url/image.gif|url/image.jpg" ALT="Texte remplaçant l'image">
Remarque : Sous Netscape 6, l'attribut ALT de la balise IMG ne fonctionne plus. Pour y remédier il est possible d'utiliser l'attribut "TITLE", fonctionnant aussi bien sous Internet Explorer que sous Netscape.
| Attribut |
Valeur |
Résultat |
Effet Visuel |
| SRC |
|
Adresse de l'image |
|
| BORDER=n |
|
Nombre de pixels de la bordure. Sa couleur se définit dans l'attribut
LINK ou TEXT de la balise <BODY>. Par défaut l'attribut Border
vaut 1 ce qui crée un petit cadre autour de l'image. Pour ne pas
avoir ce désagrément pensez à le définir comme étant
égal à 0. |
 |
| HSPACE |
|
Nombre de pixels d'ajustement entre l'image et le texte adjacent |
 Texte |
| VSPACE |
|
Nombre de pixels d'ajustement entre l'image et le texte au-dessus |
Essai de texte |
| WIDTH |
|
Taille horizontale (en pixels ou en %). |
 |
| HEIGHT |
|
Taille verticale (en pixels ou en %). |
 |
| LOWSRC |
URL |
Image alternative (plus petite), affichée le temps que la vraie image
soit chargée par le navigateur du client. |
 |
Texte
enveloppant une image
Les
images s'insèrent dans le texte comme un caractère, ainsi il semble
impossible de faire s'écouler du texte le long d'une image.
Il
existe en fait plusieurs façons, nous allons en voir deux:
- La
première consiste à créer un tableau avec une ligne et
deux colonnes, dans lesquelles on met l'image et le texte.
- La
seconde (moins précise) consiste à aligner l'image à
gauche ou à droite avec l'attribut ALIGN puis de taper son texte. Il
suffit, pour arrêter cet enveloppement de mettre l'attribut CLEAR.
Les
images réactives ("images MAP")
On
peut créer à l'intérieur même d'une image des zones
cliquables. Cela est possible grâce à l'attribut USEMAP utilisé
conjointement avec la balise <MAP> ... </MAP>. L'attribut USEMAP
de la balise <IMG> pointe vers la balise <MAP> contenant le découpage.
La
balise <MAP> a pour attribut le nom qu'on lui donne (NAME="nom") et contient
les zones cliquables déclarées par les balises <AREA> ...
</AREA>.
| Balise |
Attribut |
Valeur |
Effet Visuel |
| <MAP> ... </MAP> |
NAME |
|
|
| <AREA> |
SHAPE |
RECT
CIRCLE
POLY
|
Rectangle (ses coordonnées sont: "abscisse sup gauche, ordonnée
sup gauche, abscisse inf droit, ordonnée inf droit")
Cercle (ses coordonnées sont: "abscisse centre,
ordonnée centre, rayon")
Polygone (ses coordonnées sont: "la suite
des coordonnées séparées par des virgules")
|
| HREF="url" |
|
Lien vers l'URL |
| COORDS= "XX,XX,XX,XX" |
|
Contient les coordonnées de la zone cliquable entre guillemets
et séparées par des virgules |
Voici
ci-dessous un exemple d'image réactive :
<IMG SRC="images/image.gif" WIDTH=150 HEIGHT=70
USEMAP="#Map">
<MAP NAME="Map">
<AREA SHAPE="rect"
HREF="debut.html"
COORDS="0,0,48,28">
<AREA SHAPE="circle"
HREF="precedent.html"
COORDS="50,30,10">
<AREA SHAPE="poly"
HREF="suivant.html"
COORDS="60,50,80,30,100,40,50,100">
</MAP>
page suivante : les images d'arrière-plan
|
