La balise <IMG> a un attribut principal qui est SRC , qui spécifie l'emplacement d'une image.
Elle se présente sous la forme : <IMG SRC="emplacement de l'image"> .
L'emplacement de l'image doit être remplacé par le nom de l'image.
Prenons l'exemple pour une image que l'on va nommer :"image.gif" :
<IMG SRC="image.gif">
Mais le cas change si l'image est placée dans un autre répertoire que la page HTML. Imaginons que notre "image.gif" soit dans un répertoire nommé "bureau" :
<IMG SRC="bureau/image.gif">
Vous avez aussi la possibilité de prendre une image provenant d'un autre site, dans ce cas là il faudra alors mettre l'URL de l'emplacement de l'image.
Ce qui donnera :
<IMG SRC="http://www.editeurtml.fr.st/logos2.gif">
Exemple :
La taille d'une image
Pour changer les dimensions d'une image vous avez juste à insérer les attributs :
WIDTH : |
Donne la largeur d'une image, en pixels ou en pourcentage de la fenêtre du navigateur. |
HEIGHT : |
Donne la hauteur d'une image, en pixels ou en pourcentage de la fenêtre du navigateur. |
Exemple :
<IMG height="30" width="100" SRC="logos editeurhtml.gif">

Donner un nom à une image
Pour donner un nom à une image, il vous faut utiliser l'attribut ALT="nom de l'image".
Grâce à cette fonction vous pouvez avoir un aperçu de l'image si le navigateur ne l'a pas affiché.
Exemple :
<IMG SRC="logo4.gif" ALT="ados2001">

Note : pour voir le nom de l'image, mettez votre pointeur de souris sur celle-ci et attendez 1 seconde.
Positionner une image
Pour positionner une image dans un texte ou un tableau, il faut utiliser l'attribut ALIGN="..." .
Celui-ci possède d'autres attributs qui déterminent vraiment la position de l'image :
Les attributs sont :
- 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.
Voici quelques exemples :
<IMG SRC="logos editeurhtml.gif" ALIGN="RIGHT">
Dans ce cas le texte est à gauche.
<IMG SRC="logos.gif" ALIGN="LEFT">
Dans ce cas le texte est à droite.
Image dans un texte :
Exemple : ALIGN="TOP"
Regardez l'emplacement de l'image .
Exemple : ALIGN="MIDDLE"
Regardez l'emplacement de l'image .
Exemple : ALIGN="BOTTOM"
Regardez l'emplacement de l'image .
|