Les images cliquables

1. Objectifs

• ِApprendre à travailler avec des images cliquables en HTML.
• Etre capable d’utiliser une image dans un lien.






2. Utiliser une image dans un lien

• On peut avoir au lieu d’un lien hypertexte textuel (<a>), une image cliquable, et comme les liens textuels sont soulignés par du bleu, les images cliquables sont entourées par une bordure bleue.
• La syntaxe correspondante est facile, il suffit d’imbriquer la baise <img /> dans la balise <a> et puis emboîter le tout dans un bloc. Voici un exemple :
• <p><a href ="acceuil.html"><img src="home.png" alt="accueil" /></a></p>
• N’oubliez surtout pas de mentionner l’attribut "alt" pour que votre document soit conforme aux standards du W3C et aussi pour accroître l’accessibilité de votre site surtout pour les mal-voyants.
• Si l’image est de taille grande, il est conseillé d’en afficher une minuature sur votre site, ajouter ensuite un lien sur cette minuature pour que vos visiteurs puissent l’image en taille originale
• Placer les deux images dans le même emplacement appelé(img) afficher montagne_mini.jpg sur votre page et ajouter un lien vers montagne.jpg pour que l’image agrandie s’affiche lorsqu’on clique sur la miniature:

• <p>
• Vous souhaitez voir l’image dans sa taille d’origine? Cliquez dessus!:
• <a href="images/montagne.jpg"> <img src="images/montagne_mini.png" alt="photo de vacance" title="photo du dfilaya 12122012"/>

</p>

3. 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é.
• Contrairement à une image cliquable, une carte cliquable est une image découpée en plusieurs zones. Chacune de ces zones constitue un lien qui pointe vers une page quelconque.
• L’élément HTML <map> est utilisé avec des éléments <area> afin de définir une image cliquable divisée en régions.
• Un élément <map> est utilisé en conjonction avec une image <map> pour concevoir une carte cliquable appliquée sur celle-ci.
• Le résultat consiste en des zones distinctes et transparentes, de formes variées, équipées de liens. En anglais, on emploie plus couramment le terme d’image map.
• L’attribut name est requis pour cet élément, car il permet de l’associer à l’élément image <map> via son attribut usemap.
• Une image map contient un ou plusieurs éléments <area> qui définissent chacun une zone cliquable d’après une forme (shape), des coordonnées pour cette forme (coords) et une adresse (href).

Syntaxe :
<map name="nom-de-la-carte">
<area [...] />
<area [...] />
<area [...] />
</map>

• A chaque zone réactive est associée une balise <area /> dont les attributs sont:
• name : le nom de la zone,
• shape : la forme géométrique (cercle, rectangle ou polygone),
• coords : les coordonnées de la zone, séparées par des virgules,
• href : lien hypertexte de la zone,
• alt : le texte alternatif.

———-

Bibliographie

• Livre : HTML 5 Une référence pour le développeur web: Rodolphe Rimelé
• HTML 5 et CSS 3 Mathieu Nebra