Étape 1 : La page de départ.

Pour arriver au résultat final, nous prendrons comme exemple le site www.espace4x4.com sur lequel j'ai travaillé, mais la technique est applicable quel que soit le site. La situation de départ est la suivante : la page de menu est batie par plusieurs calques superposés contenant des images ( crées sous Photoshop ), un calque de fond ( le désert avec le parcours en pointillé ) sur lequel sont découpées des zones cliquables ( voir plus loin ), 3 calques de "rollover" ( cadres rouges ), un calque image ( flêche verte ).
...La zone de travail sera la partie ci contre : nous allons ajouter un sous menu dont l'affichage sera déclencher par le survol du bouton rond ou du texte.

Étape 2 : Préparation.

Détaillons un peu la construction de ces deux éléments :
- Le bouton rond est une image survolée ( rollover ) qui est crée par l'outil correspondant sur la palette Outils. Il s'agit tout simplement d'une association de 2 images, la 1ère est fixe et la 2ème s'affiche à sa place lors du survol par la souris. Vous en trouvez plein sur MikeGraphic.
- Le texte " catalogue " est une simple image comportant deux impératifs : 1/ avoir un fond qui se coordonne parfaitement avec l'image derrière elle. 2/ être assez haute pour permettre à l'image déroulante d'en recouvrir une partie, pour ne pas avoir de rupture entre les deux. Vous comprendrez pourquoi par la suite.

 

Étape 3 : Création du calque.

Insérez maintenant un calque sous les deux images de l'étape 2. Cette manipulation va vous créer une balise < div > dans le code HTML. Nous l'appelerons " option "

Étape 4 : Insertion de l'image.

Tout l'intérêt de cette technique est là : permettre d'insérer une image en tant que menu déroulant.
Cette image est tout d'abord crée sous Photoshop, c'est un montage de photos combiné à du texte et mis en valeur par un effet de calque.
Mettre un texte en tant qu'image comporte un avantage non négligeable : cela ne vous limite pas dans le choix des polices puisqu'il est interprété comme une image sous Dream et Explorer.

Étape 5 : Découpage des zones cliquables.

Chaque ligne renvoyant à une option il est nécessaire de créer des liens dans cette image.
Sélectionnez là et servez vous du découpage rectangulaire de la palette Propriétés.

Étape 6 : Les liens.

En sélectionnant tour à tour chaque zone ( flêche noire de la palette Propriétés ), indiquez dans le champ Liens ( Links ) de celle-ci le chemin d'accés à la page HTML voulue ainsi que la Cible ( Target ) le cas échéant.

Étape 7 : Rendre le calque invisible.

Un menu déroulant déclenché par le survol d'un bouton ne doit bien sûr pas apparaitre au chargement de la page. Pour cela il suffit de le rendre invisible dans la palette Calques ( Layers ).
Pour cela placez vous sur votre calque dans la palette et cliquez sur la partie destinée à l'affichage jusqu'à faire apparaitre l'oeil fermé. Cet état Caché ( Hidden ) est alors repris dans la palette Propriétés.

Votre menu ressemble alors à ça.

Étape 8 : Ajout d'un comportement.

Pour déclencher l'affichage du calque, il vous faut ajouter un Comportement ( Behavior ) au texte " catalogue " et au bouton rond.
Pour cela, sélectionnez SON CALQUE et dans la palette Comportements appelez l'option " Afficher - Masquer les calques " ( Show - Hide Layers ).

Dans la boîte de dialogue sélectionnez le calque "option ", cliquez sur Afficher ( Show ) et validez.

Par défaut, l'affichage se fait onClick ( ces comportements sont tous en anglais ), faites dérouler les options pour choisir onMouseOver ( au survol par la souris ).

Étape 9 : Masquer le calque.

Afficher c'est bien, encore faut il masquer lorsque la souris a terminé son survol. Pour réaliser cette opération rappelez vous bien qu'il est nécessaire d'avoir un calque de fond contenant lui aussi une image ( ici le desert avec la piste ).
.
Procédez comme précédemment pour l'affichage, à la différence qu'il vous faut choisir Masquer ( Hide ) dans la boîte de dialogue.
Au survol du fond, l'image affichée disparaitra. Voilà pourquoi il était nécessaire de la faire chevaucher légérement les images de déclenchement : pour ne pas passer sur le fond en essayant d'atteindre les options.