Sélectionnez un élément sur la page, tel qu'une image ou un lien.
Dernière mise à jour le
27 avr. 2021
Utilisez les comportements JavaScript dans Adobe Dreamweaver pour placer du code JavaScript dans les documents afin que les visiteurs puissent modifier une page web ou lancer certaines tâches.
Les comportements Adobe Dreamweaver placent du code JavaScript dans des documents de façon à ce que les visiteurs puissent modifier une page web de différentes façons ou lancer certaines tâches. Un comportement est la combinaison d’un événement et d’une action déclenchée par cet événement. Dans le panneau Comportements, vous pouvez ajouter un comportement à une page en spécifiant une action, puis l’événement qui déclenche cette action.
Annotation
Le code de comportement est du code JavaScript côté client ; c'est-à-dire qu'il s'exécute dans les navigateurs, et non sur les serveurs.
Les événements sont, en fait, des messages générés par les navigateurs indiquant qu'un visiteur de votre page a fait quelque chose. Par exemple, lorsqu'un visiteur déplace le pointeur sur un lien, le navigateur génère un événement onMouseOver pour ce lien ; le navigateur vérifie ensuite s'il doit appeler du code JavaScript (spécifié dans la page affichée) en réponse. Différents événements sont définis pour différents éléments de page ; par exemple, dans la plupart des navigateurs onMouseOver et onClick sont des événements associés aux liens, tandis que onLoad est un événement associé aux images et à la section body du document.
Une action est du code JavaScript pré-écrit permettant d'effectuer une tâche, comme ouvrir une fenêtre du navigateur, afficher ou masquer un élément AP, lire un son ou arrêter un film Adobe Shockwave.Les actions fournies avec Dreamweaver offrent une compatibilité maximale entre navigateurs.
Après avoir attaché un comportement à un élément de page, le comportement appelle l'action (code JavaScript) associée à un événement chaque fois que cet événement se produit pour cet élément. (Les événements que vous pouvez utiliser pour déclencher une action donnée varient d'un navigateur à l'autre.) Par exemple, si vous attachez l'action Message contextuel à un lien et spécifiez qu'elle sera déclenchée par l'événement onMouseOver, alors votre message apparaît chaque fois que quelqu'un place le pointeur sur ce lien.
Un seul événement peut déclencher plusieurs actions différentes, et vous pouvez spécifier l'ordre dans lequel ces actions se produisent.
Dreamweaver fournit environ deux douzaines d'actions ; des actions supplémentaires peuvent être trouvées sur le site web Exchange à l'adresse www.adobe.com/go/dreamweaver_exchange ainsi que sur des sites de développeurs tiers. Vous pouvez écrire vos propres actions si vous maîtrisez JavaScript.
Annotation
Les termes comportement et action appartiennent à la terminologie de Dreamweaver et non à la terminologie HTML. Du point de vue du navigateur, une action est comme tout autre fragment de code JavaScript.
Présentation du panneau Comportements
Vous utilisez le panneau Comportements (Fenêtre > Comportements) pour associer des comportements aux éléments de page (plus spécifiquement aux balises) et pour modifier les paramètres de comportements précédemment associés.
Les comportements qui ont déjà été associés à l'élément de page actuellement sélectionné apparaissent dans la liste des comportements (la zone principale du panneau), répertoriés par ordre alphabétique selon l'événement.Si plusieurs actions sont listées pour le même événement, elles seront exécutées dans l'ordre dans lequel elles apparaissent sur la liste. Si aucun comportement n'apparaît dans la liste des comportements, aucun comportement n'a été attaché à l'élément actuellement sélectionné.
Le panneau Comportements comprend les options suivantes :
Afficher les événements définis
Affiche uniquement les événements qui ont été attachés au document actuel. Les événements sont organisés en catégorie client et serveur. Les événements de chaque catégorie se trouvent dans une liste que vous pouvez réduire. Afficher les événements définis est la vue par défaut.
Afficher tous les événements
Affiche une liste alphabétique de tous les événements d’une catégorie donnée.
Ajouter un comportement (+)
Affiche un menu d'actions qui peuvent être attachées à l'élément actuellement sélectionné. Lorsque vous sélectionnez une action dans cette liste, une boîte de dialogue apparaît dans laquelle vous pouvez spécifier les paramètres de l'action. Si toutes les actions sont grisées, aucun événement ne peut être généré par l'élément sélectionné.
Supprimer un événement (–)
Supprime l’action et l’événement sélectionnés de la liste de comportements.
Boutons fléchés Haut et Bas
Déplace l'action sélectionnée vers le haut ou vers le bas dans la liste des comportements pour un événement particulier. Vous pouvez modifier l'ordre des actions uniquement pour un événement particulier : par exemple, vous pouvez modifier l'ordre dans lequel plusieurs actions se produisent pour l'événement onLoad, mais toutes les actions onLoad restent regroupées dans la liste des comportements. Les boutons fléchés sont désactivés pour les actions qui ne peuvent pas être déplacées vers le haut ou vers le bas dans la liste.
Evénements
Affiche un menu déroulant, visible uniquement lorsqu’un événement est sélectionné, de tous les événements qui peuvent déclencher l’action (ce menu s’affiche lorsque vous cliquez sur la touche fléchée située en face du nom de l’événement sélectionné). Différents événements s’affichent, selon l’objet sélectionné. Si les événements attendus n’apparaissent pas, assurez-vous d’avoir sélectionné le bon élément de page ou la bonne balise. (Pour sélectionner une balise spécifique, utilisez le sélecteur de balises situé dans le coin inférieur gauche de la fenêtre de document.)
Annotation
Les noms d’événement entre parenthèses sont disponibles uniquement pour les liens. En choisissant l’un de ces noms d’événement, vous ajoutez automatiquement un lien nul à l’élément sur la page sélectionnée et vous associez le comportement à ce lien et non à l’élément lui-même. Le lien nul est défini sous la forme href="javascript:;" dans le code HTML.
À propos des événements
Chaque navigateur fournit un ensemble d'événements que vous pouvez associer aux actions répertoriées dans le menu Actions (+) du panneau Comportements. Lorsqu'un visiteur de votre page web interagit avec la page (par exemple, en cliquant sur une image), le navigateur génère des événements ; ces événements peuvent être utilisés pour appeler des fonctions JavaScript qui effectuent une action. Dreamweaver fournit de nombreuses actions courantes que vous pouvez déclencher avec ces événements.
Pour obtenir les noms et descriptions des événements fournis par chaque navigateur, consultez le Centre d'assistance Dreamweaver à l'adresse www.adobe.com/go/dreamweaver_support.
Différents événements apparaissent dans le menu Événements selon l'objet sélectionné. Pour découvrir quels événements un navigateur donné prend en charge pour un élément de page donné, insérez l'élément de page dans votre document et attachez un comportement à celui-ci, puis regardez le menu Événements dans le panneau Comportements. (Par défaut, les événements proviennent de la liste d'événements HTML 4.01 et sont pris en charge par la plupart des navigateurs modernes.) Les événements peuvent être désactivés (grisés) si les objets concernés n'existent pas encore sur la page ou si l'objet sélectionné ne peut pas recevoir d'événements. Si les événements attendus n'apparaissent pas, assurez-vous que l'objet correct est sélectionné.
Si vous attachez un comportement à une image, certains événements (tels que onMouseOver) apparaissent entre parenthèses. Ces événements ne sont disponibles que pour les liens. Lorsque vous sélectionnez l'un d'eux, Dreamweaver entoure l'image d'une balise <a> pour définir un lien nul. Le lien nul est représenté par javascript:; dans la zone Lien de l'inspecteur de propriétés. Vous pouvez modifier la valeur du lien si vous voulez le transformer en lien réel vers une autre page, mais si vous supprimez le lien JavaScript sans le remplacer par un autre lien, vous supprimerez le comportement.
Pour voir quelles balises vous pouvez utiliser avec un événement donné dans un navigateur donné, recherchez l'événement dans l'un des fichiers du dossier Dreamweaver/Configuration/Behaviors/Events.
Application d’un comportement
Vous pouvez attacher des comportements à l'ensemble du document (c'est-à-dire à la balise <body>) ou à des liens, des images, des éléments de formulaire et plusieurs autres éléments HTML.
Le navigateur cible que vous sélectionnez détermine quels événements sont pris en charge pour un élément donné.
Vous pouvez spécifier plusieurs actions pour chaque événement. Les actions se produisent dans l'ordre dans lequel elles sont répertoriées dans la colonne Actions du panneau Comportements, mais vous pouvez modifier cet ordre.
Pour attacher un comportement à toute la page, cliquez sur la balise <body> dans le sélecteur de balises situé dans le coin inférieur gauche de la fenêtre Document.
Choisissez Fenêtre > Comportements.
Cliquez sur le bouton Plus (+) et sélectionnez une action dans le
menu Ajouter un comportement.
Vous ne pouvez pas choisir les actions qui apparaissent en grisé dans le menu. Elles peuvent être grisées car un objet requis n'existe pas dans le document actuel.Par exemple, l'action Contrôler Shockwave ou SWF est grisée si le document ne contient aucun fichier Shockwave ou SWF.
Lorsque vous sélectionnez une action, une boîte de dialogue apparaît, affichant les paramètres et les instructions pour l'action.
Saisissez les paramètres pour l’action, puis cliquez sur OK.
Toutes les actions proposées sous Dreamweaver fonctionnent dans les navigateurs modernes. Certaines actions ne fonctionnent pas dans les navigateurs plus anciens, mais elles n’entraîneront pas d’erreurs.
Annotation
Les éléments cibles doivent posséder un ID unique. Par exemple, si vous souhaitez appliquer le comportement Permuter une image à une image, cette image doit avoir un ID. Si vous n’avez pas spécifié d’ID pour l’élément, Dreamweaver le fait automatiquement à votre place.
L'événement par défaut pour déclencher l'action apparaît dans la colonne Événements.Si ce n'est pas le déclencheur d'événement souhaité, sélectionnez
un autre événement dans le menu contextuel Événements. (Pour ouvrir le menu Événements, sélectionnez un événement ou une action dans le panneau Comportements, puis cliquez sur la flèche noire pointant vers le bas qui apparaît entre le nom de l'événement et le nom de l'action.)
Modification ou suppression d’un comportement
Après avoir associé un comportement, vous pouvez modifier l'événement qui déclenche l'action, ajouter ou supprimer des actions, et modifier les paramètres des actions.
Sélectionnez un objet auquel un comportement a été associé.
Choisissez Fenêtre > Comportements.
Effectuez les modifications voulues :
Pour modifier les paramètres d'une action, double-cliquez sur son nom, ou sélectionnez-la et appuyez sur Entrée (Windows) ou Retour (Macintosh) ; puis modifiez les paramètres dans la boîte de dialogue et cliquez sur OK.
Pour modifier l'ordre des actions pour un événement donné, sélectionnez une action et cliquez sur la flèche Haut ou Bas. Vous pouvez également sélectionner l'action et la couper-coller à l'emplacement souhaité parmi les autres actions.
Pour supprimer un comportement, sélectionnez-le et cliquez sur le bouton Moins (–) ou appuyez sur Supprimer.
Mise à jour d’un comportement
Sélectionnez un élément auquel le comportement
est associé.
Choisissez Fenêtre > Comportements et double-cliquez
sur le comportement.
Effectuez vos modifications et cliquez sur OK dans la boîte de dialogue
du comportement.
Toutes les occurrences de ce comportement sont actualisées. Si d'autres pages de votre site ont ce comportement, vous devez les mettre à jour page par page.
Téléchargez et installez des comportements tiers
De nombreuses extensions sont disponibles sur le site web Exchange for Dreamweaver (www.adobe.com/go/dreamweaver_exchange).
Choisissez Fenêtre > Comportements et
sélectionnez Obtenir plus de comportements dans le menu Ajouter un comportement.
Votre navigateur principal s’ouvre sur le site d’Exchange
Localisez les progiciels.
Téléchargez et installez le progiciel d’extension souhaité.
Pour plus d'informations, consultez Ajouter et gérer des extensions dans Dreamweaver.
Créez de magnifiques sites web dans Dreamweaver
Concevez, codez et gérez des sites web dynamiques dans un puissant outil tout-en-un.
