Les images en HTML

Page associée : les liens




Les images sont très utiles à un site web pour être plus fun, plus dynamique, plus attrayant, mais attention à ne pas le rendre pour autant trop lourd au chargement, ou impossible à lire à cause de la lourdeur de l'affichage.

La balise d'insertion d'une image dans une page HTML est la suivante :
Cette balise n'a pas de balise de fermeture... La raison est simple : on souhaite juste ajouter une image. Il est donc logique de ne pas avoir une ouverture et une fermeture, mais juste de préciser où on souhaite ajouter l'image et où aller la chercher (chemin ou URL).


Exemple il est important et essentiel de noter que l'insertion d'une image se fait toujours à la lecture du fichier par le navigateur, c'est-à-dire que quand vous "insérez" une image, elle n'est pas sauvegardée avec le fichier HTML, il est nécessaire de copier les images utilisées avec les fichier HTML.
Ceci a pour résultat :




   Align : à utiliser pour mettre plusieurs lignes de texte à côté d’une image sans faire de tableaux.
   Alt : Permet d'ajouter un commentaires sur une image. Ce commentaire est affiché si l'image n'est pas chargée.
   Border : largeur de la bordure autour de l'image (en cas d'utilisation de lien, cette valeur prend toute son utilité).
   Height : hauteur de l’image (par défaut, l’image est à sa bonne taille)
   Hspace : distance horizontale avant l’affichage du texte
   Src : Chemin d’accès au fichier à afficher (*.gif, *.jpg sont les deux extensions qui peuvent être affichées)
   Title : Permet d'ajouter un commentaires quand l'utilisateur passe sa souris sur l'image.
   Usemap : Permet d'utiliser des images réactives, appelées images mappées.
   Vspace : distance verticale avant l’affichage du texte
   Width : largeur de l’image (par défaut, l’image est à sa bonne taille)

Dans le chemin d'accès, on peut aussi bien mettre un chemin relatif ("../../images/std/accueil.jpg" ou "images.gif") qu'une URL complète ("http://www.hobbesworld.com/html/images/princessmononokesml.jpg"). Ceci dit, si l'image se trouve sur le site utilisé, il est préférable de mettre le chemin relatif pour des raisons de temps d'accès.

Il est conseillé de fixer les tailles de l'image dans les propriétés (Width et Height), car ainsi, si l'utilisateur ne charge pas l'image (option désactivée dans la navigateur, ou le fichier est absent), la présentation est conservée !





Voila les différents alignements que vous pouvez obtenir avec l'option 'align' :

Sur une petite image :	Sur une grande image :
sans option d'alignement. L'option fixée est bottom. L'option fixée est middle. L'option fixée est top.	sans option d'alignement. L'option fixée est bottom. L'option fixée est middle. L'option fixée est top.

Les alignements avec les valeurs left et right sont traitées plus bas dans la partie "Affichage de plusieurs lignes à côté d'une image".

Ces alignements peuvent varier en fonction du navigateur utilisé, il est donc intéressant de faire les tests avec les dernières versions de chaque navigateur !





Dans ce cas, l'image est considérée comme un bloc de texte, c'est-à-dire qu'il suffit de mettre la balise de lien autour de l'image.

Ce qui a comme resultat :




Il faut pour cela utiliser la balise Align. Ces valeurs peuvent être right ou left. Les autres options du Align permettent de préciser un alignement par rapport au texte (voir paragraphe plus haut sur la partie "alignement d'une image"), donc ne correspondent pas à notre exemple.

Petit exemple d'affichage d'une image, alignée à gauche, mais sans espacement (le texte est collé à l'image)
Le code est :
Le texte est affiché sur plusieurs lignes à côté de l'image.

---

Petit exemple d'affichage d'une image, alignée à droite, avec espacement (le texte est espacé par rapport à l'image)
Le code est :
Le texte est affiché sur plusieurs lignes à côté de l'image.







Les images mappées se font en 2 étapes. Il faut définir les différentes zones réactives de l'image dans la balise <map>, puis ajouter l'option usemap dans la balise <img>, ce qui donne un code du style :

Ce qui donne comme résultat :


Voici une autre image ou j'ai juste dessiné les zones réactives ci-dessus.
Ces zones réactives sont délimitées par le trait bleu.

Ces zones apparaissent car elles sont ainsi définies dans l'image, car il n'est pas possible de les faire apparaître directement grâce au map, ou je n'ai pas trouvé !




Donc, comme vous avez pu le voir, la balise <map> permet de définir la liste des zones réactives d'une image. Chaque zone est, quand à elle, précisée par la balise <area>.
Le nom fixé dans la balise <map> est celui utilisé dans la variable "usemap" de <img>, avec un dièse d'écart comme dans l'exemple ci-dessus.
La balise <area> comporte ces différentes options :

• "shape" : permet de définir le type de forme que l'on souhaite définir.
  Les 3 valeurs possibles sont : rect, circ, poly
• "coords" : fixe les coordonnées des points déterminant la forme.
      Pour rect, il faut de définir les coordonnées de l'angle haut-gauche, puis le bas-droit : x1, y1, x2, y2
      Pour circ, il suffit de définir le centre du cercle et son raison : x1, x2, r
      Pour poly, il faut définir chaque point, le dernier étant relié au premier : x1,x2,y1,y2,x3,y3,...
• "href" : URL permettant de définir le lien
• "target" : permet de définir l'ouverture du lien selon les options suivantes :
      _new : ouverture dans une nouvelle fenêtre
      _top : ouverture dans toute la page (dans le cadre d'utilisation des frames)
      _parent : ouverture dans la zone parent (dans le cadre d'utilisation des frames)
      _self : ouverture dans la fenêtre courante (respect des frames)
      _blank : ouverture dans une nouvelle page blanche
      [nom_du_cadre] : ouverture dans un cadre spécifique (dans le cadre d'utilisation des frames)
• "alt" : Fixe un texte permettant de définir l'image en temporaire pendant le chargement
• "title" : Fixe le texte qui apparaît lorsque la souris passe sur la zone en question