Page 457 - Xara Designer Pro X17

Web Graphics and Websites 457

Mouseover (Rollover) Buttons
Almost all the ready-made buttons from the ONLINE CONTENT CATALOG have a mouseover
effect in Designer Pro. 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 (on page 101).

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 (on page 502) for more information on this,
including how to have different first and last buttons in your bar.