SELFHTML: HTML/XHTML / Graphiques / Graphiques en tant que liens

	Graphiques en tant que liens
	Définir des graphiques en tant que liens

Définir des graphiques en tant que liens

Quand vous posez des liens, vous devez également toujours définir un texte de lien, à savoir un texte qui est représenté à l'utilisateur comme pouvant être cliqué. À la place d'un texte de lien vous pouvez aussi bien mentionner un graphique de votre choix. C'est alors le graphique complet qui peut être cliqué, et lorsqu'il l'est, le lien est exécuté. Cette possibilité est utilisée très souvent dans la pratique, pour les bannières publicitaires par exemple mais aussi pour des barres de navigation graphiques.

Exemple:

Exemple d'affichage: aperçu

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Texte du titre</title>
</head>
<body>

<table border="0" cellpadding="0" cellspacing="0"><tr>
<td><a href="accueil.htm"><img src="bouton1.jpg" width="160" height="34" border="0" alt="accueil"></a></td>
<td><a href="page.htm"><img src="bouton2.jpg" width="160" height="34" border="0" alt="retour"></a></td>
<td><a href="page.htm"><img src="bouton3.jpg" width="160" height="34" border="0" alt="apr&egrave;s"></a></td>
<td><a href="theme.htm"><img src="bouton4.jpg" width="160" height="34" border="0" alt="th&egrave;me"></a></td>
</tr></table>

<h1>Barres de navigation</h1>

<p>Que serait la toile sans elles!</p>

</body>
</html>

Explication:

L'exemple montre une barre de navigation horizontale. Les quatre boutons de la barre se présentent sous forme de graphiques bouton1.jpg à bouton4.jpg. Tous les graphiques ont la même taille et ont le même aspect. Ils se distinguent par leur légende. Pour que les boutons soient placés proprement les uns à côté des autres sans coupure, un tableau (border="0") sans quadrillage a été noté à cet effet. Avec cellpadding="0" et cellspacing="0" on s'assure que dans le tableau les cellules soient contiguës sans jointure visible ni espace intérieur. Ainsi les graphiques contenus se côtoient pour donner l'effet d'une barre.

Une ligne avec quatre cellules est définie. Dans chacune de ces cellules est noté un lien. Entre <a href=> et </a> n'est cependant noté aucun texte de lien, mais la référence du graphique pour chacun des boutons. De cette façon, le graphique concerné peut être cliqué et lorsqu'il l'est, mène à la cible qui est notée pour href=.

La mention border="0" dans la référence du graphique est également importante (voir aussi bordures autour de graphiques). Si cette mention manquait, le navigateur afficherait une bordure autour du graphique et cela dans la couleur pour les liens pour le marquer en tant que lien. Étant donné que les boutons de l'exemple sont identifiables sans équivoque par l'utilisateur comme étant des graphiques dotés d'une fonction de lien, l'affichage de la bordure est empêché.

Attention:

Quand vous empêchez la bordure autour d'un graphique servant de lien avec border="0", l'utilisateur ne peut plus reconnaître immédiatement le graphique comme étant un lien. Ce n'est que lorsqu'il passe avec la souris sur le graphique qu'il peut reconnaître au symbole du pointeur de la souris qu'il s'agit d'un lien. C'est pourquoi vous ne devez empêcher l'affichage de la bordure l'identifiant comme lien, que si le graphique est reconnaissable comme lien au premier coup d'œil.

À cause de la mention border="0" l'exemple ci-dessus utilise la variante HTML "Transitional", car l'attribut border est classé en cours d'abandon du standard HTML. Avec un format global CSS img { border:none } ce problème pourrait pourtant être contourné de façon élégante et dans tous les repères <img> placés dans des liens, il pourrait être renoncé à l'attribut border. Pour les navigateurs ne supportant pas les CSS, toutefois, la bordure serait malgré tout affichée.

Seulement pour la compréhension: dans l'exemple d'affichage ci-dessus quatre fichiers en réalité font partie de l'exemple. Ils ont tous la même construction et la barre de navigation placée au même endroit. Seuls les graphiques pouvant être cliqués de chaque fichier sont reliés à des cibles différentes. L'exemple montre ainsi comment un projet Web qui forme un tout peut être réalisé avec différents fichiers ayant une présentation uniforme et la barre de navigation toujours au même endroit.


	Graphiques composés de liens (Image Maps: cartes cliquables)
	Aligner les graphiques

SELFHTML/Aides à la navigation

HTML/XHML

Graphiques