Untitled Document

L' insertion d'images

Le type d'images admises sur internet :

Les images pouvant être affichées sur les pages web sont les images gif, jpg, bmp, et png. A noter que seul les gif et les jpeg assurent une compatibilité avec les vieux navigateurs. Quelques conseils pour choisir le format adapté : les images jpeg sont plus adaptées pour les photos (elles permettent l'affichage de beaucoup plus de couleurs que les gifs). Les gif sont mieux adaptées pour les dessins (elles sont beaucoup moins lourdes) de plus elles permettent l'affichage d'images animées.

La balise <img> et l'attribut src

En HTML, les images sont définies avec le tag <img>.
Ce tag est vide, ce qui signifie qu'il n'est pas fermé et qu'il contient uniquement des attributs.

Pour afficher une image sur une page, vous devez utiliser l'attribut src qui veut dire source.
La valeur de l'attribut src correspond à l'adresse (relative ou absolue) de l'image souhaitée.

L'image sera ainsi placée à l'endroit où vous insérez le tag.

1.- Voici une première image sans attribut particulier :

code source : <CENTER><IMG src="image.jpg"></CENTER>

2.- une image avec un bord de taille 3 :

code source : <CENTER><IMG src="image.jpg" border=3></CENTER>

3.- Modification de la taille de l'image :

code source : <CENTER><IMG src="image.jpg" border=0 width=120 height=120></CENTER>

4.-L'attribut alt :

Cet attribut est utilisé pour afficher un texte descriptif de l'image qui apparaît lors du survol de celle-ci.
La valeur de cet attribut est donc un texte que vous pouvez choisir librement.

cours html

code source : <CENTER><IMG src="image.jpg" border=0 width=120 height=120 alt="cours html"></CENTER>

5.- Insérer une image d'arrière plan dans vos pages (attribut background) :

Exemple :

<html>
<body background="background.jpg">
</body>
</html>

Nb : Vous pouvez utiliser des images au format GIF (.gif) ou JPG (.jpg).

Si l'image utilisée est plus petite que votre page, elle sera répétée pour couvrir entièrement le document.!!!

6.- L'alignement vertical des images dans les textes (attribut align)

Code source :

<html>
<body>
Une image <img src ="image.gif" align="bottom"> dans un texte
Pour aligner l'image verticalement : 
au centre <img src="image.gif" align="middle"> dans le texte

en haut <img src ="image.gif" align="top"> dans le texte

L'alignement vertical par défaut de l'image est en bas

Alignement par défaut <img src ="image.gif">

<img src ="image.gif"> Une image avant un texte

Une image après un texte <img src ="image.gif">

</body>
</html>

Resultat dans le navigateur :

7.- L'alignement horizontal des images dans les textes:

Code source :

Les alignements horizontaux d'une image dans un texte :
<img src ="image.gif" align ="left">
Si l'attribut align a pour valeur "left", l'image sera placée à gauche du texte.

<img src ="image.gif" align ="right">
Si l'attribut align a pour valeur "right", l'image sera placée à droite du texte.

</body>
</html>

Resultat dans le navigateur :

8.- hspace et vspace :

permettent de définir une marge autours des images.
Le paramètre align précise l'alignement vertical de l'image avec le texte qui l'entoure :

Code source :

<html>
<head>
<title>Titre de la page</title>
</head>
<body>
<img src="images/html.jpg" width="100" height="100" hspace="10" vspace="15" align="left">
Votre texte ici...
</body>
</html>

Resultat dans le navigateur :

hspace et vspace : permettent de définir une marge autours des images. Le paramètre align précise l'alignement vertical de l'image avec le texte qui l'entoure : "middle" indique que c'est le milieu de l'image qui sera aligné avec la base du texte "top" indique que le haut de l'image sera aligné avec la base du texte "bottom" indique que le bas de l'image sera aligné avec la base de la ligne du texte

9.- Faire un lien sur une image :

Cette image contient un lien 
<a href="centre.html">
<img border="0" src="images/html.jpg" width="100" height="100"></a>

</body>
</html>

Cette image contient un lien

10.- Les cartes cliquables :

On appelle "carte cliquable" une image dans laquelle sont définis des zones associées à des liens. Selon l'endroit où l'on clique sur la carte, un lien différent est activé.

Il existe théoriquement deux techniques pour construire une telle image. Dans la première, les coordonées du point sont envoyées au serveur qui renvoie au navigateur l'adresse du lien, celui-ci est alors activé. Cette technique est plus difficile à mettre en oeuvre que la suivante, et implique une requête supplémentaire (et donc une attente plus longue). De plus elle est devenue obsolète, et est incompatible avec la nécessité d'accessibilité des pages.

La seconde technique, qui permet de spécifier dans la page HTML elle même les différentes zones de la carte. Cette carte sera alors interprétée localement, c'est-à-dire que le logiciel de navigation déterminera lui-même, en fonction de la position du clic sur l'image, du lien à activer. Elle est plus rapide et n'empêche pas l'accessibilité du site.

La balise MAP :

Tout d'abord, il y a la balise <MAP>...</MAP>. Dans cette balise, il faut indiquer un nom dans l'attribut NAME. IL faut que ce soit le même que celui donné dans le USEMAP (dit au navigateur que l'image est mappée) de votre image.
Ensuite, il y a les balises <AREA>, une pour chaque zone sur votre image.
- l'attribut SHAPE
Il définit la forme de votre zone : rect (rectangle), circle (cercle), polygon (polygone irrégulier).
- l'attribut HREF
Il définit l'adresse vers laquelle va pointer votre zone.
- l'attribut COORDS
Il indique les coordonnées de la zone en pixels. Elles varient selon la forme géométrique que vous avez choisi.

pour le rectangle: COORDS="x1,y1,x2,y2"

pour le cercle: COORDS="x,y,r"

pour le polygone: COORDS="x1,y1,x2,y2,..."

-L'attribut ALT
Il est facultatif et permet d'afficher un commentaire quand la souris s'arrête au-dessus de la zone.

Le code Map peut être inséré n'importe où dans la page, mais le mieux est le mettre tout de suite derrière l'image.

Faites aussi attention de ne pas recouvrir un même endroit avec deux zones. Au mieux, il ne se passera rien ; au pire, il y aura un message d'erreur du navigateur.

Voici l'exemple :

code source :