MX

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.
Layer ordering in website documents
If your website document has mouseover effects, popup layers and perhaps even mouseover effects on
those popup layers, there are some important rules you need to follow in terms of how you order the
layers in your document. If you don't follow these ordering rules, you may find that some of the effects
don't work.
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
popups. In most designs there will only be one ? the "MouseOff" layer. But some designs may have
Page 177