Balises d`image

• La balise <img />
- place une image dans le document
Balises d’image
Balises d’image
- formats reconnus : GIF, JPG, PNG
• Exemple
-
<img src=“http://serveur/image.jpg” alt=“en-tête” />
-
<img src=“http://serveur/image.jpg”
alt=“logo de l’organisme”
width=“180” height=“100”
longdesc=“http://serveur2/description.html”
ismap=“ismap” usemap=“#map1” />
66
• Attributs
- src : URL du fichier image (obligatoire)
Balises d’image
Balises d’image
- width et height : largeur et hauteur de l’image, en pixels.
- alt : description textuelle de l’image (obligatoire)
- longdesc : pointe sur une ressource donnant une description plus
approfondie de l’image
- ismap : identifie l’image comme une partie d’une imagemap serveur
- usemap : donne le nom de l’imagemap client à utiliser avec l’image
67
• Une image sensible (imagemap) est une
image contenant différentes zones
représentées par des liens
Balises d’image
Images sensibles
• Deux modes
- Serveur : coordonnées du clic envoyés au
serveur pour qu’il calcule l’URL correspondante
- Client : c’est le navigateur qui analyse les
coordonnées du clic (plus rapide) mais nécessite
une map
68
• La balise <map>
- contient les définitions des zones sensibles
Balises d’image
Images sensibles
• Attribut
- id : obligatoire et unique, il permet d’identifier la carte
- name : le nom pouvant être référencé par l’attribut usemap.
• Exemple
-
<map id=“navigation” name=”navigation”>
<area .../>
<area .../>
</map>
Selon les spec, id suffit. Par
contre en pratique, c’est la
valeur de l’attribut name qui
est préconisée dans usemap.
Pour être sûr, préciser les 2 :
id=”valeur” et name=”valeur”
dans <map>
69
• La balise <area />
Balises d’image
Images sensibles
- définit une zone sensible dans une imagemap
• Exemple
-
<img src=”image.jpg” alt=”description” usemap=”#navigation”>
-
<map id=“navigation” name=”navigation”>
<area shape=“circle” coords=“288,306,288” href=“doc.html” />
<area shape=“default” href=“index.html” />
</map>
70
• Attributs de <area />
- shape : definit la forme de la zone (rect|circle|poly ou default)
Balises d’image
Balise <area />
- coords : coordonnées de la zone sensible, sous forme de liste
séparée par des virgules (aucune si shape=”default”)
- href : URL du document à associer à la zone
- nohref : permet de désactiver une zone (pointe sur rien)
- alt : propose un texte de substitution
- accesskey : raccourci clavier
- tabindex : position de la zone dans la séquence de tabulations
71
• Chaque type de zone dispose d’un système
Balises d’image
Balise <area />
de coordonnées spécifique.
- rect : coordonnées du coin supérieur gauche et
du coin inférieur droit.
- circle : coordonnées du centre et du rayon.
- poly : coordonnées des sommets.
72
• A partir de l’image
Balises d’image
Exercice
suivante (300x200) :
- définir une map où
‣
la zone bleue renvoie vers lien1.html
‣
la zone verte vers lien2.html
‣
la zone rouge vers lien3.html
73