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

• Exemple d'une image cliquable

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

Commentaires

• comme vous pouvez le constater, la plupart des navigateurs encadrent une image cliquable à l'aide d'une bordure bleue pour montrer aux utilisateurs qu'il s'agit d'un lien, mais rien ne vous empêche à changer ce comportement.
• a noter que le navigateur Opera n'entoure pas l'image avec une bordure bleue, mais par contre il affiche une petite info bulle qui contient l'URL de la page vers laquelle pointe le lien ou si vous voulez la valeur de l'attribut "href".
• un lien sous forme d'image est parfois plus utile qu'un lien textuel car il est plus expressif et plus significatif quant au contenu de la page à visiter, mais vous devez faire attention aux conséquences que cela peut avoir sur la qualité du référencement.

• l'une des mauvaises implémentations de l'attribut "alt" de la balise <img /> par les deux navigateurs Internet Explorer 6 et 7 crée beaucoup de problèmes. En fait Les deux navigateurs précités utilisent la valeur de l'attribut "alt" pour afficher une info bulle or ce n'est pas la raison d'être de cet attribut qui a été conçu pour afficher un texte alternatif dans le cas où l'image qui lui est associée n'est pas affichée.

  Lorsque vous consignez uniquement l'attribut "alt" pour l'image et l'attribut "title" pour le lien (comme dans l'exemple ci-dessus), seul le premier (alt) sera affiché par les deux navigateurs Microsoft et par conséquent l'attribut "title" de la balise <a> ne sera pas affiché, pour remédier à ce problème mettez aussi l'attribut title pour la balise <img />.

• pour supprimer les bordures qui entourent les images cliquables vous pouvez mettre le style CSS suivant dans une feuille de style externe ou dans l'en-tête du document :

  a img {  /* concerne toute image comprise dans un lien */
     border: none /* ou bien "Opx" ou même "0" */
  
  }

  Soit passer directement la propriété CSS border (bordure) à la balise <img /> en lui assignant la valeur "none".

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

  Vous pouvez aussi utiliser l'attribut déprécié "border" et lui assigner la valeur "0" ou "none" mais il n'est autorisé que dans le DTD "Transitional" et "Frameset".

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

  Voici une image cliquable sans bordure :

  

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