Page 459 - Xara Designer Pro X17

Web Graphics and Websites 459

To do this, place all the objects you want to pop-up on a new layer (in the Page & Layer
Gallery click NEW - don't use the MouseOver layer), then set the Mouseover property
(WEB PROPERTIES dialog) of the original object to trigger the display of this layer when
you mouseover any other object. For example you can make a pop-up, like this, appear
as you mouse over some text:

Here are the steps to create a pop-up text block like this:

1. Select a layer in the PAGE & LAYER GALLERY and click NEW to create a new layer.
2. Draw a rounded rectangle with the RECTANGLE TOOL, click a (pale) color patch on
the COLOR LINE (on page 190) to give it a fill color. For good measure give it a soft
shadow (select the SHADOW tool and just drag on the rectangle).
3. Create a block of text on top of your rectangle. Select the TEXT TOOL and drag
diagonally across the rectangle. Type your text. You probably want to hide the pop-
up layer now, so click the eye icon against your new layer in the Page & Layer
Gallery.
4. Back on the base (MouseOff) layer (click it in the PAGE & LAYER GALLERY to set this
as current layer) now select the text you want to trigger the pop-up, using the usual
method (in the Text tool). Then open the WEB PROPERTIES DIALOG (on page 462)
(Ctrl+Shift+W) and on the MOUSE-OVER tab select the new layer from the 'SHOW
POPUP LAYER' drop down menu. Click OK.
5. Preview and test your mouseover effect.

If you want the pop-up to only appear when you click, then select the same option on the
LINK tab of the same WEB PROPERTIES DIALOG (on page 462) instead.

Note: The mouseover layer appears and disappears as you move the mouse pointer on
and off the triggering object. If you use a click method to display the layer (from the Link
dialog), then the layer is revealed by a click on the object, and is hidden when you click
anywhere else on the page.

Thumbnail Photos With Pop-ups
You can very easily create small thumbnail photos that when clicked will show an
enlarged version. Simply resize your photo to be small, the usual way using the
SELECTOR TOOL.