Cahiers Pratiques et Références Cahier Dreamweaver : Atelier 7 Une légende dynamique à l'aide d'un formulaire Tous les articles Dreamweaver Association de l'image et du texte Notre image est prête, notre champ texte aussi. Reste à associer ces deux éléments pour provoquer l'affichage des légendes. Vous vous en doutez, cela passe par la manipulation des comportements. Nous allons en utiliser ici un nouveau : Changer la propriété. Sélectionnez l'image. Dans cette image, sélectionnez une première zone réactive à commenter. Si la zone est bien sélectionnée, les points qui la délimitent apparaissent clairement sur l'image. Choisissez Fenêtre > Comportements pour afficher l'inspecteur de comportements. Cliquez sur le bouton "+" de l'inspecteur de comportements et choisissez Changer la propriété dans la liste des actions disponibles. La boîte de dialogue Changer la propriété s'ouvre. Figure 4 : La boîte de dialogue Changer la propriété Choisissez TextArea dans le champ Type d'objet. Sélectionnez le champ texte que vous avez créé dans la liste Objet nommé. Laissez le champ Propriété sur Value. Complétez le champ Nouvelle valeur avec le texte que vous souhaitez afficher lors du survol de la zone. Une fois ces choix faits, validez-les. Assurez-vous dans l'inspecteur de propriétés que l'action est bien associée à un événement onMouseOver. Si ce n'est pas le cas, utilisez la flèche descendante présente sur la même ligne que l'action que vous venez de définir. Voilà, la manipulation est presque terminée. Reste un petit détail à régler : lorsque le curseur quitte la zone réactive, le champ texte doit redevenir vierge. Pour cela, il vous faut créer un second comportement Changer la propriété et laisser le champ Nouvelle valeur vide. N'oubliez pas d'associer cette nouvelle action à l'événement onMouseOut. Figure 5 : Les comportements une fois définis Définissez ces comportements pour l'ensemble des zones réactives de l'image pour que votre légende se mette en place. Info   Une petite variante ? Un champ de formulaire, ce n'est pas très esthétique. Rien ne vous empêche de reprendre le principe de cet atelier avec des calques. Utilisez alors le comportement Afficher-Masquer le calque.  Création du formulaire 1 2 3 Tous les articles Dreamweaver