une image-map

Une image-map est une image qui contient plusieurs liens vers des ressources différentes. La map (carte en anglais) est une suite d'instructions regroupées dans la balise <map>...</map> d'une page html. Ces instruction définissent des "régions" (area) de l'image, associées à différents liens.
EXEMPLE !!!
Il est tout-à-fait possible, mais peut-être un peu fastidieux ;-) de faire une image-map à la main, dans le code source. Aussi nous allons la réaliser avec ImageReady : ce sera plus facile.
Nous pourrions aussi utiliser DreamWaver, éditeur de pages web, ou Amaya (NVu n'offre pas cette possibilité), pour réaliser la carte.Il s'agira toujours plus ou moins:

1. d'importer une image dans la page web
2. de trouver les outils qui permettent de définir des zones
3. de remplir pour chaque zone le champ lien (link) avec une url.

Cette url sera un simple nom de fichier (avec chemin, le cas échéant) si le lien est fait vers une page du site local ; ou une adresse complète de type "http://www.site.com/dossier/fichier.html", si l'on fait un lien vers un site extérieur.
Les liens doivent renvoyer vers des pages qui existent, soit faites au préalable, soit réalisées par la suite, pour pouvoir vraiment fonctionner.
NB: Le résultat ne modifie pas l'image, elle est intacte, mais donne au navigateur les instructions pour matérialiser les liens à certains endroits de cette image.Si on s'amuse à changer l'image(<img src="...">), les liens subsistent exactement, mais n'ont plus grand chose à voir avec la nouvelle image. Les liens sont créés par l'html, pas par l'image.

Pour faire une image map il faudra de préférence choisir une image qui s'y prête, avec des zones différenciées, ou des éléments différents.

Comme les liens n'apparaissent pas beaucoup dans une image map, qu"ils demandent à être recherchés, l'image map n'est pas très utilisée dans les pages web ordinaires, d'information, de commerce, etc(on craint que l'utilisateur se perde, s'agace parce qu'il ne trouve pas assez vite). Dans le cadre d'une activité artistique c'est un moyen pour donner toute son importance au dessin ou à l'image,avec du texte en complément, ou même sans.

Image map avec Image Ready

On lance imageReady, puis fichier > ouvrir, on choisit l'image, on valide

Cette image propose 9 personnages, exemple clair de 9 liens différents possibles (à leur site, etc...)

Ouvrons le menu fenêtre et choisissons "carte image" pour ouvrir la fenêtre spécifique à la création de cartes images

Notre palette carte image est désormais visibles et fonctionnelle.

Nous allons prendre un outil de définition de zone dans la palette d'outils: nous avons le choix entre rectangle, ellipse et polygone

Avec l'outil rectangle je trace un rectangle qui deviendra zone de lien autour du premier personnage.

Et j'écris dans la palette carte image, la cible de ce premier lien: la page "liens.html" du site esbac.samedi.

Je recommence avec l'outil polygone, qui permet des formes irrégulières. Ce second lien visera la page ressources de esbac samedi.
NB: L'outil "selection de carte image", à droite du premier, me permet de déplacer des points si nécessaire pour ajuster au mieux .

3e zone de lien vers la page d'accueil de batman

4e zone de lien vers la page d'accueil de hugmat
5e zone de lien vers la page d'accueil de milcar11
6e zone de lien vers la page d'accueil de nelly
7e zone de lien vers la page d'accueil de vincenzo
8e zone de lien vers la page d'accueil de supnana

9e zone de lien vers la page d'accueil de atelier

10e zone de lien vers le blog

Enregistrement

Comme pour le gif animé, fichier > enregistrer ne nous laisse la possibilité d'enregistrer le fichier qu'au format.psd, fichier de travail avec calques. Choisissons donc encore "enregistrer une copie optimisée". Dans le tableau qui s'ouvre je choisis "html": je n'ai pas besoin d'enregistrer l'image, qui est déjà sur le bureau.Je n'ai besoin d'enregistrer que les données de la balise <map> dans le fichier html. Soit je les copierai/collerai dans une autre page, soit je placerai cette nouvelle page dans mon site, et l'image (qui est intacte, rappellons-le) dans le dossier des images du site.

Voici donc le résultat de ce travail: un fichier html du même nom correspondant au fichier image IMG_0906.JPG