Médiaforma

All posts tagged map

Dans la rubrique précédente, vous avez appris à mettre en place des zones réactives élémentaires “à la main”, c’est-à-dire en définissant une par une les balises <area>. L’exemple était élémentaire puisqu’il consistait à définir quatre zones carrées de 100×100 pixels dans un carré de 200×200 pixels.

Il peut être intéressant de définir des zones réactives en utilisant des cercles et/ou des polygones. Vous pouvez procéder comme dans la rubrique précédente, mais cela risque vite de devenir rébarbatif. Dans cette rubrique, je vais vous montrer comment utiliser un programme en ligne pour faciliter la création de zones réactives rectangulaires, circulaires ou polygonales.

Ouvrez votre navigateur et rendez-vous sur la page http://www.maschek.hu/imagemap/imgmap.

En face du libellé Use an image on your computer, cliquez sur Parcourir et désignez l’image à utiliser dans vos unités de masse. Cliquez sur Upload puis sur Accept.

Il ne vous reste plus qu’à choisir une forme dans la liste déroulante, à délimiter la zone concernée avec la souris, et à définir la page cible.

Ici par exemple, nous choisissons circle dans la première liste déroulante et nous dessinons un cercle dans l’image. Comme vous pouvez le voir, la zone de texte Coords est automatiquement remplie en fonction du tracé. La page visée a pour nom cercle.html.

Nous allons tracer un polygone autour de la flèche. Nous sélectionnons polygon dans la deuxième liste déroulante et nous traçons le polygone. Un Shit+clic met fin au tracé. La page visée a pour nom fleche.html.

Un clic sur l’icône Get image map HTML et la balise <map> est affichée dans la partie inférieure de la page.

Il ne reste plus qu’à copier ce code dans Notepad++. Nous mettons un peu d’ordre pour que le code soit plus lisible, puis nous faisons coïncider l’attribut usemap de la balise <img> et l’attribut name de la balise <map>.

Le code est sauvegardé et exécuté dans Firefox. Comme vous pouvez le voir les deux zones réactives suivent bien le tracé qui a été défini sur le site Online Image Map Editor.


Les images réactives sont composées de différentes parties sur lesquelles l’internaute peut cliquer pour accéder à différentes pages Web. A titre d’exemple, vous pourriez créer une carte de France dans laquelle l’internaute pourrait cliquer sur chaque département pour obtenir des informations complémentaires. Dans cette première approche des images réactives, nous allons rester très simples en utilisant une image carrée de 200 pixels sur 200, contenant quatre zones de même taille.

La zone 1 s’étend des coordonnées 0,0 à 100, 100. La zone 2 des coordonnées 101,0 à 200, 100, la troisième des coordonnées 0,101 à 100, 200 et la quatrième des coordonnées 101, 101 à 200, 200.

Pour définir une image réactive, vous devez dans un premier temps créer une balise <map> et lui donner un nom avec l’attribut name. Ici, la balise <map> a pour nom “monimagemap”.

Les différentes zones sensibles sont définies à l’aide de balises <area>, incluses dans la balise <map>.

Dans cet exemple, nous utilisons quatre balises <area> pour définir les quatre zones carrées de l’image. Chacune de ces balises <area> utilise trois attributs :

  • shape pour définir la forme de la zone ;
  • coords pour définir les coordonnées de la zone ;
  • href pour définir la page à afficher lorsque la zone est cliquée.

La ligne 7 s’intéresse à la première zone cliquable, représentée par le carré de couleur rouge. La forme de la zone est rectangulaire, les coordonnées du coin supérieur gauche sont 0,0. Le premier zéro correspond à l’abscisse et le deuxième à l’ordonnée. La page affichée est une hypothétique page1.html.

La ligne 8 s’intéresse à la deuxième zone cliquable, représentée par le carré de couleur jaune. Ici encore, la forme est rectangulaire. Les coordonnées du coin supérieur gauche sont égales à 101 pour l’abscisse et 0 pour l’ordonnée. Quant aux coordonnées du coin inférieur droit, elles sont égales à 200 pour l’abscisse et 100 pour l’ordonnée.

Les lignes 9 et 10 décrivent les deux autres zones cliquables selon le même principe.

Une fois la balise <map> entièrement définie, il suffit d’y faire référence à travers l’attribut usemap de la balise <img>.

Comme vous pouvez le voir dans la barre d’état, le survol de chaque zone renvoie vers la page qui lui a été liée.


Les collections de type Map sont constituées de couples clé/valeur. Chaque clé doit être unique. Pour ajouter des données dans une Hashtable, vous utiliserez la méthode put(). Pour lire les données dans une Hashtable, vous utiliserez la méthode get() en indiquant la clé correspondant à la valeur à retrouver.

Les collections de type Map peuvent être des HashTable ou des HashMap. Ces deux collections sont similaires, si ce n’est que les Hashmap acceptent une clé et une valeur null alors que les Hashtable ne les acceptent pas.

 

Ici par exemple, on définit la Hashtable alphabetGrec et on y stocke les douze premières lettres de l’alphabet Grec, référencées par les clés 1 à 12. Les douze valeurs sont ensuite retrouvées et affichées dans la console :

Hashtable alphabetGrec = new Hashtable() ;
alphabetGrec.put(new Integer(1),"Alpha");
alphabetGrec.put(new Integer(2),"Beta");
alphabetGrec.put(new Integer(3),"Gamma");
alphabetGrec.put(new Integer(4),"Delta");
alphabetGrec.put(new Integer(5),"Epsillon");
alphabetGrec.put(new Integer(6),"Zeta");
alphabetGrec.put(new Integer(7),"Eta");
alphabetGrec.put(new Integer(8),"Theta");
alphabetGrec.put(new Integer(9),"Iota");
alphabetGrec.put(new Integer(10),"Kappa");
alphabetGrec.put(new Integer(11),"Lambda");
alphabetGrec.put(new Integer(12),"Mu");

for(int i=1; i<=12; i++){
    System.out.println(alphabetGrec.get((Integer)i));
}

Pour que ces instructions soient exécutables, vous devez importer les bibliothèques java.util.Hashtable et java.util.Map :

import java.util.Hashtable;
import java.util.Map;

 

Voici le résultat :