-
La balise
<IMG> et ses attributs
- La
balise <MAP> et ses attributs
La
balise <IMG> et ses attributs.
La balise <IMG> a de
nombreux attributs, le plus important est bien entendu SRC, il permet
de spécifier l'URL complète (chemin) du fichier.
ex:
<IMG SRC="nom de fichier">
nom de fichier doit
être remplacé par le nom de l'image et son extension
(ordi.gif). si votre fichier ordi.gif se trouve dans un autre
répertoire que vos pages, par exemple dans un répertoire
gif, cela donne :
ex:
<IMG SRC="gif/ordi.gif">
A noter que vous pouvez
charger une image sur un autre site (principe du compteur) il faut
pour cela l'adresse complète du serveur.
ex:
<IMG SRC="http://www.djhassan.fr.st/gif/logo.gif">
Attention: Pas de barre
oblique inverse \.
Précisez la
taille de l'image au navigateur.
En précisant la
taille de l'image au navigateur, celui ci charge plus rapidement
votre page, en effet il n'a pas à la recalculer, de plus si
jamais le visiteur a désactivé le chargement des images
la mise en page ne sera pas perturbée. Ces dimensions
correspondent à la taille en pixels de l'image. Ici l'image
fait 40 pixels de large sur 30 pixels de hauteur.
ex:
<IMG SRC="gif/ordi.gif" WIDTH=40 HEIGHT=30>
Vous pouvez agrandir ou
rétrécir votre image en jouant donc sur les attributs
WIDTH et HEIGHT mais attention le dessin ne sera pas chargé
plus rapidement si vous diminuez sa hauteur ou sa largeur (ou les
deux) bien au contraire.
Fournir un texte de rechange.
Il se fait avec l'attribut ALT.
Deux avantages:
- Si le visiteur
désactive le chargement des images, il pourra quand même
deviner le sens de l'image.
- Vous pouvez par ce biais
fournir une légende à une image lorsque le pointeur de
la souris passe au-dessus de cette image.
ex:
<IMG SRC="gif/ordi.gif" WIDTH=40 HEIGHT=30 ALT="Mon ordinateur">
Entourer l'image.
Avec l'attribut BORDER vous
pouvez entourer l'image d'une bordure. L'attribut BORDER prend une
valeur de 1 à x qui exprime la largeur de cette bordure
entourant l'image.
ex:
<IMG SRC="gif/ordi.gif" BORDER=1 ALT="Mon ordinateur">
Espacer l'image.
Avec les attributs HSPACE=n
VSPACE=n (n étant un nombre en pixels) vous pouvez fixer un
espace vertical et horizontal autour de votre image.
ex:
<IMG SRC="gif/ordi.gif" HSPACE=2 VSPACE=2>
Positionner et aligner
une image.
Par défaut l'image
est placée sur une ligne et, le texte s'il est présent
est aligné sur le bas de l'image. Si vous voulez encadrer une
image avec du texte (style journal) l'attribut ALIGN est requis elle
a 9 attributs:
-
LEFT: Texte à gauche.
- RIGHT: Texte à droite.
- MIDDLE: Texte au milieu.
- ABSBOTTOM: Texte en bas (absolu).
- ABSMIDDLE: Texte au
milieu (absolu).
- BASELINE: Sur la ligne
du texte.
- BOTTOM: Texte en bas.
- TEXTTOP: Texte en haut.
- TOP: En haut.
ex:
<IMG SRC="gif/ordi.gif" ALIGN=RIGHT>
Prévisualisation
des images.
A l'aide de l'attribut
LOWSRC vous pouvez accélérer l'affichage de vos pages,
en effet le navigateur affichera en premier lieu ce qu'il trouve dans
la balise LOWSRC. Généralement l'image contenue dans
l'attribut LOWSRC doit être en basse résolution ou
compressée. L'utilisation de cet attribut est surtout
intéressant pour des images supérieures à 20 Ko.
Précisez également les dimensions de l'image.
Attention cette balise est
spécifique à Netscape.
ex:
<IMG SRC="gif/ordi.gif" WIDTH=40 HEIGHT=30
LOWSRC="gif/ordireduit.gif" >
[TOP]
La
balise <MAP> et ses attributs.
La balise permet de
créer une image réactive (côté client) en
HTML. L'image réactive est utilisée
généralement pour définir plusieurs liens
(interne ou externe) sur une même image, elle est souvent
utilisée pour des banderoles. La balise <MAP> doit
être utilisée avec la balise <AREA>. La balise
<AREA> possède trois attributs :
Exemple d'une image
réactive composée d'un rectangle (zone1) et d'un cercle
(zone2). La zone1 revient au début de la page et la zone 2
revient au titre "La balise <MAP> et ses attributs".
Voici le code de l'exemple
ci dessus.
Note : on remarquera
que l'attribut NAME (à l'intérieur de la balise MAP) et
que l'attribut USEMAP (à l'intérieur de la balise IMG)
ont le même nom, ceci afin de les relier (obligatoire).
<MAP NAME="TESTMAP>
<AREA
SHAPE="RECT" COORDS="5,5,90,40" HREF="#top">
<AREA
SHAPE="CIRCLE" COORDS="139,23,20" HREF="#map">
</MAP>
<IMG
SRC="gif/area.gif" BORDER=0 WIDTH=191 HEIGHT=45
USEMAP="#TESTMAP" ALT="Exemple balise MAP">
[TOP] |