MX

you can show or hide any layer by checking or un-checking the visibility icon (the eye symbol). This is a
way of showing what your MouseOver elements will look like on your page.
The current layer is always highlighted in the Page & Layer Gallery - the MouseOff layer in the above
diagram - and this is the layer that all new objects are drawn on. To place objects on any other layers
just click the required layer in the Page & Layer Gallery
, ensure the eye and the lock icon are open for that layer.
Note
: The MouseOver layer must always be above, that is on top of, the MouseOff layer, as shown in the
above example.
To edit the objects on a layer both the 'eye' and 'lock' icons have to be open - this means you can see
and edit the layer (as shown above in the MouseOff layer).
Mouseover (Rollover) Buttons
Almost all the ready-made buttons from the Designs Gallery
have a mouseover effect in Web Designer Premium. These are created by having two versions of each
button, the main one on the MouseOff layer and a 'highlight' one on the MouseOver layer.
Normally you do not need to know or care about this because both buttons behave as one - the changes
you make to one, such as editing the label text, are reflected on the other version. If you move, drag or
resize a button on the MouseOff layer, the other version on the MouseOver layer will change as well,
even if you can't see it. This is done using Soft Groups (Soft Groups, Soft Groups
).
Creating Your Own Mouseover Buttons
You can create your own mouseover buttons from scratch by drawing the necessary elements from
rectangles, text, etc. Just draw the main parts of the button on the MouseOff layer (remember to group it
) and place the corresponding 'highlight' version on the MouseOver layer. As long as the MouseOff
version has a web address link, then the MouseOver version will automatically be displayed as you move
the mouse over it on the web page. (The MouseOver layer must be on top of the MouseOff layer).
In other words, you give the main object a web address using the link
option, and then select the MouseOver Layer in the Page & Layer
Gallery
, and place the required mouseover versions of your button on this layer
so it overlaps the linked object.
Technical note:
Any graphic object on the MouseOver layer will be displayed as long as at least 50% overlaps with the
object on the MouseOff layer. The two versions of mouseover buttons are kept in sync by using the Soft
Groups feature. When you select the button on one layer, it automatically selects the Soft Grouped
version on the other layer, even if the layer is switched off. When you edit the text of the button on one
layer, it's automatically synced with the other version of the button.
To ensure the text on both the Off and Over states changes when you edit either, Soft Group the buttons
on both layers. To do this you will need to enable both layers in the Page & Layer Gallery, and lasso
select around both buttons. The status line should tell you if you have everything selected. Select
"Arrange" > "Apply Soft Group"
. Now when you edit the text on the Off layer it will also change on the over layer, even if it's hidden.
(Note this only works if the Off and Over text are the same to start with, and relies on the objects being
Soft Grouped).
Once you have a working button, you can easily turn it into a navigation bar. Select the button (along with
its MouseOver state if it has one) and then choose "Arrange" > "Create navigation bar". The
navigation bar dialog appears allowing you to configure your bar. See the Navigation Bar chapter
for more information on this, including how to have different first and last buttons in your bar.
Page 163