Pour utiliser cette applet dans vos pages Web...

 

 

JavaMap : Nouvelle version 5.0
  1. Téléchargez le fichier suivant : JavaMap5.zip
  2. Décompactez le fichier au même endroit que votre page Web (ou sinon utilisez le tag CodeBase pour paramétrer l'applet). Vous obtiendrez les 3 classes JavaMap5.class,   InfoTip.class et InfoPict.class.
  3. Incorporez le code suivant dans votre page HTML :

<applet code="JavaMap5.class" width="640" height="200" name="Exemple">
<param name="picture" value="essai.gif">
<param name="areas" value="1">
<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,show,france.htm,frmCartes">
<param name="area0" value="R,0,100,200,300">
<param name="color0" value="#000000,#FFFFD7">
<param name="picture0" value="150,20,france.gif">
Votre navigateur n'est pas compatible Java !
</applet>

Les paramètres sont les suivants :
(si vous êtes habitué à JavaMap3, consultez simplement les paramètres URL et PICTURE)

width La largeur de l'applet, et donc de l'image
height La hauteur de l'applet, et donc de l'image.
name Le nom de l'applet, si vous souhaitez y faire référence en JavaScript (voir DebugColor, plus bas).
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.

Note : ce paramètre peut être modifié via JavaScript, à condition d'avoir nommé l'applet (voir Name, plus haut).
Pour plus de précisions, consultez le code HTML de la page précédente.
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,affichage,url,frame"

avec :

  • texte = le texte qui sera vu par le lecteur
  • affichage = show (pour faire apparaître l'infobulle) ou autre chose (pour que l'infobulle soit invisible)
  • url = l'URL de la page à charger si le lecteur clique (facultatif)
  • frame = le nom de la frame dans laquelle charger la page (facultatif).

Le réglage de l'affichage permet de choisir si l'infobulle apparaît ou non (l'affichage de l'infobulle pouvant parfois faire double-emploi avec l'image, cf. paramètre picture0).
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.
Dans les versions 3 et 5 de JavaMap, la zone sensible peut désormais être un rectangle, un cercle ou un polygone.

1) Rectangle

Si la zone est un rectangle, ses coordonnées sont fonction du paramètre coords cité plus haut.

Exemple 1:
<param name="coords" value="xyxy">
<param name="area0" value="R,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="R,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.

2) Cercle

Dans le cas d'une zone sensible en cercle, le codage se fait de la façon suivante (le paramètre coords est sans effet) :
<param name="area0" value="C,100,150,25">
Le centre du cercle est placé en (100,150), son rayon est 25.

3) Polygone

Dans le cas d'un polygone, le codage se fait de la façon suivante :
<param name="area0" value="P,100,100,200,200,300,300,100,100">
Le polygone est décrit par un ensemble de coordonnées x1,y1,x2,y2...
color0 Les couleurs de l'infobulle numéro 0 (couleur du texte et couleur du fond) sous la forme :
<param name="color0" value="#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).
picture0 L'image associée à l'infobulle numéro 0 (au format GIF ou JPG), sous la forme :
<param name="picture0" value="x,y,image.gif">
url1, area1, color1, picture1 idem, pour la deuxième infobulle, et ainsi de suite jusqu'à areas-1.

Note : Vous pouvez utiliser un logiciel comme MapEdit (disponible à l'adresse http://www.boutell.com/mapedit) pour créer vos zones réactives. Le code produit par MapEdit est facilement traduisible en code JavaMap.

Nouveau !
Si vous souhaitez une traduction automatique du code MapEdit en JavaMap, cliquez ici.

 

 Revenir à la page précédente