SELFHTML: HTML / Graphiques / Graphiques composés de liens (cartes picturales)

SELFHTML/Quickbar HTML Graphiques en HTML

	Graphiques composés de liens (cartes picturales)
	Graphiques composés de liens Graphiques composés de liens (server-sided)

Graphiques composés de liens

Exemple d'affichage: aperçu

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:

<map name="imagetest"> 
<area shape=rect coords="1,1,249,49" href="#ancre"> 
<area shape=rect coords="1,51,149,299" href="fichier.htm">
<area shape=rect coords="251,1,399,399" href="../fichier.htm">
<area shape=rect coords="151,51,249,299" href="http://www.rien.fr/"> 
<area shape=rect coords="1,301,249,399" nohref> 
</map>
<img src="hypgraph.gif" usemap="#imagetest" border=0>

Explication:

Avec <map name=> vous introduisez la définition des surfaces composées de liens d'un graphique.Derrière le signe égal vous attribuez un nom pour le graphique composé de liens. 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 qu'un lien d'ancre à l'intérieur d'un fichier HTML. Ne donnez pas un nom trop long. Le nom ne peut pas comprendre d'espace ni de signes avec accent. Utilisez comme caractère spécial tout au plus le tiret de soulignement "_". Le nom doit être placé entre guillemets et être suivi pour clôturer le repère d'ouverture <map> de >.

La commande <map> peut être placée à un endroit au choix dans le corps d'un fichier HTML (à savoir 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.

Par la mention 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.

Avec 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. Les mentions doivent être faites entre guillemets Séparez toutes les valeurs en pixels par des virgules.

Définissez un rectangle (shape=rect) avec les coordonnées x1,y1,x2,y2
qui signifient:
x1 = coin en haut à gauche, Pixel à partir de la gauche
y1 = coin en haut à gauche, Pixel à partir du haut
x2 = coin en bas à droite, Pixel à partir de la gauche
y2 = coin en bas à droite, Pixel à partir du haut
Définissez un cercle (shape=circle) avec les coordonnées x,y,r
qui signifient:
x = centre, Pixel à partir de la gauche
y = centre, Pixel à partir du haut
r = Rayon in Pixel
Définissez un Polygone (shape=polygon) avec les coordonnées x1,y1,x2,y2 ... x_n,y_n"
qui signifient:
x = Pixel un coin à partir de la gauche
y = Pixel 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 le fichier qui doit être appelé quand l'utilisateur clique sur la surface associée au lien. Pour cela les mêmes règles que pour les liens sont en vigueur. Si vous désirez définir explicitement une surface comme n'étant pas cliquable vous pouvez le faire avec l'attribut nohref. Si vous omettez une telle mention, les surfaces non définies avec href= seront automatiquement non cliquables.

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> (plus de détails à ce sujet dans incorporer des graphiques). Pour marquer le graphique comme étant composé de liens vous devez noter l'attribut usemap= (voir l'exemple ci-dessus). Derrière le signe égal donnez le nom que vous avez attribué dans la définition des surfaces associées à des liens dans le repère d'ouverture <map>. Le nom doit être placé entre guillemets et devancé par un #.

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.

Vous pouvez également définir les surfaces associées à des liens dans un autre fichier HTML que dans celui dans lequel vous référencez le graphique. Dans ce cas vous devez mentionner dans la référence de graphique avec usemap= le nom de fichier et la destination à l'intérieur du fichier où les surfaces associées à des liens sont définies. Cela fonctionne exactement comme avec des liens.

Pour définir une info-bulle quand on déplace la souris sur une surface associée à un lien vous pouvez utiliser dans le repère <area> l' attribut universel title="Mon texte affiché". Cette commande est interprétée par l' Explorer Internet MS à partir de la version 4.x. Netscape ne connaît pas encore cette commande dans sa version 4.x.

Pour chacun des repères <area> L'attribut tabindex= est également permis. L'effet est le même qu'avec la tabulation pour parcourir des liens et sera décrit plus précisément dans cette partie. 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 et sera décrit plus précisément dans cette partie

Graphiques composés de liens (server-sided)

Par 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. Ce qui signifie que des graphiques composés de liens ne sont réalisables par cette méthode qu'en étant connectés (et non pas sur l'ordinateur local) et que de toutes façons il vous faut voir avec votre fournisseur d'accès quelle est la façon de procéder exacte. L'avantage en est que de tels graphiques composés de liens sont exécutables même avec d'anciens navigateurs WWW; l'inconvénient en est la complication dans la manipulation. Le consortium W3 déconseille entre temps cette forme de graphiques composés de liens parce qu'elle augmente inutilement l'encombrement du réseau.

Le principe fonctionne de la façon suivante: grâce à une commande HTML le navigateur WWW sait qu'il s'agit pour un graphique d'un graphique composé de liens. Si l'utilisateur clique ensuite quelque part sur le graphique affiché le navigateur WWW transmet les coordonnées en pixels du cliquement 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 d'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 et les liens 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></a>

Explication:

Au milieu de la commande pour le traitement d'un graphique composé de liens se trouve la commande HTML pour incorporer un graphique. Dans l'exemple c'est le fichier "fichier.gif" qui est incorporé. Outre l'attribut src= la commande doit comporter également l'attribut ismap. Grâce à elle il sera dit à l'ordinateur serveur qu'il s'agit d'un graphique composé de liens.

Toute la construction est un graphique en tant que lien. La commande pour incorporer un graphique se trouve à l'endroit où le texte du lien proposé à l'utilisateur se trouverait s'il s'agissait d'un lien à du texte.

La destination du lien 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".


après:	Ressources graphiques internes au navigateur
avant:	Graphique en tant que lien

SELFHTML/Quickbar HTML Graphique en HTML