Guide d'utilisation Annuler

Application de comportements JavaScript intégrés

Rechercher

Dernière mise à jour le 2 mai 2021

Utilisez cette rubrique pour savoir comment appliquer des comportements JavaScript intégrés dans Adobe Dreamweaver.

Utilisation des comportements intégrés

Les comportements inclus sous Dreamweaver ont été conçus pour fonctionner sur les navigateurs modernes. Les comportements échouent dans les navigateurs plus anciens, sans que l’utilisateur en soit informé.

Remarque :

Les actions de Dreamweaver ont été rédigées avec soin pour fonctionner avec le plus grand nombre de navigateurs possible. Si vous supprimez manuellement le code d’une action de Dreamweaver ou si vous le remplacez par votre propre code, vous risquerez de perdre la compatibilité inter-navigateurs.

Bien que les actions de Dreamweaver aient été rédigées pour accroitre la compatibilité inter-navigateurs, certains navigateurs ne prennent pas du tout en charge JavaScript et de nombreuses personnes désactivent JavaScript sur leur navigateur lorsqu’ils explorent la Toile. Pour optimiser les résultats inter-plates-formes, fournissez d’autres interfaces contenues dans des balises <noscript> afin que votre site reste accessible aux personnes qui n’utilisent pas JavaScript.

Application du comportement Appel JavaScript

Le comportement Appel JavaScript exécute une fonction ou une ligne de code JavaScript personnalisée lorsqu’un événement se produit (vous pouvez rédiger le script vous-même, ou utiliser le code fourni gratuitement dans le cadre de plusieurs bibliothèques de JavaScript sur Internet).

Sélectionnez un objet et choisissez Appel JavaScript dans le menu Ajouter un comportement du panneau Comportements.
Tapez le code JavaScript à exécuter ou le nom de la fonction.

Par exemple, pour créer un bouton Retour, vous pouvez saisir if (history.length > 0)\{history.back()\}. Si vous avez encapsulé votre code dans une fonction, indiquez simplement le nom de la fonction (par exemple, hGoBack()).
Cliquez sur OK et vérifiez que l’événement par défaut est correct.

Application du comportement Changer la propriété

Utilisez le comportement Changer la propriété pour modifier la valeur d’une des propriétés d’un objet (par exemple, la couleur d’arrière-plan d’une balise div ou l’action d’un formulaire).

Remarque :

N’utilisez ce comportement que si vous êtes expert en HTML et en JavaScript.

Sélectionnez un objet et choisissez Changer la propriété dans le menu Ajouter un comportement du panneau Comportements.
Dans le menu Type d’élément, sélectionnez un type d’élément pour afficher tous les éléments nommés de ce type.
Sélectionnez un élément dans le menu ID d’élément.
Choisissez une propriété dans le menu Propriété ou tapez le nom de la propriété dans la zone de texte.
Entrez la nouvelle valeur pour la nouvelle propriété dans la zone Nouvelle valeur.
Cliquez sur OK et vérifiez que l’événement par défaut est correct.

Application du comportement Vérifier le plug-in

Utilisez le comportement Vérifier le plug-in pour envoyer les visiteurs sur des pages différentes selon que le plug-in spécifié est installé ou non. Par exemple, vous pouvez rerouter les visiteurs sur une page s’ils possèdent Shockwave, et sur une autre dans le cas contraire.

Remarque :

Il est impossible de détecter des plug-ins spécifiques dans Microsoft Internet Explorer (IE) à l’aide de JavaScript. Toutefois, si vous sélectionnez les plug-ins Flash ou Director, le code VBScript approprié sera automatiquement ajouté à votre page pour les détecter dans Internet Explorer sous Windows. Il est impossible de détecter les plug-ins dans Internet Explorer sur Mac OS.

Sélectionnez un objet et choisissez Vérifier le plug-in dans le menu Ajouter un comportement du panneau Comportements.
Sélectionnez un plug-in dans le menu Plug-in, ou cliquez sur Entrée et tapez le nom exact du plug-in dans la zone de texte adjacente.

Vous devez utiliser le nom exact du plug-in, tel qu’il apparaît en gras sur la page À propos des plug-ins dans Netscape Navigator (Dans Windows, choisissez la commande Aide > À propos des plug-ins dans le navigateur. Dans Mac OS, choisissez À propos des plug-ins dans le menu Pomme).
Dans la zone de texte Si trouvé, aller à l’URL, spécifiez l’URL destinée aux utilisateurs qui disposent du plug-in.

Si vous indiquez une URL distante, vous devez faire précéder l’adresse www du préfixe http://. Si vous ne renseignez pas la zone, les visiteurs resteront dans la même page.
Dans la zone de texte Sinon, aller à l’URL, indiquez une autre URL pour les visiteurs qui ne disposent pas du plug-in. Si vous ne renseignez pas la zone, les visiteurs resteront dans la même page.
Spécifiez la procédure à suivre si la détection de plug-in n’est pas possible. Par défaut, lorsque la détection est impossible, l’utilisateur est envoyé à l’URL indiquée dans la zone de texte Sinon. Pour que l’utilisateur soit envoyé vers la première URL (Si trouvé), sélectionnez l’option Toujours aller à la première URL si la détection n’est pas possible. Lorsqu’elle est sélectionnée, cette option signifie « que l’utilisateur possède a priori le plug-in, sauf si le navigateur indique explicitement que ce n’est pas le cas ». En général, activez cette option si le contenu du plug-in est un élément essentiel de votre page ; dans le cas contraire, laissez-la désactivée.

Remarque :

Cette option ne concerne qu’Internet Explorer ; Netscape Navigator détecte toujours les plug-ins.
Cliquez sur OK et vérifiez que l’événement par défaut est correct.

Application du comportement Tirer l’élément PA

Le comportement Tirer l’élément PA permet au visiteur de faire glisser un élément à positionnement absolu. Utilisez ce comportement pour créer des puzzles, des contrôles de déplacement et autres éléments mobiles de l’interface.

Vous pouvez spécifier la direction vers laquelle l’utilisateur peut faire glisser l’élément PA (horizontalement, verticalement ou dans toutes les directions), une cible vers laquelle l’utilisateur doit faire glisser l’élément PA, si ce dernier doit être aimanté par la cible ou non lorsqu’il arrive à moins d’un certain nombre de pixels de la cible, l’action à déclencher lorsque l’élément PA touche la cible, etc.

Etant donné que le comportement Tirer l’élément PA doit être appelé avant que le visiteur puisse faire glisser l’élément PA, vous devez l’associer à l’objet body (avec l’événement onLoad).

Choisissez Insertion > Objets mise en forme > Div PA ou cliquez sur le bouton Tracer un div pour un élément PA du panneau Insertion, puis dessinez un div PA dans la vue Création de la fenêtre de document.
Cliquez sur <body> dans le sélecteur de balises situé dans le coin inférieur gauche de la fenêtre de document.
Choisissez Tirer l’élément PA dans le menu Ajouter un comportement du panneau Comportements.

Si l’option Tirer l’élément PA n’est pas disponible, cela signifie probablement qu’un élément PA est sélectionné.
Dans le menu déroulant Elément PA, sélectionnez l’élément PA.
Sélectionnez soit Contraint, soit Libre dans le menu contextuel Mouvement.

Les mouvements sans contrainte sont adaptés aux puzzles et aux autres jeux à base de glisser-déplacer. Pour les contrôles de déplacement et les objets mobiles (tiroirs, rideaux et stores), choisissez un mouvement contraint.
Pour la restriction de mouvement, indiquez les valeurs de déplacement admises (en pixels) dans les zones de texte Haut, Bas, Gauche et Droite.

Ces valeurs sont relatives à la position de départ de l’élément PA. Pour restreindre les déplacements à l’intérieur d’une zone rectangulaire, indiquez des valeurs positives dans les quatre zones de texte. Pour permettre uniquement un mouvement vertical, indiquez des valeurs positives pour Haut et Bas et 0 pour Gauche et Droite. Pour permettre uniquement un mouvement horizontal, indiquez des valeurs positives pour Gauche et Droite et 0 pour Haut et Bas.
Indiquez les coordonnées (exprimées en pixels) de la cible de dépôt dans les zones de texte Gauche et Haut.

La cible de dépôt est le point sur lequel vous voulez que l’utilisateur dépose l’élément PA. Un élément PA est considéré comme ayant atteint la cible de dépôt lorsque ses coordonnées d’origine (en haut à gauche) correspondent aux valeurs indiquées dans les zones de texte Gauche et Haut. Ces coordonnées sont relatives à l’angle supérieur gauche de la fenêtre du navigateur. Cliquez sur Obtenir la position courante pour remplir automatiquement les zones de texte avec les coordonnées actuelles de l’élément PA.
Entrez une valeur (exprimée en pixels) dans la zone de texte Aligner si dans pour déterminer la distance minimale à laquelle le visiteur doit approcher de la cible pour que l’élément PA se place automatiquement sur celle-ci.

Les valeurs importantes permettent à l’utilisateur de trouver plus facilement la cible de dépôt.
Pour des puzzles simples et des défilements d’images, vous pouvez vous en tenir là. Pour définir la poignée de déplacement de l’élément PA, suivre le mouvement de l’élément PA pendant qu’il est déplacé et déclencher une action lorsqu’il est déposé, cliquez sur l’onglet Avancé.
Pour spécifier que l’utilisateur doit cliquer dans une zone particulière de l’élément PA pour pouvoir le déplacer, sélectionnez Zone dans l’élément dans le menu Poignée de déplacement, puis indiquez les coordonnées de l’origine (angle supérieur gauche) de la poignée de déplacement, ainsi que la largeur et la hauteur de celle-ci.

Cette option est utile lorsque l’image insérée à l’intérieur de l’élément PA contient un symbole de déplacement, par exemple une barre de titre ou une poignée de tiroir. N’activez pas cette option si vous voulez que l’utilisateur soit libre de cliquer n’importe où dans l’élément PA pour le déplacer.
Choisissez, parmi les options de la zone En déplaçant, celles que vous désirez utiliser :
- Activez l’option Placer l’élément au premier plan si l’élément PA doit être amené au niveau le plus haut de l’ordre de superposition lors de son déplacement. Si vous activez cette option, utilisez le menu déroulant qui apparaît pour indiquer si l’élément PA doit être laissé au niveau de visibilité le plus élevé ou si sa position d’origine dans l’ordre de superposition doit être rétablie.
- Tapez un code JavaScript ou un nom de fonction (par exemple, monitorAPelement()) dans la zone de texte Appel JavaScript pour que ce code ou cette fonction soit exécuté en boucle pendant le déplacement de l’élément PA. Par exemple, vous pouvez écrire une fonction pour surveiller les coordonnées de l’élément PA et afficher des indications, telles que « Tu brûles » ou « Tu t’éloignes de la cible », dans une zone de texte.
Entrez un code JavaScript ou un nom de fonction (par exemple, evaluateAPelementPos()) dans la deuxième zone de texte Appel JavaScript si vous souhaiter exécuter le code ou la fonction lorsque l’élément PA est déposé. Activez l’option Uniquement si aligné si le code JavaScript indiqué ne doit être exécuté que si l’élément PA a atteint la cible de dépôt.
Cliquez sur OK et vérifiez que l’événement par défaut est correct.

Collecte d’informations sur l’élément PA déplaçable

Lorsque vous associez le comportement Tirer l’élément PA à un objet, Dreamweaver insère la fonction MM_dragLayer() dans la section head de votre document. (La fonction conserve l’ancienne convention d’attribution de nom pour les éléments PA (anciennement, calques) de façon à ce que les calques créés dans les versions précédentes de Dreamweaver restent modifiables.) Cette fonction enregistre l’élément PA comme déplaçable et définit trois propriétés pour chaque élément PA déplaçable, MM_LEFTRIGHT, MM_UPDOWN et MM_SNAPPED, que vous pouvez utiliser dans vos propres fonctions JavaScript pour déterminer les positions horizontale et verticale de l’élément PA et s’il a atteint la cible de dépôt.

Remarque :

Les informations fournies ici sont destinées uniquement aux programmeurs JavaScript expérimentés.

Par exemple, la fonction suivante affiche la valeur de la propriété MM_UPDOWN (la position verticale actuelle de l’élément PA) dans un champ de formulaire appelé curPosField. Les champs de formulaires servent à afficher des informations pouvant être continuellement mises à jour, parce qu’ils sont dynamiques. Ainsi, vous pouvez modifier leur contenu après le chargement de la page.

function getPos(layerId){ 
    var layerRef = document.getElementById(layerId); 
    var curVertPos = layerRef.MM_UPDOWN; 
    document.tracking.curPosField.value = curVertPos; 
}

Au lieu d’afficher la valeur des propriétés MM_UPDOWN ou MM_LEFTRIGHT dans un champ de formulaire, vous pouvez utiliser ces valeurs de différentes manières. Par exemple, vous pouvez écrire une fonction qui affiche un message dans ce champ selon la distance qui reste à parcourir jusqu’à la cible, ou appeler une autre fonction pour afficher ou masquer un élément PA selon la valeur de cette distance.

Il est particulièrement utile de tester la propriété MM_SNAPPED lorsque vous disposez, sur une page, de plusieurs éléments PA qui doivent tous atteindre leur cible pour que l’utilisateur puisse passer à la page ou à la tâche suivante. Par exemple, vous pouvez écrire une fonction qui compte le nombre d’éléments PA ayant la valeur MM_SNAPPED définie sur true et l’appeler chaque fois qu’un élément PA est déposé. Lorsque le nombre d’éléments PA arrivés sur leur cible atteint le nombre désiré, vous pouvez envoyer l’utilisateur à la page suivante ou afficher un message de félicitations.

Application du comportement Atteindre l’URL

Le comportement Atteindre l’URL ouvre une nouvelle page dans la fenêtre en cours ou dans le cadre indiqué. Ce comportement est utile pour modifier d’un seul clic le contenu de deux cadres ou plus

Sélectionnez un objet et choisissez Atteindre l’URL dans le menu Ajouter un comportement du panneau Comportements.
Choisissez une destination pour l’URL dans la liste Ouvrir dans.

La liste Ouvrir dans énumère automatiquement les noms de tous les cadres qui se trouvent dans le jeu de cadres actuel, ainsi que la fenêtre principale. S’il n’y a pas de cadres, cette dernière est la seule option.

Remarque :

Ne donnez pas à vos cadres les noms top, blank, self ou parent, car cela pourrait produire des résultats inattendus. En effet, certains navigateurs peuvent confondre ces noms avec les mots réservés utilisés dans le champ Cible.
Cliquez sur Parcourir pour sélectionner un document à ouvrir ou tapez le nom et le chemin d’accès au fichier recherché dans la zone de texte URL.
Répétez les étapes 2 et 3 pour ouvrir d’autres documents dans d’autres cadres.
Cliquez sur OK et vérifiez que l’événement par défaut est correct.

Application du comportement Menu de reroutage

Lorsque vous créez un menu de reroutage en exécutant la procédure suivante : Insertion > Formulaire > Menu de reroutage, Dreamweaver crée un objet de menu et lui associe le comportement Menu de reroutage (ou Menu de reroutage Aller). En principe, il n’est pas nécessaire d’associer manuellement le comportement Menu de reroutage à un objet.

Vous pouvez modifier un menu de reroutage existant de deux manières différentes :

Vous pouvez modifier et réorganiser les éléments du menu, modifier les fichiers à rerouter et la fenêtre dans laquelle s’ouvrent ces fichiers, en double-cliquant sur un comportement Menu de reroutage existant dans le panneau Comportements.
Vous pouvez modifier les éléments du menu comme vous modifieriez les éléments de n’importe quel menu, en sélectionnant le menu et en utilisant le bouton Valeurs de la liste dans l’inspecteur Propriétés.

Créez un objet Menu de reroutage s’il n’en existe pas déjà dans votre document.
Sélectionnez l’objet et choisissez Menu de reroutage dans le menu Ajouter un comportement du panneau Comportements.
Effectuez les modifications souhaitées dans la boîte de dialogue Menu de reroutage, puis cliquez sur OK.

Application du comportement Menu de reroutage Aller

Le comportement Menu de reroutage Aller est étroitement associé à l’action Menu de reroutage ; il vous permet d’associer un bouton Aller avec un menu de reroutage (pour utiliser ce comportement, vous devez créer au préalable un menu de reroutage dans le document). Un clic sur le bouton Aller ouvre le lien actuellement sélectionné dans le menu de reroutage. En principe, il n’est pas indispensable d’ajouter un bouton Aller à un menu de reroutage : le choix d’un élément de ce dernier provoque en général le chargement d’une nouvelle URL sans aucune intervention supplémentaire. Toutefois, si l’utilisateur choisit l’élément qui est déjà sélectionné dans le menu de reroutage, le reroutage ne se produira pas. En général cela n’a pas d’importance, mais si le menu de reroutage apparaît dans une image et que les éléments du menu assurent la liaison avec des pages dans d’autres images, un bouton Aller est souvent utile, pour permettre aux utilisateurs de choisir à nouveau un élément déjà sélectionné dans le menu de reroutage.

Remarque :

Lorsque vous utilisez un bouton Aller associé à un menu de reroutage, le bouton Aller devient le seul mécanisme permettant à l’utilisateur d’accéder à l’URL associée à la sélection dans le menu. La sélection d’un élément de menu dans le menu de reroutage n’a plus pour effet de rediriger l’utilisateur automatiquement vers une autre page ou un autre cadre.

Sélectionnez un objet qui sera utilisé comme bouton Aller (en général une image) et choisissez Menu de reroutage Aller dans le menu Ajouter un comportement du panneau Comportements.
Dans le menu Choisissez un menu de reroutage, sélectionnez un menu que le bouton Aller activera, puis cliquez sur OK.

Application du comportement Ouvrir la fenêtre Navigateur

Utilisez l’action Ouvrir la fenêtre Navigateur pour ouvrir une page dans une nouvelle fenêtre. Vous pouvez spécifier les propriétés de la nouvelle fenêtre, dont sa taille, ses attributs (redimensionnable ou non, dispose d’une barre de menu ou non, etc.), ainsi que son nom Par exemple, vous pouvez utiliser ce comportement pour ouvrir une image plus grande dans une fenêtre individuelle lorsque l’utilisateur clique sur l’image réduite ; avec ce comportement, vous pouvez adapter la fenêtre à la taille exacte de l’image.

Si vous ne spécifiez aucun attribut pour la fenêtre, elle s’ouvrira avec la taille et les attributs de la fenêtre à partir de laquelle elle a été lancée. Choisir des attributs pour la fenêtre désactive automatiquement tous ceux qui ne sont pas explicitement activés. Par exemple, si vous ne définissez aucun attribut pour la fenêtre, elle peut s’ouvrir en 1024 x 768 pixels et comporter une barre de navigation (affichant les boutons Précédent, Suivant, Démarrage et Actualiser), une barre d’adresse (indiquant l’URL), une barre d’état (en bas, affichant les messages d’état) et une barre de menus (affichant les menus Fichier, Édition, Affichage et d’autres menus). Si vous définissez explicitement une largeur de 640 et une hauteur de 480 pixels, sans aucun autre attribut, la fenêtre s’ouvrira en 640 x 480 pixels, sans aucune barre d’outils.

Sélectionnez un objet et choisissez Ouvrir la fenêtre Navigateur dans le menu Ajouter un comportement du panneau Comportements.
Tapez l’URL à afficher ou cliquez sur Parcourir pour sélectionner un fichier.
Définissez les options pour la largeur et la hauteur de la fenêtre (en pixels) et pour l’incorporation de différentes barres d’outils, barres de défilement, poignées de redimensionnement, etc. Donnez un nom à la fenêtre (n’utilisez pas d’espaces ni de caractères spéciaux) si vous souhaitez qu’elle soit la cible de liens ou qu’elle soit contrôlée en JavaScript.
Cliquez sur OK et vérifiez que l’événement par défaut est correct.

Application du comportement Message contextuel

Le comportement Message contextuel fait apparaître un message d’alerte JavaScript, avec le texte que vous avez spécifié. Comme les alertes JavaScript ne disposent que d’un seul bouton (OK), utilisez ce comportement pour informer l’utilisateur plutôt que pour lui proposer un choix.

Vous pouvez incorporer au texte des appels de fonction, propriétés, variables globales ou autres expressions valides en JavaScript. Pour incorporer une expression JavaScript, placez-la entre des accolades ({}). Pour afficher une accolade, faites-la précéder d’une barre oblique inversée (\{).

Exemple :

The URL for this page is {window.location}, and today is {new Date()}.

Remarque :

Le navigateur contrôle l’aspect de l’alerte. Si vous désirez avoir davantage de contrôle sur l’apparence, pensez à utiliser le comportement Ouvrir la fenêtre Navigateur.

Sélectionnez un objet et choisissez Message contextuel dans le menu Ajouter un comportement du panneau Comportements.
Tapez votre message dans la zone de texte prévue à cet effet.
Cliquez sur OK et vérifiez que l’événement par défaut est correct.

Application du comportement Précharger les images

Le comportement Précharger les images raccourcit le délai d’affichage en mettant en mémoire cache les images qui ne sont pas visibles lors du premier affichage de la page (par exemple, les images qui vont être remplacées par des comportements ou des scripts).

Remarque :

Le comportement Permuter une image précharge automatiquement toutes les images sélectionnées lorsque vous choisissez l’option Précharger les images dans la boîte de dialogue Permuter une image ; il n’est donc pas nécessaire d’ajouter manuellement l’action Précharger les images lorsque vous utilisez l’action Permuter une image.

Sélectionnez un objet et choisissez Précharger les images dans le menu Ajouter un comportement du panneau Comportements.
Cliquez sur Parcourir pour sélectionner un fichier d’image ou tapez le chemin d’accès et le nom du fichier d’une image dans la zone de texte Fichier source des images.
Cliquez sur le bouton Plus (+) en haut de la boîte de dialogue pour ajouter l’image à la liste Précharger les images.
Répétez les étapes 2 et 3 pour les autres images que vous désirez précharger dans la page en cours.
Pour supprimer une image de la liste Précharger les images, sélectionnez-la, puis cliquez sur le bouton Moins (–).
Cliquez sur OK et vérifiez que l’événement par défaut est correct.

Application du comportement Texte d’un cadre

Le comportement Texte d’un cadre permet de définir de façon dynamique le texte d’un cadre, en remplaçant le contenu et le formatage d’un cadre par le contenu indiqué. Ce contenu peut être n’importe quel code source HTML valide. Ce comportement permet d’afficher les informations de façon dynamique.

Bien que le comportement Texte d’un cadre permette de remplacer le formatage d’un cadre, vous pouvez activer l’option Préserver Couleur d’arrière-plan pour conserver les attributs actuels pour l’arrière-plan de la page et la couleur du texte.

Exemple :

The URL for this page is {window.location}, and today is {new Date()}.

Sélectionnez un objet et choisissez Texte > Texte du cadre dans le menu Ajouter un comportement du panneau Comportements.
Dans la boîte de dialogue qui s’affiche, sélectionnez le cadre cible dans le menu Cadre.
Cliquez sur le bouton Reprendre HTML courant pour copier les contenus actuels de la section body du cadre cible.
Entrez un message dans la zone de texte Nouveau HTML.
Cliquez sur OK et vérifiez que l’événement par défaut est correct.

Application du comportement Texte du conteneur

Le comportement Texte du conteneur remplace le contenu et le formatage d’un contenu existant (c’est-à-dire, tout élément pouvant contenir du texte ou d’autres éléments) d’une page par le contenu indiqué. Ce contenu peut être n’importe quel code source valide en HTML.

Exemple :

The URL for this page is {window.location}, and today is {new Date()}.

Sélectionnez un objet et choisissez Texte > Texte du conteneur dans le menu Ajouter un comportement du panneau Comportements.
Dans la boîte de dialogue qui s’affiche, sélectionnez l’élément cible dans le menu Conteneur.
Entrez le nouveau texte ou le nouveau code HTML dans la zone de texte Nouveau HTML.
Cliquez sur OK et vérifiez que l’événement par défaut est correct.

Application du comportement Définir le texte de la barre d’état

Le comportement Définir le texte de la barre d’état affiche un message dans la barre d’état, dans la partie inférieure gauche de la fenêtre du navigateur. Par exemple, vous pouvez utiliser ce comportement pour décrire la destination d’un lien dans la barre d’état, au lieu d’afficher l’URL associée Cependant, il arrive fréquemment que les utilisateurs ne tiennent pas compte des messages de la barre d’état (certains navigateurs ne prennent pas en charge la définition du texte de la barre d’état). Si votre message est important, pensez à l’afficher sous la forme d’un message contextuel ou comme texte d’un élément PA.

Remarque :

Si vous utilisez le comportement Définir le texte de la barre d’état sous Dreamweaver, le texte de la barre d’état du navigateur ne va pas nécessairement changer du fait que certains navigateurs nécessitent des réglages spéciaux lors de la modification du texte de la barre d’état. Par exemple, dans Firefox, vous devez modifier une option Avancée qui permet à JavaScript modifier le texte de la barre d’état. Pour plus de détails, reportez-vous à la documentation de votre navigateur.

Exemple :

The URL for this page is {window.location}, and today is {new Date()}.

Sélectionnez un objet et choisissez Texte > Texte de la barre d’état dans le menu Ajouter un comportement du panneau Comportements.
Dans la boîte de dialogue Définir le texte de la barre d’état, tapez un message dans la zone de texte Message.

Utilisez un message concis. Le navigateur tronquera le message s’il est trop long pour la barre d’état.
Cliquez sur OK et vérifiez que l’événement par défaut est correct.

Application du comportement Texte d’un champ de texte

Le comportement Texte d’un champ de texte remplace le contenu d’un champ de texte de formulaire par le contenu indiqué.

Exemple :

The URL for this page is {window.location}, and today is {new Date()}.

Création d’un champ de texte nommé

Sélectionnez Insertion > Formulaire > Champ de texte.

Si Dreamweaver vous invite à ajouter une balise de formulaire, cliquez sur Oui.
Dans l’inspecteur Propriétés, tapez le nom du champ de texte. Veillez à utiliser un nom unique dans cette page (n’utilisez pas le même nom pour plusieurs éléments appartenant à la même page, même s’ils se trouvent dans des formulaires différents).

Application de l’action Texte d’un champ de texte

Sélectionnez un champ de texte et choisissez Texte > Texte d’un champ de texte dans le menu Ajouter un comportement du panneau Comportements.
Sélectionnez le champ de texte cible dans le menu Champ de texte et entrez votre nouveau texte.
Cliquez sur OK et vérifiez que l’événement par défaut est correct.

Application du comportement Afficher-Masquer les éléments

Le comportement Afficher-Masquer les éléments affiche, masque ou rétablit la visibilité par défaut d’un ou plusieurs éléments de page. Ce comportement permet d’afficher des informations en fonction des interactions de l’utilisateur avec la page. Par exemple, lorsque le pointeur passe sur l’image d’une plante, vous pouvez afficher un élément de page comportant des détails sur le climat idéal de la plante, l’ensoleillement dont elle a besoin, sa taille adulte, etc. Le comportement ne fait qu’afficher ou masquer l’élément pertinent, il ne supprime pas réellement l’élément du flux de la page lorsqu’il est masqué.

Sélectionnez un objet et choisissez Afficher-Masquer les éléments dans le menu Ajouter un comportement du panneau Comportements.

Si l’option Afficher-Masquer les éléments n’est pas disponible, cela signifie probablement qu’un élément PA est sélectionné. Etant donné que les éléments PA n’acceptent pas les événements dans la version 4.0 des deux navigateurs, vous devez choisir un objet différent, tel que la balise <body> ou un lien (<a>).
Dans la liste Eléments, sélectionnez l’élément que vous souhaitez afficher ou masquer, puis cliquez sur Afficher, Masquer ou Restaurer (cette dernière option restaure la visibilité par défaut).
Répétez l’étape 2 pour les autres éléments dont vous voulez modifier la visibilité. Vous pouvez modifier la visibilité de plusieurs éléments avec un seul comportement.
Cliquez sur OK et vérifiez que l’événement par défaut est correct.

Ce comportement a été abandonné depuis Dreamweaver CS5.

Application du comportement Permuter une image

Cette action remplace une image par une autre, en modifiant l’attribut src de la balise <img>. Utilisez ce comportement pour créer des substitutions de boutons et autres effets sur des images (y compris la substitution de plusieurs images à la fois) L’insertion d’une image survolée ajoute automatiquement à votre page un comportement Permuter une image.

Remarque :

État donné que l’attribut src est affecté par ce comportement, l’image de substitution doit en principe avoir les mêmes dimensions (hauteur et largeur) que l’original. Faute de quoi, l’image intervertie apparaîtrait déformée (compactée ou élargie) de façon à s’adapter aux dimensions de l’image d’origine.

Il existe également le comportement Restaurer l’image intervertie qui restaure la dernière interversion d’images à son état antérieur. Il est automatiquement ajouté lorsque vous associez le comportement Permuter une image à un objet ; en principe, si vous avez laissé cette option activée en associant le comportement Permuter une image, vous n’avez pas besoin de l’utiliser manuellement.

Choisissez Insertion > Image ou cliquez sur le bouton Image du panneau Insertion pour insérer une image.
Dans l’inspecteur Propriétés, indiquez un nom pour l’image dans la zone de texte située à l’extrême gauche.

Il n’est pas nécessaire de nommer les images ; elles sont nommées automatiquement lorsque vous associez le comportement à un objet. Toutefois, il vous sera plus facile de distinguer les images proposées dans la boîte de dialogue Permuter une image si vous avez vous-même attribué un nom à ces images.
Répétez les étapes 1 et 2 si vous souhaitez insérer des images supplémentaires.
Sélectionnez un objet (en général, l’image que vous voulez remplacer) et choisissez l’option Permuter une image dans le menu Ajouter un comportement du panneau Comportements.
Sélectionnez l’image dont vous voulez modifier la source dans la liste Images.
Cliquez sur Parcourir pour sélectionner le nouveau fichier d’image ou indiquez son chemin d’accès et son nom de fichier dans la zone de texte Définir la source à.
Répétez les étapes 5 et 6 si vous désirez ajouter d’autres images à modifier. Utilisez la même action Permuter l’image pour toutes les images que vous voulez modifier simultanément ; dans le cas contraire, l’action correspondante Restaurer l’image intervertie ne les restaurerait pas toutes.
Sélectionnez l’option Précharger les images pour mettre en mémoire cache les nouvelles images au moment du chargement de la page.

Cela évite le délai de téléchargement des images lorsqu’un événement déclenche leur apparition.
Cliquez sur OK et vérifiez que l’événement par défaut est correct.

Application du comportement Valider le formulaire

Le comportement Valider le formulaire teste le contenu des champs de texte indiqués pour vérifier que l’utilisateur a entré le type de données correct. Associez ce comportement à des champs de texte individuels à l’aide de l’événement onBlur pour valider ces champs au fur et à mesure que l’utilisateur remplit le formulaire ou associez-le au formulaire à l’aide de l’événement onSubmit pour évaluer divers champs simultanément lorsque l’utilisateur clique sur le bouton d’envoi. L’association de ce comportement à un formulaire empêche l’envoi de formulaires contenant des données non valides.

Pour insérer un formulaire, choisissez Insertion > Formulaire ou cliquez sur le bouton Formulaire du panneau Insertion.
Pour insérer un champ de texte, choisissez Insertion > Formulaire > Champ de texte ou cliquez sur le bouton Champ de texte du panneau Insertion.

Répétez cette étape pour insérer plusieurs champs de texte.
Choisissez une méthode de validation :
- Pour valider les champs individuellement au fur et à mesure que l’utilisateur remplit le formulaire, sélectionnez un champ de texte et choisissez Fenêtre > Comportements.
- Pour valider plusieurs champs lorsque l’utilisateur envoie le formulaire, cliquez sur la balise <form> dans le sélecteur de balises situé dans le coin inférieur gauche de la fenêtre de document, puis choisissez Fenêtre > Comportements.
Sélectionnez Valider le formulaire dans le menu Ajouter un comportement.
Effectuez l’une des opérations suivantes :
- Si vous validez des champs individuellement, sélectionnez dans la liste Champs le même champ que celui que vous avez sélectionné dans la fenêtre de document.
- Si vous validez plusieurs champs à la fois, sélectionnez un champ de texte dans la liste Champs.
Activez l’option Obligatoire si le champ doit obligatoirement contenir des données.
Sélectionnez l’une des options d’acceptation suivantes :

Tout

Vérifie qu’un champ obligatoire contient des données ; ces dernières peuvent être de n’importe quel type.

Adresse électronique

Vérifie que le champ contient un symbole @.

Nombre

Vérifie que le champ contient uniquement des valeurs numériques.

Nombre de

Vérifie que le champ contient une valeur numérique comprise dans la plage indiquée.
Si vous validez plusieurs champs, répétez les étapes 6 et 7 pour tout champ supplémentaire à valider.
Cliquez sur OK.

Si vous validez plusieurs champs lorsque l’utilisateur envoie le formulaire, l’événement onSubmit apparaît automatiquement dans le menu déroulant Evénements.
Si vous validez des champs individuellement, vérifiez que l’événement par défaut est bien onBlur ou onChange. Si ce n’est pas le cas, sélectionnez l’un de ces événements.

Ces deux événements déclenchent le comportement Valider le formulaire dès que l’utilisateur sort du champ concerné. La différence entre ces deux événements est que onBlur est toujours déclenché, que l’utilisateur ait saisi ou non du texte dans le champ, alors que onChange n’est déclenché que si l’utilisateur a modifié le contenu du champ. L’événement onBlur est préférable si le champ est obligatoire.

Autres ressources similaires

Adobe

Recevez de l’aide plus rapidement et plus facilement

Nouvel utilisateur ?

Application de comportements JavaScript intégrés

Utilisation des comportements intégrés

Application du comportement Appel JavaScript

Application du comportement Changer la propriété

Application du comportement Vérifier le plug-in

Application du comportement Tirer l’élément PA

Collecte d’informations sur l’élément PA déplaçable

Application du comportement Atteindre l’URL

Application du comportement Menu de reroutage

Application du comportement Menu de reroutage Aller

Application du comportement Ouvrir la fenêtre Navigateur

Application du comportement Message contextuel

Application du comportement Précharger les images

Application du comportement Texte d’un cadre

Application du comportement Texte du conteneur

Application du comportement Définir le texte de la barre d’état

Application du comportement Texte d’un champ de texte

Création d’un champ de texte nommé

Application de l’action Texte d’un champ de texte

Application du comportement Afficher-Masquer les éléments

Application du comportement Permuter une image

Application du comportement Valider le formulaire

Autres ressources similaires

Recevez de l’aide plus rapidement et plus facilement

Interroger la communauté

En savoir plus