BUSI 2423 Lecture Notes - Lecture 19: Paintshop Pro, Gif, Dune
3 Jun 2018
School
Department
Course
Professor
1
Images mapées
1. Le concept
Les images mapées permettent d'effectuer des liens en fonction de zones [area] prédéfinies de l'image. Cette
particularité peut se révéler fort utile pour définir, par exemple, des outils de navigation dans votre site.
On prend une image.
Pour chaque zone retenue (ici un cube), on va associer un fichier.
Pour ce faire, on va définir des zones dans l'image, un peu comme avec une carte de géographie [map en
anglais] et associer à chacune de ces zones, un fichier.
On obtient ainsi une image dite "mapée" car elle est découpée en zones à l'instar des cartes géographiques. On
appellera la "map", les balises Html qui reprendront à la fois les zones et les fichiers associés.
Remarque
Il existe plusieurs méthodes pour réaliser cet effet d'images mapées : les méthodes NCSA, CERN et CSIM.
La méthode CSIM (Client Side IMage) est de loin la plus utilisée à l'heure actuelle car elle fait partie, à part
entière, du langage Html (spécification Html 3.0). Avec cette méthode, les fichiers de map sont inclus dans la
page Html et ne nécessitent pas l'appel de programmes additionnels (CGI) du serveur pour réaliser leurs
fonctions.
find more resources at oneclass.com
find more resources at oneclass.com
2
2. Les balises expliquées
Les balises des images mapées peuvent sembler très bizarres pour l'utilisateur moyen. Cependant, une fois
décodées, elles déterminent, en peu d'éléments, tout ce que le navigateur a besoin pour les traiter.
Nous utilisons toujours la méthode CSIM [Client Side Image Maps] qui fait partie du langage Html (Html 3.0).
2.1 La balise de l'image mapée
<IMG SRC="image.gif" USEMAP="#nom_du_map"> pour une map dans le même fichier
ou
<IMG SRC="image.gif" USEMAP="fichier.html#nom_du_map"> pour une map située dans un autre fichier.
En fait, on ajoute simplement à la balise classique de l'image, l'attribut USEMAP pour avertir le navigateur
qu'il doit employer pour elle une map et le nom de la map en question.
Remarquez le système de # , propre aux ancres [anchor].
2.2. Les balises de la map
<MAP NAME="nom_du_map">
<AREA SHAPE=méthode COORDS="coordonnées" HREF="lien" ALT="commentaires"
TARGET="target_de_frame">
... autres balises AREA ...
</MAP>
Reprenons les éléments un par un :
L'attribut SHAPE
SHAPE =RECT ou CIRCLE ou POLYGON
RECT pour un rectangle.
CIRCLE pour un cercle.
POLYGON pour un polygone irrégulier.
Netscape (pas Explorer) supporte également un quatrième type : DEFAULT qui définit ce qu'il faut faire si
l'utilisateur clique hors d'une des zones AREA définies. Pour des raisons de compatibilité, son usage n'est pas
conseillé.
L'attribut COORDS
L'attribut COORDS note les coordonnées qui permettront au navigateur de reconstituer la forme géométrique.
Nous détaillons ci-après la façon, spécifique à chaque méthode, de noter ces coordonnées. La véritable difficulté
pour le Webdesigner est de trouver les coordonnées des points dans l'image. C'est ici qu'un programme de
traitement de l'image comme Paint Shop Pro, se révèle indispensable. Ou mieux encore un programme comme
MapEdit ou MapThis (voir plus loin).
Pour un rectangle : COORDS="x,y,x',y'"
find more resources at oneclass.com
find more resources at oneclass.com
