Images (2/4)

Dimensionnement d'une image

Vous pouvez redimensionner ou encadrer les images à afficher en renseignant les attributs HEIGHT, WIDTH et BORDER du marqueur <IMG>
<IMG SRC="mon_image.jpg" HEIGHT="hauteur" WIDTH="largeur" BORDER="cadre">

Description des attributs :

HEIGHT hauteur : valeur de l'hauteur de l'image en pixels ou en % de l'hauteur de l'écran.
WIDTH largeur : valeur de la largeur de l'image en pixels ou en % de la largeur de l'écran.
BORDER cadre : valeur de l'épaisseur du cadre en pixels.

Exemple :

<HTML>
<HEAD>
<TITLE>Voici mon image préférée</TITLE>
</HEAD>
<BODY>
Voici mon image préférée taille normale
<IMG SRC="../../images/tech_how_to.gif" alt="[Ceci est mon image préférée]">
Voici mon image préférée grossie et encadrée
<IMG SRC="../../images/tech_how_to.gif" alt="[Ceci est mon image préférée]" border="8" width="300">
</BODY>
</HTML>

Alignement de l'image dans une ligne de texte

Vous avez vu que vous pouvez insérer une image dans une zone de texte, mais jusqu'à présent vous avez pu aussi remarquer que la mise en page n'était pas concluante, comme dans l'exemple ci-dessous :

Pour améliorer la mise en forme, vous pouvez rensigner l'attribut ALIGN du marqueur <IMG> :

Valeur de l'attribut ALIGN	Descriptif
BOTTOM (par défaut)	Aligne le bas de l'image avec le bas du texte.
TOP	Aligne le haut de l'image avec le haut de l'objet le plus haut de la ligne.
MIDDLE	Aligne le milieu de l'image avec le bas du texte.
BASELINE	Identique à BOTTOM.
TEXTTOP	Aligne le haut de l'image avec la partie la plus haute du texte.
ABSBOTTOM	Aligne le bas de l'image avec le bas de l'objet le plus bas de la ligne.
ABSMIDDLE	Aligne le milieu de l'image avec le milieu de l'objet le plus grand de la ligne.

Pour plus de clareté, voici les résultats obtenus :

Résultat avec BOTTOM
Résultat avec TOP
Résultat avec MIDDLE

Alignement du texte autour d'une image

Il est souvent plus intéressant d'entourer l'image par du texte, pour que la page soit plus lisible. Pour cela, il suffit d'aligner l'image à un endroit particulier de la page.

La ligne de commande sera donc de la forme :
<IMG SRC="mon_image.jpg" ALIGN="alignement_horizontal" VALIGN="alignement_vertical">
N.B.: Si vous souhaitez garder l'alignement horizontal par défaut, utilisez l'attribut ALIGN pour décrire l'alignement vertical (cf. paragraphe précédent). Vous ne placer donc l'attribut VALIGN dans le marqueur <IMG> que si ce marqueur possède déjà un attribut ALIGN.

Nous avons vu dans le paragraphe précédent les valeurs possibles pur l'alignement vertical. Les valeurs possibles pour alignement_horizontal sont les suivantes :

Valeur de alignement_horizontal	Descriptif
LEFT	L'image est placée sur la gauche de l'écran, et le texte est placé à droite de l'image (sur plusieurs lignes si nécessaire).
RIGHT	L'image est placée à la droite de l'écran, et le texte est placé sur la gauche de l'image (sur plusieurs lignes si nécessaire).
CENTER	L'image est centrée dans la fenêtre, et le texte est positionné sous l'image.

Pour arrêter l'alignement du texte à gauche ou à droite de l'image, il suffit taper la ligne de commande suivante :
 
Comme précédemment, alignement_horizontal peut prendre les valeurs LEFT ou RIGHT (pour arrêter respectivement l'alignement du texte autour d'une image positionnée à gauche ou à droite de l'écran). Mais il peut prendre aussi la valeur ALL, si les deux marges de la page sont occupées.

Le marqueur <IMG> possède deux paramètres supplémentaires :
VSPACE Définit l'espace vertical en pixels entre l'image et le texte
HSPACE Définit l'espace horizontal en pixels entre l'image et le texte

Exemple :

<HTML>
<HEAD>
<TITLE>Voici mon image préférée</TITLE>
</HEAD>
<BODY>

<IMG SRC="../../images/tech_how_to.gif" alt="[Ceci est mon image préférée]" border="8" width="300">Dans cet exemple, le texte n'entoure pas l'image. Dans cet exemple, le texte n'entoure pas l'image. Dans cet exemple, le texte n'entoure pas l'image. Dans cet exemple, le texte n'entoure pas l'image. Dans cet exemple, le texte n'entoure pas l'image. 

<IMG SRC="../../images/tech_how_to.gif" alt="[Ceci est mon image préférée]" border="8" width="100" align="left">
<IMG SRC="../../images/tech_how_to.gif" alt="[Ceci est mon image préférée]" border="8" width="100" align="right"> Dans cet exemple, le texte entoure l'image. Dans cet exemple, le texte entoure l'image. Dans cet exemple, le texte entoure l'image. Dans cet exemple, le texte entoure l'image. Dans cet exemple, le texte entoure l'image. Dans cet exemple, le texte entoure l'image. Dans cet exemple, le texte entoure l'image.Dans cet exemple, le texte entoure l'image. Dans cet exemple, le texte entoure l'image. Dans cet exemple, le texte entoure l'image.
</BODY>
</HTML>

Page d'accueil
Plan du site

Rubriques :

Documentations :

HTML

DHTML

JAVAScripts

WML (WAP)

Liens utiles :

Hébergement

Référencement

Web rémunéré