SELFHTML: HTML/XHTML / Graphiques / Graphiques composés de liens -cartes cliquables- (Image Maps)

	Graphiques composés de liens -cartes cliquables- (Image Maps)
	Définir des graphiques composés de liens Graphiques composés de liens côté serveur

Définir des graphiques composés de liens

Des graphiques composés de liens sont des graphiques dans lesquels l'utilisateur peut cliquer sur un détail. Il s'ensuit l'exécution d'un lien. Par ce moyen l'utilisateur peut dans certains cas parvenir à l'information beaucoup plus intuitivement et plus vite que par une longue liste prolixe de liens.

Exemple:

Exemple d'affichage: aperçu

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

<h1>Vite à la ville ou région de votre choix!</h1>

<map name="carte">
<area shape="rect" coords="11,10,59,29" href="http://www.koblenz.de/" alt="Coblence">
<area shape="rect" coords="42,36,96,57" href="http://www.wiesbaden.de/" alt="Wiesbaden">
<area shape="rect" coords="42,59,78,80" href="http://www.mainz.de/" alt="Mayence">
<area shape="rect" coords="100,26,152,58" href="http://www.frankfurt.de/" alt="Francfort">
<area shape="rect" coords="27,113,93,134" href="http://www.mannheim.de/" alt="Mannheim">
<area shape="rect" coords="100,138,163,159" href="http://www.heidelberg.de/" alt="Heidelberg">
<area shape="rect" coords="207,77,266,101" href="http://www.wuerzburg.de/" alt="W&uuml;rzburg">
<area shape="rect" coords="282,62,344,85" href="http://www.bamberg.de/" alt="Bamberg">
<area shape="rect" coords="255,132,316,150" href="http://www.nuernberg.de/" alt="Nuremberg">
<area shape="rect" coords="78,182,132,200" href="http://www.karlsruhe.de/" alt="Karlsruhe">
<area shape="rect" coords="142,169,200,193" href="http://www.heilbronn.de/" alt="Heilbronn">
<area shape="rect" coords="140,209,198,230" href="http://www.stuttgart.de/" alt="Stuttgart">
<area shape="rect" coords="187,263,222,281" href="http://www.ulm.de/" alt="Ulm">
<area shape="rect" coords="249,278,304,297" href="http://www.augsburg.de/" alt="Augsbourg">
<area shape="poly" coords="48,311,105,248,96,210,75,205,38,234,8,310"
      href="http://www.baden-aktuell.de/" alt="Baden">
</map>

<p><img src="carte.gif" width="345" height="312" border="0" alt="carte" usemap="#carte"></p>

</body>
</html>

Explication:

Avec <map name="[carte]"> vous introduisez la définition des surfaces composées de liens d'un graphique. Par l'attribut name vous attribuez un nom pour le graphique. Ce nom ne doit avoir aucun rapport avec le nom du graphique. Il s'agit plus ici d'un nom d'ancre qui signifie la même chose que le nom pour définir des ancres et des liens à des ancres . N'attribuez pas de noms trop longs. Le nom ne peut pas comprendre d'espace ni de signes avec accent. Le premier signe doit être une lettre. Après les chiffres sont eux aussi permis. Utilisez comme caractère spécial tout au plus le tiret de soulignement (_), le trait d'union (-), les deux points (:) ou le point (.).

L'élément map peut se trouver à l'endroit de votre choix dans le corps d'un fichier HTML (donc entre <body> et </body>). La mention de cette commande ne provoque aucun affichage à l'écran. Il est pourtant recommandé de noter cette commande à un endroit particulier et reconnaissable du fichier par exemple au début ou à la fin du corps de fichier.

Entre le repère d'ouverture <map...> et le repère de fermeture </map> vous définissez les surfaces associées à des liens. Avec <area...> vous définissez des surfaces d'un certain graphique associées à des liens que vous incorporerez à un autre endroit .

Avec shape="rect" vous déterminez une surface rectangulaire, avec shape="circle" un cercle, et avec shape="polygon" vous pouvez définir un polygone au choix associé à un lien.

Par coords= vous donnez les coordonnées des surfaces associées à des liens. Les données en pixels sont des valeurs absolues dans le graphique qui doit être composé de liens. Séparez toutes les valeurs en pixels par des virgules.

Définissez un rectangle (shape="rect") avec les coordonnées pour x1,y1,x2,y2
qui signifient:
x1 = coin en haut à gauche, pixels à partir de la gauche
y1 = coin en haut à gauche, pixels à partir du haut
x2 = coin en bas à droite, pixels à partir de la gauche
y2 = coin en bas à droite, pixels à partir du haut
Définissez un cercle (shape="circle") avec les coordonnées pour x,y,r
qui signifient:
x = centre, pixels à partir de la gauche
y = centre, pixels à partir du haut
r = Rayon en pixels
Définissez un Polygone (shape="poly") avec les coordonnées x1,y1,x2,y2 ... x_n,y_n
qui signifient:
x = pixels d'un coin à partir de la gauche
y = pixels d'un coin à partir du haut
Vous pouvez définir autant de coins que vous voulez. Pensez que, du dernier coin défini, une ligne rejoindra le premier coin défini Cette ligne fermera le polygone.

Avec l'attribut href= vous déterminez la cible à savoir la cible du lien qui doit être appelée quand l'utilisateur clique sur la surface associée au lien. Pour cela s'aüüliquent les mêmes règles que pour référencer en HTML - Il peut donc s'agir de cibles de liens au choix intérieures ou extérieures au propre projet Web. Si vous désirez définir explicitement une surface comme n'étant pas cliquable vous pouvez le faire avec l'attribut nohref (sans affectation de valeur). Ce n'est cependant pas nécessaire car les surfaces qui ne sont pas couvertes par href= sont automatiquement non-cliquables.

Avec l'attribut alt vous notez l'alternative en texte pour le cas où la surface qui sert de lien ne peut être affichée. Cet attribut est un attribut obligatoire c'est à dire que vous devez le noter pour faire du HTML valide.

Référencez le graphique qui doit avoir des surfaces associées à des liens de la façon habituelle à l'aide du repère <img>. Pour marquer le graphique comme étant composé de liens vous devez noter l'attribut usemap=. Cet attribut attend comme affectation de valeur une URI qui conduit à l'endroit où l'élément map correspondant est noté. Normalement cet élément est noté dans le même fichier. C'est pourquoi l'affectation comprend simplement le simple signe dièse # et le nom de l'ancre défini avec <map name=>.

Attention:

Pour obtenir les coordonnées désirées en pixels pour des surfaces d'un graphique associées à des liens vous pouvez par exemple utiliser un programme graphique avec lequel vous pouvez en déplaçant la souris sur le graphique obtenir à l'affichage les coordonnées exactes en pixels du curseur.

Pour afficher une petite fenêtre ("Tooltip"info-bulle)en passant avec la souris sur une surface associée à un lien, vous pouvez utiliser, dans les repères <area> l' attribut universel title="Mon texte affiché". Ceci n'est pourtant pas interprété par tous les navigateurs.

Pour chacun des repères <area> l'attribut tabindex= est également permis. L'effet est le même qu'avec la Recherche tabulateur pour les liens où les explications sont plus détaillées. Est permis de la même façon l'attribut accesskey=. Cela fonctionne exactement de la même façon que pour les raccourcis clavier pour les liens où les explications sont plus détaillées.

Quand vous travaillez conformément à XHTML vous devez marquer l'élément area comme vide de contenu. Pour cela notez le repère autonome sous la forme <area... />.
De plus amples informations à ce sujet dans le chapitre sur XHTML et HTML.

Dans le repère <area> sont souvent placés des gestionnaires d'événements JavaScript. Pour l'appel de fonctions JavaScript avec des gestionnaires d'événement l'attribut href ne peut cependant pas manquer dans le repère <area>, faute de quoi le navigateur Netscape proteste. Pour résoudre le problème, vous pouvez noter une mention telle que:
<area shape="rect" coords="1,1,249,49" href="#" onclick="votrefonction()" alt="courte description">
Par l'attribution de la valeur "#" à l'attribut href un lien "vide" est créé et Netscape exécute alors lui aussi le gestionnaire d'événement (ici: onClick=).

Graphiques composés de liens côté serveur

Pour cette méthode pour gérer des graphiques composés de liens, une communication entre le navigateur WWW et l'ordinateur serveur doit être établie. L'inconvénient en est que de telles cartes cliquables ne fonctionnent pas dans tout environnement en local et que le serveur est encore davantage surchargé. Globalement on peut considérer cette méthode comme dépassée aujourd'hui et elle n'est encore mentionnée ici que dans un souci d'exhaustivité.

Le principe fonctionne de la façon suivante: en raison d'un attribut HTML, le navigateur reconnaît qu'il s'agit d'une carte cliquable. Si l'utilisateur clique alors quelque part sur le graphique affiché, le navigateur Web transmet les coordonnées en pixels du clic de souris (par rapport au coin haut et gauche du graphique) à un logiciel spécial de carte d'images sur l'ordinateur serveur. Ce logiciel renseigne si les coordonnées en pixels se trouvent à l'intérieur d'une surface du graphique définie comme étant associée à un lien . Si c'est le cas le logiciel fait savoir quel lien est attribué à cette surface. L'adresse correspondante au lien est envoyée au navigateur WWW qui exécute le lien.

Si vous voulez utiliser des graphiques composés de liens d'après ce schéma, demandez à votre fournisseur d'accès quel logiciel est utilisé sur le serveur pour le traitement de graphiques composés de liens et de quoi vous avez besoin exactement. En règle générale, vous avez besoin de ce qu'on appelle un fichier carte et d'un enregistrement dans un fichier de configuration. Dans le fichier carte vous attribuez respectivement les surfaces associées à des liens, aux liens désirés. Dans le fichier de configuration un enregistrement pour le logiciel du serveur est nécessaire.

Il existe plusieurs variantes pour la syntaxe du fichier carte. Le cas échéant demandez à votre fournisseur d'accès de vous donner des fichiers exemple et de la documentation pour la variante qu'il propose.

L'exemple suivant montre la partie qu'il vous faut noter dans le fichier HTML.

Exemple:

<a href="nomcarte"><img src="fichier.gif" ismap alt="Graphique"></a>

Explication:

Il s'agit donc d'un simple graphique en tant que lien. Dans l'exemple le fichier fichier.gif est noté de cette façon. Le repère <img> doit contenir l'attribut complémentaire ismap. Grâce à elle il sera dit à l'ordinateur serveur qu'il s'agit d'un graphique composé de liens.

La destination du lien dans href= n'est cependant pas un fichier mais un nom symbolique attribué auparavant dans le fichier de configuration de l'ordinateur serveur évoqué plus haut. Dans l'exemple ce nom symbolique est "nomcarte".


	Définir des formulaires
	Graphiques en tant que liens

SELFHTML/Aides à la navigation

HTML/XHML

Graphiques