Un problème récurrent au sujet de l’utilisation des calques est le problème du positionnement par rapport à des éléments tels que des images, dans un document utilisant des tableaux définis en pourcentage, en cas de résolutions différentes de l’écran ayant servi à la mise en page ou en cas de redimensionnement de la fenêtre du navigateur.
L’extension Snap Layers, disponible sur l’excellent site de Project Seven, permet de contourner ces problèmes, nous allons voir ici comment l’utiliser (reportez-vous au tutorial Introduction aux extensions pour savoir comment installer et utiliser les extensions).
Placement des images
On crée tout d’abord une interface, avec un tableau de trois lignes et deux colonnes, faisant 100% de largeur. Jj’ai défini des marges de 20 pixels dans le document, afin que le tableau ne colle pas aux bords du document.
Dans les colonnes de droite du tableau viennent se placer trois boutons, faisant 135 * 30 pixels et se nommant bouton_1.gif, bouton_2.gif et bouton_3.gif.
Dans le panneau Propriétés on nomme ces boutons, (boutonUn, boutonDeux, boutonTrois) afin de leur donner un identifiant unique, pas d’espaces ni de caractères accentués.
On en profite pour créer un lien virtuel, en tapant dans le champ Lien javascript:; (javascript deux points point virgule), lien qui nous permettra d’afficher les calques sur un évenement OnMouseOver.
Placement des calques
On définit ensuite trois calques, ayant pour noms, layerUn, layerDeux, layerTrois, d’une largeur de 150 pixels, hauteur indéfinie, visibilité cachée et de couleurs différentes, afin de bien les différencier.
L’interface des calques et des boutons dans le document
Ces calques peuvent être placés à n’importe quel endroit du document, le but étant de les faire apparaitre par rapport aux coordonnées du bouton voulu.
Les propriétés du layerUn
Interface "Snap Layers"
On accède au comportement via le menu Fenêtre > Comportements > Studio VII > Snap layers by PVII.
La nouvelle fenêtre qui apparait nous permet de choisir l’évènement, le bouton qui va servir d’ancre au calque et la position de ce calque par rapport au bouton choisi.
On sélectionne le boutonUn en Anchor Object, puis le layerUn qui va venir se positionner par rapport à ce bouton dans Layer to Snap et enfin la position par rapport à cette image dans Presets, ici à la droite du bouton (To the Right of Image).
En cliquant sur le bouton plus + de l’interface on ajoute autant d’évènement que voulu, au contraire en cliquant sur le bouton moins – on en élimine, on peut aussi les déplacer en utilisant les flèches haut et bas.
On peut donc jouer sur l’emplacement du calque par rapport à l’image choisi, soit en utilisant le menu déroulant Presets, soit en rentrant les coordonnées x y du calque choisi par rapport à l’image, dans les champs Offset Left et Offset Top.
Evènement onLoad et onResize
Par défaut l’extension s’applique à l’évènement onLoad de la balise <body>, en cas de redimensionnement de la page il faut forcer le document à se recharger (pour NN4 et Opera) pour que les calques trouvent leurs positions par rapport aux images.
Vous pouvez trouver, toujours sur Project Seven, des extensions pour forcer le rechargement du document pour les navigateurs Netscape et Opera, à savoir les extensions Opera Resize Fix et ReDoIt. Vous pouvez trouver un bref descriptif de ces dernières dans le tutorial de Mimi Quelques extensions indispensables.
Affichage des calques
Il nous reste à afficher/masquer les calques sur un évènement OnMouseOver des différents boutons, pour ce faire vous pouvez utiliser les outils présents dans les comportements de Dreamweaver en natif ou encore une fois les extensions de Project Seven, à savoir AutoLayers et autoHide Layers.
Conclusion et exemple
Cette extension est très pratique pour la création de menus par exemple, mais pas seulement, car en la combinant à d’autres, vous pouvez jouer sur l’emplacement et les évènements de vos calques, et ce de manière très simple, pour avoir des interfaces vraiment dynamiques et réactives.
Ce n’est qu’une histoire d’imagination…
Vous pouvez voir l’exemple du tutorial sur cette page.
