• Déplacement de calque

1- Choisissez Insertion > Calque, ou cliquez sur le bouton Calque de la palette d'objets et dessinez un calque dans la fenêtre du document.

2- Désélectionnez le calque en cliquant en-dehors de celui-ci dans la fenêtre du document.

3- Ouvrez l'inspecteur de comportements.

4- Cliquez sur le bouton + (signe plus) et choisissez l'action Déplacement de calque dans le menu déroulant Actions.
Si cette action n'est pas disponible, un calque est probablement sélectionné. Comme les calques ne prennent pas en compte les événements dans Netscape Navigator 4.0, vous devez sélectionner un autre objet - par exemple la balise BODY ou un lien (balise A) -, ou remplacer le navigateur cible par IE 4.0 dans le menu déroulants Evénements pour.

5- Dans le menu déroulant Calque, sélectionnez le calque que vous voulez rendre déplaçable.

6- Dans le menu déroulant Mouvement, sélectionnez Contraint ou Sans contrainte.
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.

7- Pour la restriction de mouvement, indiquez les valeurs de déplacement admises (en pixels) dans les champs Haut, Bas, Gauche et Droite.
Ces valeurs sont relatives à la position de départ du calque. Pour contraindre un mouvement au sein d'une zone rectangulaire, indiquez des valeurs positives dans les quatre champs. 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.

8- Indiquez les coordonnées (exprimées en pixels) de la cible de dépôt dans les champs Gauche et Haut.
La cible de dépôt est le point sur lequel l'utilisateur doit "déposer" le calque. Un calque 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 champs 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 champs avec les coordonnées actuelles du calque.

9- Indiquez une valeur (exprimée en pixels) dans le champ Aligner si dans pour déterminer la distance minimale à laquelle l'utilisateur doit approcher le calque de la cible pour que le calque soit aimantée par celle-ci.
Les valeurs importantes permettent à l'utilisateur de trouver plus facilement la cible de dépôt.

10- 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 du calque, suivre le mouvement du calque pendant qu'il est déplacé et déclencher une action lorsqu'il est déposé, cliquez sur l'onglet Avancé.

11- Pour spécifier que l'utilisateur doit cliquer dans une zone particulière du calque pour pouvoir le déplacer, choisissez Zone dans le calque dans le menu déroulant 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 du calque 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 le calque pour le déplacer.

12- Choisissez, parmi les options de la zone En déplaçant, celle que vous désirez utiliser :
Activez l'option Placer le calque au premier plan, puis si le calque doit être amené au niveau le plus haut de l'ordre de superposition (Index Z) lors de son déplacement. Si vous activez cette option, utilisez le menu déroulant qui la suit pour indiquer si le calque, après avoir été "déposé", 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, surveilleCalque()) dans le champ Appel JavaScript pour que ce code ou cette fonction soit exécuté en boucle pendant le déplacement du calque. Par exemple, vous pouvez écrire une fonction pour surveiller les coordonnées du calque et afficher des indications, comme "tu brûles" ou "tu t'éloignes de la cible", dans un champ texte. Voir "Collecte d'informations sur le calque déplaçable".

13- Indiquez un code JavaScript ou un nom de fonction (par exemple, evaluePosCalque()) dans le second champ Appel JavaScript. Le code ou la fonction sera exécuté lorsque le calque sera déposé. Activez l'option Uniquement si aligné si le code JavaScript indiqué ne doit être exécuté que si le calque a atteint la cible de dépôt.

14- Cliquez sur OK.

15- Vérifiez que l'événement par défaut est bien l'événement désiré.

Si ce n'est pas le cas, sélectionnez-en un autre dans le menu déroulant. Si les événements désirés n'apparaissent pas dans la liste, changez de navigateur cible dans le menu déroulant Evénements pour. N'oubliez pas que les calques ne sont pas pris en charge par la version 3.0 des navigateurs.Remarque : Vous ne pouvez pas associer l'action Déplacement de calque à un objet avec les événements onMouseDown ou onClick.
Collecte d'informations sur le calque déplaçable
Lorsque vous associez l'action Déplacement de calque à un objet, Dreamweaver insère la fonction MM_dragLayer() dans la section d'en-tête (HEAD) de votre document. Cette fonction enregistre le calque comme déplaçable, et définit trois propriétés pour chaque calque mobile - MM_LEFTRIGHT, MM_UPDOWN et MM_SNAPPED, que vous pouvez utiliser dans vos propres fonctions JavaScript pour déterminer la position horizontale et la position verticale actuelles du calque, et s'il a atteint la cible.
Par exemple, la fonction suivante affiche la valeur de la propriété MM_UPDOWN (la position verticale courante du calque) 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 - vous pouvez modifier leur contenu après le chargement de la page - dans Netscape Navigator et Microsoft Internet Explorer.) fonction getPos(containingLayer,nestedLayer){
var layerRef = MM_findObj(layername);
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 é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 calque selon la valeur de cette distance. L'utilisation de la valeur de MM_UPDOWN ou MM_LEFTRIGHT n'est limitée que par votre imagination... et vos compétences en JavaScript.
Il est particulièrement utile de tester la propriété MM_SNAPPED lorsque vous disposez sur une page de plusieurs calques 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 de calques ayant la valeur MM_SNAPPED à TRUE, et l'appeler à chaque fois qu'un calque est déposé. Lorsque le nombre de calques 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.
Si vous avez associé l'action Déplacement de calque à des liens placés au sein de plusieurs calques à l'aide de l'événement onMouseOver, vous devrez modifier légèrement la fonction MM_dragLayer() pour éviter que la propriété MM_SNAPPED d'un calque aligné repasse à FALSE lorsqu'il est survolé par la souris. (Cela peut se produire si vous avez utilisé l'action Déplacement de calque pour créer un puzzle de photos, car la souris survolera probablement des pièces déjà alignées lors du positionnement des autres) La fonction MM_dragLayer() n'interdit pas ce comportement, car il est parfois souhaitable (par exemple si vous désirez établir plusieurs cibles pour un seul calque).

• Pour éviter le ré-enregistrement de calques alignés

1- Choisissez Edition > Rechercher.

2- Sélectionnez Source HTML dans le menu déroulant Rechercher.

3- Tapez (!curDrag) dans le champ texte adjacent.

4- Cliquez sur Rechercher suivant.
Cliquez sur Oui si Dreamweaver vous demande si vous voulez continuer la recherche depuis le début du document. Dreamweaver trouve l'instruction :if (!curDrag) return false ;

5- Fermez la boîte de dialogue, puis modifiez l'instruction dans l'inspecteur HTML pour qu'elle affiche :if (!curDrag || curDrag.MM_SNAPPED != null) return false ;
Les deux barres verticales (||) signifient "ou", et curDrag est une variable qui représente le calque qui a été enregistré comme déplaçable. En français, cette instruction signifie "si curDrag n'est pas un objet, ou s'il a déjà la valeur MM_SNAPPED, ce n'est pas la peine d'exécuter le reste de la fonction".