Zones réactives sur image dans Dreamweaver

I. Introduction aux zones réactives

Dans ce tutoriel, nous allons voir comment créer des zones réactives sur une image, pour pouvoir délimiter une image en plusieurs éléments afin d’y insérer des liens vers des pages web. Ces zones sont aussi appelées des cartes graphiques, voici d’ailleurs la définition donnée par Dreamweaver :
Une carte graphique est une image ayant été divisée en régions, ou zones réactives. Lorsque vous cliquez sur une zone réactive, une action est exécutée, par exemple, l’ouverture d’un nouveau fichier.

II. Explications

1. Insérer une image

Pour commencer, il va falloir créer un nouveau document html avec Dreamweaver, ou ouvrir votre page html existante. Pour créer une nouvelle page, il faut aller dans le menu fichier puis Nouveau :

Choisissez une nouvelle page de base HTML, puis cliquez sur le bouton “Créer” :

Vous obtiendrez alors une page vierge. Il ne vous reste plus qu’à aller dans le menu “Insertion” puis “image” pour insérer une image dans cette page :

Puis choisissez votre image et validez :

J’ai pris une carte de France, ainsi vous allez bien comprendre à quoi servent les zones réactives…

2. Dessiner une zone réactive

Sélectionnez votre image, de façon à voir apparaître la fenêtre de propriétés de celle-ci :

Vous avez maintenant les outils de zones réactives en bas à gauche des propriétés. Ainsi vous allez pouvoir dessiner des zones distinctes sur l’image, et pouvoir mettre un lien sur chacune d’entre elles. Si vous ne faisiez pas cela, vous ne pourriez faire un lien que sur l’image globale, mais comment feriez-vous alors si vous souhaitez que lorsqu’on clique sur un département de cette carte de France un lien différent s’ouvre à chaque fois ?

Vous avez trois outils différents pour la création de zones réactives :

1 : Outil de sélection de zone réactive
2 : Outil de création d’une zone réactive rectangulaire
3 : Outil de création d’une zone réactive ronde / ellipse
4 : Outil de création d’une zone réactive polygonale

Pour le cas de ma carte de France, on s’aperçoit très vite qu’aucun département n’a de taille ronde ou rectangulaire, il va donc falloir utiliser l’outil de création de zones réactive polygonale. Je sélectionne donc cet outil, et je clique à chaque extrémité du département que je veux délimiter pour le sélectionner en polygone :

Ensuite, répétez l’opération pour créer autant de zones réactives que vous le souhaitez.

3. Créer des liens sur zones réactives

Lorsque vos zones sont créées, utilisez l’outil de sélection de zones réactives pour les sélectionner une par une. Puis les propriétés de chaque zône, vous allez pouvoir créer un lien vers une page différente (par exemple) :

Au final, lorsque vous aurez fait toutes vos zones réactives, vous pourrez cliquer sur n’importe quel département et un lien vous amènera vers une page différente correspondant au département sur lequel vous avez cliqué.

Vous pouvez voir un exemple de résultat sur la carte des blogs de france de l’annuaire de blogs conseillemoi.com.

III. Conclusion du tutorial

J’espère que vous aurez appris quelque chose dans ce tutoriel, et que vous en ferez bon usage pour l’adapter à vos besoins. Si vous avez des questions par rapport à l’utilisation des zones réactives, nous vous renseignerons avec plaisir sur le forum.