L'utilisation des images

L'insertion des images

La plupart des navigateurs reconnaissent les images sauvegardées en format GIF ou JPEG. Une image prend un certain temps pour être traitée et l'affichage initial d'un document est ralenti. Vous ne devriez pas inclure trop de grandes images, spécialement si vos pages sont destinées à des personnes qui n'ont pas un accès rapide dans Internet.

Pour inclure une image dans un document W3, vous devez utiliser un marqueur d'images, <IMG SRC=addresse de l'image>, où <IMG SRC=adresse de l'image> est l'adresse et le nom du fichier d'une image donnée. Si le fichier d'une image est un fichier GIF, assurez-vous que votre <IMG SRC=addresse de l'image> se termine par .gif. (En exemple, je pourrais avoir une image GIF de moi nommé carvin.gif). De même, les images en format JPEG doivent se terminer par .jpg.

Commençons par une image nommée home.gif:

Pour montrer cette image, j'utilise le marqueur d'images
<IMG SRC="home.gif">.

Très facile. Mais disons que je veux accompager cette image du texte suivant:

Récemment, j'ai trouvé une petite image sur laquelle était inscrit "home room". Je l'aimais beaucoup. Je l'ai apportée chez moi et je l'ai transférée dans mon ordinateur. J'en prenais bien soin. Tout allait bien jusqu'au jour où l'auteur de la petite image bien aimée la vit par hasard et me poursuivit pour violation de droit d'auteur. La fin.

Une bien triste histoire. Et pour la rendre plus triste encore, je souhaiterais vous montrer ce très joli graphique que j'ai rapporté à la maison un jour. Plaçons le marqueur <IMG SRC="home.gif"> immédiatement avant le texte:

<IMG SRC="home.gif"> Récemment, j'ai trouvé une petite image sur laquelle était inscrit "home room". Je l'aimais beaucoup. Je l'ai apportée chez moi et je l'ai transférée dans mon ordinateur. J'en prenais bien soin. Tout allait bien jusqu'au jour où l'auteur de la petite image bien aimée la vit par hasard et me poursuivit pour violation de droit d'auteur. La fin.

Et voici ce que mon navigateur me fit voir:

Récemment, j'ai trouvé une petite image sur laquelle était inscrit "home room". Je l'aimais beaucoup. Je l'ai apportée chez moi et je l'ai transférée dans mon ordinateur. J'en prenais bien soin. Tout allait bien jusqu'au jour où l'auteur de la petite image bien aimée la vit par hasard et me poursuivit pour violation de droit d'auteur. La fin.

L'apparence serait grandement améliorée si l'image était insérée dans le texte. Il s'agit alors d'ajouter le marqueur d'alignement. En exemple, <IMG ALIGN=LEFT SRC="home.gif"> nous permet d'aligner un graphique ou une image à gauche du texte, simplement en insérant ALIGN=LEFT entre IMG et SRC. L'image graphique du bouton s'insérerait dans le texte, comme ceci:

Récemment, j'ai trouvé une petite image sur laquelle était inscrit "home room". Je l'aimais beaucoup. Je l'ai apportée chez moi et je l'ai transférée dans mon ordinateur. J'en prenais bien soin. Tout allait bien jusqu'au jour où l'auteur de la petite image bien aimée la vit par hasard et me poursuivit pour violation de droit d'auteur. La fin.

Si je change le marqueur ALIGN=LEFT par ALIGN=RIGHT, le graphique est déplacé vers la droite du texte:

Récemment, j'ai trouvé une petite image sur laquelle était inscrit "home room". Je l'aimais beaucoup. Je l'ai apportée chez moi et je l'ai transférée dans mon ordinateur. J'en prenais bien soin. Tout allait bien jusqu'au jour où l'auteur de la petite image bien aimée la vit par hasard et me poursuivit pour violation de droit d'auteur. La fin.

Un texte alternatif pour les navigateurs qui n'affichent pas les images

Certains navigateurs, dont Lynx, n'affichent pas les images. Le marqueur alternatif de texte, ALT, vous permet d'afficher un texte là où une image ne peut apparaître. En exemple:

<IMG SRC="home.gif" ALT="Home Room">

Si j'utilise Netscape ou un autre navigateur graphique, le marqueur d'image affiche l'image comme d'habitude:

Mais, si j'utilisais Lynx ou si j'annulais la fonction d'affichage d'image d'un navigateur graphique, je verrais les mots Home Room qui se substitueraient à l'image. J'aurais au moins une petite description de l'image.

L'utilisation des images comme lien hypertexte

Les concepteurs expérimentés aiment utiliser des images comme pointeurs. C'est très facile. Commencez simplement par le marqueur de lien hypertexte habituel. Ensuite, ajoutez le marqueur d'image et une image au lieu du texte habituel.
Ici, le pointeur est une image. Vérifiez-le en cliquant sur l'image:

Le lien hypertexte qui affiche ce pointeur s'écrit ainsi:
<A HREF="http://k12.cnidr.org:90
/resource.cntnts.html"><IMG SRC="home.gif"
ALT="Home Room"></A>

(N.D.T. Remarquez que j'ai dû ajouter l'adresse k12.cnidr.org:90 de la page de Andy Carvin consacrée aux ressources éducatives sur le W3, le fichier de cette page n'étant pas sur mon serveur local.)

J'ai d'abord créé un lien hypertexte habituel,
<A HREF="http://k12.cnidr.org:90
/resource.cntnts.html"></A> vers ma page dont le fichier est nommé "resource.cntnts.html" . J'ai pris soin d'ajouter ensuite <IMG SRC="home.gif"> exactement à l'endroit où normalement je place un court texte, comme ceci:
<A HREF="http://k12.cnidr.org:90
/resource.cntnts.html">
<IMG SRC="home.gif"</A>

Si vous le désirez, vous pouvez ajouter un lien alternatif pour Lynx et les autres navigateurs non graphiques, comme ci-dessous:

<A HREF="http://k12.cnidr.org:90
/resource.cntnts.html"><IMG SRC="home.gif" ALT="Home Room"></A>

Un dernier astuce: Comme vous pouvez le constater ci-dessus, une bordure bleue entoure l'image qui sert de pointeur. Si vous ne désirez pas de bordure, vous pouvez utiliser un marqueur de bordure, ou BORDER=X. Lorsque vous utilisez ce marqueur, remplacez la lettre X par un chiffre indiquant l'épaisseur de la bordure. Si vous n'en voulez pas, ajoutez BORDER=0 à l'intérieur de votre lien, comme ceci:

<A HREF="http://k12.cnidr.org:90
/resource.cntnts.html">
<IMG BORDER=0 SRC="home.gif"</A>

C'est encore un pointeur mais la bordure n'y est plus. Vous pouvez l'essayer.

Vous pouvez obtenir une bordure plus épaisse avec BORDER=20. Voyez le résultat:

Mais à moins de vouloir ajouter une telle bordure autour d'une image scannée de Nuit étoilée de Van Gogh, vous ne ferez pas ça. Mais tous les goûts sont dans la nature...

Quiz interactif

Vous pensez être prêt à devenir un spectaculaire producteur de documents multimédia? Vous le saurez en vérifiant votre capacité grâce au quiz interactif suivant sur l'hypertexte.

Quand vous l'aurez terminé, passez à la page suivante ou revoyez la présente leçon.

---