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:
On utilise le marqueur <IMG> pour inclure une image, il ne crée pas de retour à la ligne.
Ses trois principaux attributs sont:
Ainsi pour insérer une image, il faudra saisir un marqueur du genre:
<IMG SRC="url/image.gif ou url/image.jpg" ALT="Texte remplaçant l'image">
Attribut | Valeur | Résultat | Effet |
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> |
||
HSPACE | Nombre de pixels d'ajustement entre l'image et le texte adjacent |
||
VSPACE | Nombre de pixels d'ajustement entre l'image et le texte au-dessus |
||
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 soit chargée |
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:
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>.
Marqueur | Attributs | Valeurs | Effet |
<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: Polygone (ses coordonnées sont: |
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 |
<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>