JavaMap

Un exemple d'ImageMap en Java.
Survolez l'image à la souris pour faire apparaître une description de chaque zone de l'écran.

Nouveau !
La version 3.0 gère désormais les zones rectangulaires, circulaires et polygonales. Allez voir ici !

Désolé : Votre navigateur n'est pas compatible Java !

Pour utiliser cette applet dans vos pages Web...

JavaMap Classic
  1. Téléchargez le fichier suivant : JavaMap.class
  2. Placez le fichier au même endroit que votre page Web (ou sinon utilisez le tag CodeBase pour paramétrer l'applet).
  3. Incorporez le code suivant dans votre page HTML :
<applet code="JavaMap.class" width="640" height="200">
<param name="picture" value="essai.gif">
<param name="areas" value="3">
<param name="debugcolor" value="#FF0000">
<param name="coords" value="xyxy">
<param name="font" value="dialog">
<param name="fontsize" value="14">
<param name="url0" value="France,france.htm,frmCartes">
<param name="area0" value="0,100,200,300">
<param name="color0" value="#000000,#FFFFD7">
Votre navigateur n'est pas compatible Java !
</applet>

Les paramètres sont les suivants :

width La largeur de l'applet, et donc de l'image
height La hauteur de l'applet, et donc de l'image.
picture L'image qui servira de fond (au format GIF ou JPG).
areas Le nombre d'infobulles à afficher
debugcolor La couleur (au format #000000) du cadre représentant les zones sensibles.
Pour que le cadre ne se trace pas, omettez le paramètre debugcolor.
coords Le système de coordonnées à utiliser pour définir les zones sensibles rectangulaires. 2 valeurs possibles (voir les paramètres area0, area1 plus bas) :
  • "xyxy" pour spécifier les coordonnées de chaque rectangle par ses 2 sommets
  • "xywh" pour spécifier les coordonnées par le premier sommet, la largeur du rectangle et sa hauteur.
font La police de caractères à utiliser.
fontsize La taille de la police de caractères, à savoir :
  • Helvetica
  • Dialog
  • Courier
  • TimesRoman
url0 La description de l'infobulle numéro 0, sous la forme suivante :
<param name="url0" value="texte,url,frame"

avec :

  • texte = le texte qui sera vu par le lecteur
  • url = l'URL de la page à charger si le lecteur clique
  • frame = le nom de la frame dans laquelle charger la page (facultatif).
area0 La taille de la "zone sensible" numéro 0, c'est-à-dire de la zone qui provoque l'affichage de l'infobulle numéro 0.
Cette zone est un rectangle, dont les coordonnées sont fonction du paramètre coords cité plus haut.

Exemple 1:
<param name="coords" value="xyxy">
<param name="area0" value="10,15,100, 200">
Le système de coordonnées est "xyxy", donc la zone sensible part du point (10,15) au point (100,200).

Exemple 2 :
<param name="coords" value="xywh">
<param name="area0" value="10, 15, 90, 185>
Le système de coordonnées est "xywh", donc la zone sensible part du point (10,15), fait 90 pixels de large et 185 de haut.
Les 2 exemples produisent le même résultat.

color0 Les couleurs de l'infobulle numéro 0 (couleur du texte et couleur du fond) sous la forme :
<param name="#000000,#FFFFD7">

Chaque couleur est en hexadécimal, et les 2 couleurs sont séparées par une virgule.
Vous pouvez omettre ce paramètre (dans ce cas l'infobulle s'affiche en noir sur fond jaune clair).

url1, area1, color1 idem, pour la deuxième infobulle, et ainsi de suite jusqu'à areas-1.