Langage HTML / Images

<img src border width height ismap usemap longdesc align hspace vspace alt class style title lang >

• src : URL de l'image à charger
• border : taille de la bordure encadrant la photo (lorsque l'image est un lien, il est intéressant de mettre cet attribut à 0)
• width : redimensionnement de la largeur de la photo (si height est ommis, la hauteur de la photo sera redimensionnée proportionnellement à la largeur)
• height : redimensionnement de la hauteur de la photo (si width est ommis, la largeur de la photo sera redimensionnée proportionnellement à la hauteur)
• longdesc : URL d'un document HTML décrivant l'image lorsque celle-ci ne peut pas être affichée par le navigateur

format des images

• Différents formats : jpg, gif, png
• Attention à la taille de vos images

Dimension des images

• Attention à la dimension de vos images : une image de 200 pixels de largeur occupe 1/4 de l'écran en résolution 800x600
• N'utilisez le redimensionnement que lorsque vous avez besoin d'afficher la même image plusieurs fois dans un document, sous des dimensions différentes

Image cliquable

<a href="./langage_html_liens_hypertextes.html">
<img src="./images/back.gif"></a>

Image maps

Les éléments map permettent de définir des zones cliquables sur une image :

• définir un élément map nommé map1
• ajouter l'attribut usemap="map1" à la balise img

Elément map

<map name >
<area shape coords href nohref target title >
<area >...</map>

• en général, placé juste après la balise body
• la balise map ne peut contenir que des balises area qui permettent de définir des zones cliquables
• shape (type de la zone) : rect (un rectangle), circ (un cercle), poly (un polygone)
• coords (coordonnées de points) :
  • shape="rect" : x1, y1, x2, y2
  • shape="circ" : x, y, r (rayon)
  • shape="poly" : x1, y1, x2, y2, x3, y3
• href : URL du document associé à la zone définie
• nohref : si spécifié, la zone définie ne réagira pas au clic

Exemple

<map name="mymap">
<area shape="circ" coords="55,14,9" href="./index.html"
     target="_blank" title="Introduction / Histoire">
<area shape="circ" coords="68,39,9" href="./introduction_internet.html"
     target="_blank" title="Introduction / Internet">
<area shape="circ" coords="56,62,9" href="./introduction_serveur_web.html"
     target="_blank" title="Introduction / Serveur Web">
<area shape="circ" coords="22,62,9" href="./introduction_communication_client_serveur.html"
     target="_blank" title="Introduction / Communication client serveur">
<area shape="circ" coords="10,39,9" href="./introduction_url.html"
     target="_blank" title="Introduction / URL">
<area shape="circ" coords="21,15,9" nohref title="A venir : Langage HTML">
</map>

<img src="./images/navbar.png" usemap="mymap" border="0">