Contenu | Menu | Rechercher :
Le réseau des étudiants | Contact
Vous êtes ici : Le réseau social des étudiants ==> Image sous forme de lien (image cliquable)

Image sous forme de lien (image cliquable)

La notion de l'hypertexte n'est pas seulement supportée par des liens textuels, mais aussi par les images cliquables. Il est parfois nettement plus judicieux de pourvoir un lien par une image, au lieu du texte simple. Pour bien tirer profit de ce tuto. Une lecture anticipée du chapitre "syntaxe XHTML des images" peut être envisagée, pour les gens non avisés.

Introduction aux images cliquables

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 qui s'avère parfois moche et qui mérite d'être supprimée (par les CSS).

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.

Exemple d'une image cliquable

Syntaxe XHTML d'une image cliquable

<p><a href="navigateurs.php" title="les navigateurs Web"><img src="navigateurs.png" 
alt="les navigateurs : Opera, Netscape, Internet Explorer et Firefox" /></a></p>

Aperçu

les navigateurs : Opera, Netscape Navigator, Internet Explorer et Firefox Mozilla

Commentaires

Dans le prochain chapitre, vous allez apprendre à créer des images cliquables plus compliquées (les images interactives côtés client).

Cacher ce panneau   Accéder à la version étendue du chat

Cacher ce panneau