Cahiers Pratiques et Références de Fabrice.net

Cahier Dreamweaver : Atelier 7

Une légende dynamique à l'aide d'un formulaire
Tous les articles Dreamweaver
Création d'une image réactive

Pour créer notre légende, il faut d'abord bien distinguer chaque partie de la photo. Pour cela, l'idéal reste une image réactive (ou image map pour les puristes).

Commencez par insérer l'image à commenter dans une nouvelle page. Utilisez pour cela le bouton Insérer une image de la palette Objets de Dreamweaver. La création de l'image réactive proprement dite est très simple. Tout se fait à la souris :

  1. Sélectionnez l'image que vous venez d'insérer.

    2. L'inspecteur de propriétés change d'apparence et vous présente les paramètres liés à la gestion des images.



    Figure 1 : L'inspecteur de propriétés lors de la gestion des images

  2. Complétez le champ Map de l'inspecteur de propriétés pour donner un nom à l'image réactive que vous allez créer.

  3. Sélectionnez l'outil Zone réactive rectangulaire dans l'inspecteur de propriétés.

    4. Le curseur de la souris se transforme en croix.

  4. Avec le curseur, tracez un rectangle autour des zones de l'image à commenter.

Ces zones rectangulaires sont très pratiques quand il s'agit d'extraire des objets un peu flous ou lointains sur l'image. En revanche, pour des éléments plus nets ou plus importants, mieux vaut utiliser des polygones irréguliers. Ils permettent en effet de définir très précisément une zone réactive :

  1. Sélectionnez l'image sur la page.

  2. Sélectionnez l'outil Zone réactive polygone dans l'inspecteur de propriétés.

    3. Le curseur se transforme en croix.

  3. Cliquez sur le premier point de votre sélection, puis sur le deuxième et ainsi de suite sur l'ensemble des points qui délimiteront la zone réactive.

    4. La zone se forme au fur et à mesure sur l'image.

  4. Sélectionnez l'outil Zone réactive pointeur dans l'inspecteur de propriétés pour valider cette nouvelle zone.

Créez autant de zones réactives que vous le souhaitez sur l'image.



Figure 2 : Des zones réactives rectangulaires et polygonales sur notre image

Sommaire 1 2 3 Création du formulaire