En général, dans un site web, ce n'est pas l'image qui donne l'information (ou très rarement). C'est plutôt le texte.
Cependant, sans elles, les sites web seraient bien tristes... et bien plus rapides à charger !
C'est pourquoi on a adopté certains formats d'images qui prennent très peu de place (voir "Formats d'images").
Lorsque vous saurez quels formats d'image utiliser, vous pourrez insérer une image (c'est le but de ce chapitre !) mais après, vous pourrez la manipuler à souhait pour en faire un lien.
Je ne vous en dis pas plus...
A partir de maintenant, vous pouvez oublier le format bmp ! Certes, le web l'accepte, mais pas les internautes. Sa taille est vraiment énorme comparé aux formats du net.
Mais quels sont-ils, au fait ?
Les 2 formats les plus répandus du net sont (retenez-les bien) :
Quelles sont leurs particularités ?
Les gif
Le format gif accepte jusqu'à 256 couleurs seulement, mais c'est le plus utilisé, sauf pour des images nécessitant plus de couleurs (les photos par exemple).
Mais il a des qualités pour être répandu : on peut le rendre transparent (très pratique) ou même l'animer ! De plus, il n'apparaît pas ligne par ligne, mais couche par couche, ce qui veut dire qu'on a l'image tout de suite et que sa qualité s'améliore peu à peu.
Un exemple de gif non animé :
Un exemple de gif animé :
Les jpeg
Les jpeg sont des images utilisées pour les photos, car elles peuvent accepter jusqu'à 16,7 millions de couleurs. On ne peut cependant pas les animer et leur compression diminue nettement la qualité de l'image.
Exemple de jpeg :
Voilà, c'est tout. Pour animer vos gif, je vous conseille Microsoft Gif Animator (chez Microsoft), en anglais, mais très simple d'emploi.
Retournons à Bloc-notes...
Le tag qui vous permet d'insérer une image est le tag <img>. Ce tag ne doit pas être fermé : il n'y en a qu'un qui indique simplement qu'une image est affichée là.
Ajoutez maintenant l'attribut "src".
Précisez src par l'adresse de votre image. Souvenez-vous du chapitre sur les liens. Ici aussi, vous pouvez indiquer l'adresse en absolu ou en relatif (et je vous conseille fortement le relatif, sinon, il faudra que vous ou les internautes soyez connectés au moment du chargement de la page).
Cela donne :
<img src="Images/MonImage.gif">Rien de plus à dire pour afficher votre image !
Il existe d'autres attributs pour le tag <img>, mais facultatifs. Par exemple : "alt".
Précisez alt par le texte de votre choix. Celui-ci sera affiché dans les navigateurs ne lisant pas les images, ou alors lorsque l'on pointe sur l'image.
<img src="Images/MonImage.gif" alt="Ceci est une image que j'ai créée !">Vous pouvez aussi définir la hauteur et la largeur de l'image avec les attributs height et width.
<img src="Images/MonImage.gif" height="90" width="65">Vous pouvez encore donner la taille de la bordure entourant l'image (qui est de 0 par défaut) avec l'attribut border.
<img src="Images/MonImage.gif" border="8">Si vous souhaitez aligner votre image, utilisez comme vous l'avez vu, le tag <div>.
<div align="center"><img src="Images/MonImage.gif" alt="Une image centrée"></div>Enfin, 2 derniers attributs : hspace et vspace.
hspace détermine la distance en pixels entre l'image et le texte à côté.
vspace détermine la distance en pixels entre l'image et le texte au-dessus et en-dessous.
<img src="Images/MonImage.gif" hspace="50" vspace="26">
Image de fond
Comme pour une couleur de fond, c'est un attribut au tag <html> qu'il faut ajouter. Il s'agit ici de "background". Précisez background par l'adresse situant l'image de fond.
Essayez de créer une petite image, de sorte à ne pas voir la jonction entre chaque copie, puisque le navigateur va copier l'image autant de fois qu'il le faut pour remplir l'écran.
<body background="Fond.gif">
Que peut bien être une image cliquable ? Tout simple : une image qui fait office de lien, on clique dessus et on va sur une autre page.
Pour cela, vous auriez très bien pu le deviner, on prend le tag <a>, que l'on ferme après le tag <img> :
<a href="http://www.infonie.fr"><img src="Image.gif"></a>Mais le html peut mieux faire : il vous offre la possibilité de définir différents endroits de l'image comme liens. Vous pouvez avoir plusieurs liens dans une image ! Sur la photo d'un paysage, par exemple, le soleil amène au site d'un passionné de l'espace, la poubelle vers un site écolo, les animaux vers la WWF...
Commencez d'abord à mettre le tag <map>. Ajoutez-lui l'attribut name que vous préciserez par un petit mot de votre choix. Pensez à fermer le tag plus loin.
<map name="endroit"> </map>Tout ce que vous allez écrire à présent se trouvera entre ces 2 tags.
Ecrivez maintenant le tag <area> que vous ne devez pas fermer et que vous pourrez répéter autant de fois que vous le désirez. Il indique les parties de l'image qui vont servir de lien.
Vous devez ajouter 3 attributs à chaque tag <area> :
L'ordre ci-dessus est à respecter.
Shape définit la forme de la surface cliquable. Il peut avoir comme valeur :
| Valeur | Forme |
|---|---|
| shape="rect" | Un rectangle |
| shape="circle" | Un cercle |
| shape="polygon" | Un polygone quelconque |
En général on utilise un rectangle, ou si on veut être plus précis, un polygone quelconque. Plus rarement des cercles.
L'attribut coords dépendra de la valeur de shape.
shape="rect"
Entre guillements, comme d'habitude, vous indiquez :
coords="x1, y1, x2, y2"Remplacez x1, y2... par des valeurs en pixels sachant que :
<area shape="rect" coords="50, 80, 250, 290">
shape="circle"
Voici le schéma à suivre pour un cercle :
coords="x, y, r"Remplacez x, y et r par des nombres en pixels sachant que :
Exemple :
<area shape="circle" coords="130, 150, 60">
shape="polygon"
Avec un polygone, vous pouvez définir autant de coordonnées que vous le voulez. Respectez seulement le schéma suivant :
coords="x1, y1, x2, y2, x3, y3, ....etc"Vous devez définir 3 points minimum, cela fera un triangle.
Pour finir, ajoutez le troisième tag "href", qui donne l'adresse où amène la surface cliquable. Voilà ce que cela pourrait donner :
<map name="ClicImage"> <area shape="rect" coords="45, 26, 210, 168" href="site1.html"> <area shape="circle" coords="120, 154, 34" href="site2.html"> <area shape="polygon" coords="50, 66, 110, 102, 232, 231" href="site3.html"> </map>Ensuite, sortez des tags <map></map> et choisissez l'endroit où vous voulez insérer votre image cliquable. Ajoutez en plus l'attribut "usemap" au tag <img>, que vous précisez par l'attrbut "name" du tag <map>, précédé d'un # (#ClicImage, par exemple).
Voilà un exemple qui récapitule ce chapitre, un peu lourd, je l'avoue. Si vous voyez une indésirable bordure bleue autour de votre image, ajoutez l'attribut "border" et affectez-lui la valeur 0.
<body text="red"> <map name="ClicImage"> <area shape="rect" coords="65, 50, 75, 83" href="../couleur.html"> <area shape="circle" coords="40, 54, 20" href="../bases.html"> </map> <b> <div align="center"> <img src="../Images/Ballon.gif" alt="Une image !" vspace="20" hspace="20" usemap="#ClicImage" border="0"> </div> Pensez à regarder et à essayer de pointer la souris sur l'image pour faire fonctionner l'attribut alt, à cliquer sur l'image n'importe où...</b> </body>
Utilisez votre programme de dessin pour connaître les coordonnées des points que vous voulez taper.
Ouf ! C'est fini ! Enfin, juste pour les images... Pour le prochain chapitre, le sujet sera, ou plutôt seront, les puces. En bien plus court et bien plus simple, ne vous inquiétez pas.
