- but : "découpage" d'une image en zones sur lesquelles mettre des liens.
- difficulté : Assez facile.
- public visé : Initiés
- pré-requis : quelques bases en HTML (les images, les liens).
I) Qu'est ce que c'est ?
Il est possible de découper une image en "zones", sur lesquelles il est possible de placer un lien, un script, etc...
Un exemple vallant mieux qu'un long discours, je vous montre quelques résultats possibles :
II) Coordonnées de points.
Pour délimiter ces zones, nous allons utiliser les coordonnées des différents points (ou pixels).
Sur les images, le point qui a pour coordonnées (0;0) est le pixel en haut à gauche de l'image.
Voici un schéma pour illustrer ceci :
Le point repéré par une croix a pour coordonnées (x;y).
Voici pour la théorie :D
Il y a un moyen beaucoup plus simple que de compter les pixels pour obtenir ces coordonnées (ouf !) : dans la plupart des logiciels de traitement d'images, les coordonnées du pixel qui se trouve sous le pointeur de la souris sont affichées en bas à droite de la fenêtre.
III) Créer le plan.
Une fois que nous avons les coordonnées, il faut créer un "plan", qui définira les différentes zones et leurs propriétées (url du lien, script à lancer si on clic, etc... ).
Nous allons délimiter l'endroit dans lequel sera défini les zones de la map. Pour celà on utilise les balises <MAP NAME="NotrePlan"> et </MAP> ("NotrePlan" est le nom de la map, qui aurait permis de différencier plusieurs maps différentes).
Entre ces balises, il nous reste à définir les zones.
La balise pour insérer une zone se présente sous cette forme : <AREA HREF="page1.html" SHAPE="nom de la forme" COORD="coordonnées des points">
Ici la zone sera un lien menant vers la page "page1.html" (on défini l'url du lien avec le paramètre HREF).
Le paramètre SHAPE détermine la forme de la zone, je les cite plus bas.
Le paramètre COORD délimite la zone, la manière de noter les coordonnées dépend de la forme de la zone.
Les zones peuvent avoir 3 formes différentes :
Le rectangle (rect) : les paramétres sont les coordonnées du pixel en haut à gauche et celle de celui en bas à droite.
Exemple : <AREA SHAPE="RECT" COORD="0,0,100,100">
Ceci créerait un rectangle dont le point supérieur gauche est (0;0) et celui inférieur droit (100;100).
Le cercle (circle) : les paramétres sont les coordonnées du centre du cercle et le rayon.
Exemple : <AREA SHAPE="CIRCLE" COORD="150,200,25">
Ceci délimiterait un cercle ayant pour centre le point de l'image de coordonnées (150;200) et ayant un rayon de 25 pixels.
Le polygone (poly) : pour former un polygône quelconque (triangle, formes plus complexes).
Exemple : <AREA SHAPE="POLY" COORD="0,0, 10,0, 10,20, 50,20, 50,30, 0,30">
Les coordonnées des sommets sont mises bout à bout. Pour vous donner un exemple concret, c'est cette forme qui est utilisée (avec une douzaine de point) pour délimiter les anneaux dans l'exemple de saturne.
Il est bien sûr possible de placer plusieurs zones pour un même modèle, pour cela rajoutez d'autres balises <AREA .....> à la suite.
Voici un exemple d'une zone rectangulaire menant vers la page index.html : <AREA HREF="index.html" SHAPE="RECT" COORD="10,10,50,50">
L'action d'une zone peut aussi être un script : ici, passer la souris sur la zone affichera un message : <AREA onMouseover="alert('Vous avez passÈ la souris sur la zone')" SHAPE="CIRCLE" COORD="100,100,50">
IV) Appliquer le modèle à une image.
Nous avons appris à faire un modèle de zones, il reste maintenant à l'appliquer à une (ou plusieurs) image(s).
Il suffit pour celà de rajouter le paramètre USEMAP="#NotrePlan" à l'image (NotrePlan est le nom du modèle, devant lequel il faut rajouter le signe #
Par exemple, pour utiliser le plan nommé "Test" sur l'image "photo.jpg" : <IMG SRC="photo.jpg" USEMAP="#Test">
Voici un exemple complet, qui est celui j'ai donné au début de ce tuto (le panneau "EXIT") :
