INF2005– Programmation web– A. Obaid Les cartes

INF2005– Programmation web– A. Obaid Images cliquables Outil permettant d'effectuer des liens à partir d'images (imagemaps) appelées Cartes. On définit des zones dans la carte que l'on associe à des hyperliens identifiés par leurs URL – Outil de navigation basées sur les graphiques. Les zones peuvent être des rectangles, des polygones, ou des cercles. 2

INF2005– Programmation web– A. Obaid Images cliquables 3 canard.html poussin.html

INF2005– Programmation web– A. Obaid Types de cartes Coté client: – Les URLs des zones sont contenus dans la même page HTML que l'image Coté serveur: – L'information de mappage se trouve sur le serveur et traité par un programme 4

INF2005– Programmation web– A. Obaid Carte du coté client Sur la base d'une image (GIF, JPEG, PNG, …), on définit les zones et des URL correspondants. L'élément permet de déclarer une carte basée sur cette image.. Il possède le sous-élément qui permet de définir une zone dans la carte. Dans l'élément on ajoute l'attribut usemap 5

INF2005– Programmation web– A. Obaid Carte du coté serveur Sur HTTP le serveur, on crée un fichier.map. – On y met les formes, les coordonnes et les urls de chaque zone. Dans l'élément on utilise l'attribut ismap – On crée un hyperlien vers un script sur le serveur. Le serveur traite la requête de mappage Le script interprète le fichier.map et envoie l'URL de chaque zone au serveur HTTP. 6

INF2005– Programmation web– A. Obaid et définit une carte et lui donne un nom avec l'attribut name: name="maCarte" : donne un nom maCarte à la carte. Dans, pour associer l'image à la carte identifiée par l'attribut name de, on utilise l'attribut Usemap Usemap="#maCarte" 7

INF2005– Programmation web– A. Obaid définit une zone dans la carte Attributs: – shape= "RECT|CIRCLE|POLY" : définit la forme de la zone. – coords="…" : donne la liste des coordonnées de la zone – href="URL" : déclare le lien associé à la zone. 8

INF2005– Programmation web– A. Obaid Exemple <area shape="poly" coords="215,209, 240,235, 248,260, 268,235, 293,250, 299,200, 264,200, 228, 189, 215,209" href="vache.html"> ferme.html 9

INF2005– Programmation web– A. Obaid Les formes L'attribut shape prend la valeur rect, poly ou circle spécifiant la forme de la zone. L'attribut coords contient la liste des cordonnées de la zone: – Si la forme est rect: x1,y1, x2,y2 : point en haut à gâche et bas à droite. – Si la forme est circle: x1,y2, R: cordonnées de centre et le rayon. – Si la forme est poly: x1,y1, x2, y2, … : liste des cordonnées des points du polygone (fermé). 10

INF2005– Programmation web– A. Obaid Outils de création de cartes Il existe des outils pour manipuler les cartes. – Ils permettent de générer des coordonnées à partir d'une l'image en utilisant une interface graphique. – Ils génèrent un code html du fichier d'utilisation des cartes. Exemples: – Mapedit ( – MapThis ( – Gimp ( 11