Cours

Accédez à nos cours concernant des domaines et thématiques différentes. Vous pouvez aussi contribuer en rédigeant des articles.

Consulter les cours

Écoles

Parcourez notre annuaire d’écoles, instituts et universités du monde. Si votre école n’est pas listée, vous pouvez l’ajouter très facilement.

Consulter les écoles

Tchat

Accédez à notre messagerie instantanée pour échanger avec d’autres membres inscrits et aussi les invités. Aucune inscription n’est obligatoire.

Accéder au tchat

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).

Aidez la Communauté des Étudiants !