|
Page 2 sur 4 En sélectionnant tous les calques, vous devez obtenir ceci :  Nous allons maintenant rattacher les rubriques du menu principal à leur calque respectif en utilisant notre première extension qui va nous permettre de l'afficher au passage de la souris sur la rubrique, Auto Layers. Sélectionnons le premier lien, Dreamweaver. Allons dans le panneau Inspecteur de balise, onglet Comportements > Studio 7 > Auto Layers. La fenêtre Auto Layers s’ouvre, sélectionnons le calque correspondant à la rubrique Dreamweaver,"navDreamweaver" puis cliquons sur Show Layers (montrer le calque). La mention Show apparaît à côté du calque. Puis OK. Faire la même chose pour les rubriques Flash et Forum et leur calque respectif. Par défaut, l’évènement appliqué à l’apparition du calque est OnClick. Changeons-le en cliquant sur la flèche entre l’évènement et l’action pour faire dérouler la liste d’évènement et choisir OnMouseOver.  Une fois le calque affiché, nous devons le cacher de nouveau. En effet, testons, si nous passons la souris sur le calque et que nous survolons ensuite la page, le calque reste visible. Sélectionnons la balise body dans le sélecteur de balise (tous vos calques apparaissent à l'écran) puis dans le panneau Inspecteur de balise, onglet Comportements > Studio V > Auto Hide Layers.  Sélectionnons AutoHide pour tous les calques, sauf bien sûr le navMenu qui doit rester afficher, puis OK. Nous allons encapsuler les calques des rubriques dans le calque du navMenu, puis le calque navMenu dans un bloc Content. Pour cela, il nous suffit de déplacer la balise de fermeture du navMenu afin d'englober toutes les propriétés des calques et de créer un bloc Content (<div id="content"></div>) comme tel : <div id="content"> <div id="navMenu" style="position:absolute; width:130px; height:54px; z-index:1; left: 10px; top: 13px; background-color: #FFFFFF; layer-background-color: #FFFFFF;"> <p><a href="javascript:;" onmouseover="P7_autoLayers(0,'navDreamweaver')">Dreamweaver</a><br / > <a href="javascript:;" onmouseover="P7_autoLayers(0,'navFlash')">Flash</a><br / > <a href="javascript:;" onmouseover="P7_autoLayers(0,'navForum')">Forum </a> </p> <div id="navDreamweaver" style="position:absolute; width:200px; height:100px; z-index:2; left: 150px; top: 10px; visibility: hidden; background-color: #00FF66; layer-background-color: #00FF66; "> </div> <div id="navFlash" style="position:absolute; width:200px; height:100px; z-index:3; left: 175px; top: 20px; visibility: hidden; background-color: #FF3300; layer-background-color: #FF3300;"> </div> <div id="navForum" style="position:absolute; width:200px; height:100px; z-index:4; left: 200px; top: 30px; visibility: hidden; background-color: #CCCCCC; layer-background-color: #CCCCCC;"> </div> </div> </div> Dans le panneau Création, onglet Calques, vous obtenez ceci :  Dernière étape pour nos calques : les fixer. Pour cela, nous allons appliquer l'extension Netscape/Opera resize Fix : Commandes > Dazdezines > Netscape/Opera resize Fix. Enregistrons la page et testons.
|