Page 458 - Xara Designer Pro X17

458 Web Graphics and Websites

Layer ordering in website documents
If your website document has mouseover effects, pop-up layers and perhaps even
mouseover effects on those pop-up layers, there are some important rules you need to
follow in terms of how you order the layers in your document.

Considering the layers in turn from background to foreground (which is working upwards
in the Page & Layer Gallery), first you must have all the static layers. These are layers
which are always visible and are not used as pop-ups. In most designs there will only be
one – the “MOUSEOFF” layer. But some designs may have several, in which case they
must be the first layers in the layer stack.

Next comes the MOUSEOVER layer, if there are mouseover effects on the static layer(s).
This contains the mouseover states for all your mouseover buttons. This must be
followed by the “MOUSEDOWN” layer, if you have mousedown effects on the static
layer(s).

Next you may have a pop-up layer. If the objects on this pop-up layer have mouseover
effects, then the next layer following the pop-up layer must be the layer holding those
effects. It must have a name that begins with “MouseOver”, E.g. “MouseOverPop-up1”.
And then if the pop-up layer also has mousedown effects, a layer whose name begins
with “MouseDown” must follow containing those effects.

Then you can have another pop-up layer, followed again by any mouseover and
mousedown layers for that pop-up layer. And so on - you can have as many pop-up
layers as you like.

MouseDown pop-up n
MouseOver pop-up n
Pop-up layer n
...
MouseDown pop-up 1
MouseOver pop-up 1
Pop-up layer 1
MouseDown
MouseOver
Static layer n
...
Static layer 2
MouseOff

Note that you only need to be concerned with these ordering rules if you are building
complex pages with multiple pop-up effects! If you are just using the template designs
provided in the Designs Gallery, you should not have any problems with layer ordering.
Pop-up Layers

A more powerful alternative allows you to display the contents of any layer as a result of
mousing over, or clicking, any object. This can be used for a range of different pop-up
effects such as pop-up photos, menus or detailed object descriptions.