|
(980 mots dans ce texte ) -
lu : 829 Fois
 Dans ce tutorial, nous allons comment créer un RollOver à distance (c'est à dire autre part que sur la sélection) avec Dreamweaver. Pour l'exemple, j'ai chois la carte de la France sur laquelle on déplace la souris. La région survolée permettra l'affichage d'un texte (ou une image) dans un cadre à droite de la carte et le fait de cliquer dessus permettra d'aller à la page désirée.
Vous désirez voir l'ensemble fini? (Survolez la carte avec votre souris). Alors cliquez ICI.
Après avoir placé votre image dans un tableau à l'endroit désiré de votre page, il nous faut créer des zones de survol et leurs calques associés.
Sélectionnez votre image, puis cliquez sur l'icône Calque  et placez votre calque à l'endroit désiré. Ici son emplacement sera dans le cadre bleu.
Dans la palette Propriétés donnez lui un nom, comme cela vous vous y retrouverez plus facilement. Attention, le nom du calque ne doit pas contenir d'espaces ou de caractères spéciaux.
Sélectionnez votre calque et placez-y votre texte ou image. Vous pouvez placer un tableau à l'intérieur du calque si le besoin s'en ferait sentir.
Notre calque et son contenu sont maintenant crées. Si vous faites un essai, vous remarquerez que le calque s'affiche même si l'on ne passe pas sur les Vosges. Il nous faut maintenant dire à Dreamweaver quand il faut qu'il l'affiche et quand il doit l'enlever.
Cliquez sur l'image de la carte et dans la palette des Propriétés, sélectionnez la forme de la zone que vous allez créer.
Personnellement, j'ai choisi le polygone qui correspond le plus. Effectuez le tour de la zone en y plaçant quelques points.
Dans la palette Propriétés et dans le champ Lien, inscrivez l'adresse de la page qui doit s'ouvrir lors d'un clic de la souris. Choisissez également si c'est le cas, la frame de destination dans la champ Cible.
Sélectionnez l'onglet Comportements sur la palette flottante (F8 pour la faire apparaître). Cliquez sur le + et choisissez dans le menu déroulant Afficher-Masquer les calques.
Dans la boite de dialogue qui apparaît, ce que l'on désire c'est faire apparaître le calque lors d'un survol de la souris, choisissez donc Afficher.
Cliquez sur Ok. Dans la palette Comportement, l'action par défaut est OnClick, nous désirons le survol de la souris, c'est à dire OnMouseOver. Cliquez sur la petite flèche noire à droite de Onclick et choisissez dans la liste du menu déroulant OnMouseOver.
Si vous faites l'essai, le calque est toujours affiché avant de survoler la zone, c'est normal car nous l'avons pas encore caché. Pour cela, faites apparaître la palette calques (F11).
Vous devriez y voir un calque, le votre. Sélectionnez le. A chaque fois que vous cliquerez dessus, vous remarquerez que l'oeil qui se trouve à sa gauche change d'état. Choisissez l'état ou l'oeil est fermé qui correspond à Hidden dans le champ Visibilité de la palette Propriétés.
Enregistrez votre page et effectuez un essai dans le navigateur (F12). Vous devriez maintenant lors d'un survol de la souris sur les Vosges voir apparaître le calque et lors d'un clic sur cette même zone accéder à la page désirée. Lorsque nous sortons de la zone, vous remarquerez que le texte reste. Pour effacer le texte lors de la sortie de la zone, retournez sur la palette Comportements, après avoir sélectionné votre zone (la zone Vosges) et cliquez sur le +. Choisissez dans le menu déroulant Afficher-Masqer les calques. Dans la boîte de dialogue qui apparaît, sélectionnez Masquer pour votre calque (le calque 1).
Cliquez ensuite sur la petite flèche noire à droite de l'action (par défaut OnClick) et choisissez dans le menu déroulant l'action OnMouseOut, c'est à dire lors de la sortie de la zone.
Refaites un essai. Lors du survol de la zone, vous devriez voir apparaître le texte, et lors de la sortie de la zone, ce texte disparaît.
Voila, pour les autres zones, c'est exactement les mêmes opérations qu'il faudra effectuer, c'est à dire créer un calque au même endroit, créer la zone qui lui sera affectée et définir ensuite si c'est une entrée de la zone (OnMouveOver) dans ce cas, on affichera le calque correspondant ou si c'est une sortie de la zone (OnMouseOut) et dans ce cas, on masquera le calque concerné. Si vous désirez des clics sur les zones, n'oubliez pas de mentionner l'adresse de la page dans le champ Lien ainsi que la frame de destination si votre site en contient.
N'oubliez pas de renommer vos calques, cela vous sera plus facile par la suite de les retrouver. Vous pouvez par la suite afficher ou masquer plusieurs calques en même temps et mélanger l'ensemble.
Retour à la sous-rubrique :
Autres publications de la sous-rubrique : | 
