PagePlus

Adding rollovers (Web Publishing mode only)

The term rollover refers to an interaction between a mouse and a screen object. For example, you can point your mouse at a graphic (such as a navigation bar button) on a web page, and see it instantly change color or become a different picture. When you point to a web page object, your mouse pointer physically enters the screen region occupied by the object. This triggers an event called a “mouseover” which can trigger some other event—such as swapping another image into the same location. An object whose appearance changes through image-swapping in response to mouse events is called a rollover graphic—the state of the graphic changes in response to screen events.

You can directly import rollover graphics created in Serif DrawPlus.

Rollover options

Adding rollovers is basically a matter of deciding which rollover state(s) you’ll want to define for a particular object, then specifying an image for each state. PagePlus provides several choices:

Normal State is the “resting” state of the graphic before any rollover, and is always defined.	Over State is the state triggered by a mouseover—when the mouse pointer is directly over the object.	Down State is triggered by a mouse click on the graphic.

 

Another state, Down+Over (not illustrated) implies a mouseover that occurs when the graphic is already down, i.e. after it’s been clicked. If you don’t activate this rollover state, then the Over image appears by default when a mouseover occurs, even after a click. If you do activate this state, then the Down+Over image you provide (typically the same as the Down image) appears on a mouseover. Down+Over is useful as a precaution to ensure that the button stays in its “clicked” state and doesn’t switch back to “Over” if the user happens to mouse over it again before leaving the page.

You can also specify a hyperlink event—for example, a jump to a targeted web page—that is triggered if the user clicks on the object. And you can even group buttons on a page so that they work together—and only one button in the group can be ‘down’ at any one time.

To create a rollover graphic:

1. In a suitable image-editing program, create the variant source images for each state you’ll be defining. (See Creating variant graphics below.)

2. On the Insert menu, choose Web Object and then select Rollover.

3. Specify which rollover states (see above) you want to activate for each graphic by checking boxes in the Rollover Graphic dialog. For each one, use the Browse button to locate the corresponding source image and specify Export Options for that image (see Setting image export options).

4. Check Embed files in site if you want to incorporate the image(s) in the PagePlus file. (For details, see Embedding vs. linking.)

5. Select either Normal or Down as the button’s initial rollover state.
   For example, common sense dictates that on a site’s actual Home page you should initially show the “Home” button itself as down, and/or unresponsive to mouse actions—after all, the viewer is already on that page—whereas buttons that link to other pages should be in their normal “up” state and responsive.

6. Click Set… to define a hyperlink target for the button. (For details, see Hyperlinking an object.)

7. Check Radio Button if you want to link all the buttons (on a given page) that have this option checked, so that only one of them at a time can be ‘down.’
   If you use this technique, make sure all rollover graphics you want to link have the option checked. Although it doesn’t matter how the buttons are distributed on the page, typically they’ll constitute a visible unit like a navigation bar. Any buttons with the option unchecked are independent.

8. Click OK. The first time you define a rollover state, you’ll see rollover layers established in the document.

PagePlus displays the image assigned to the Normal state. It’s a good idea to preview the page in a web browser and test each rollover object, then return to PagePlus and revise as needed. When you preview or publish the website, PagePlus takes care of exporting one image file for each rollover state, and the HTML file for the published page incorporates the JavaScript code for the rollover event trapping.

To edit a rollover graphic:

1. Right-click the graphic and choose Edit Rollover….

2. Make new selections as needed and click OK.

Creating variant source images

For each object with at least one activated rollover state, you’ll need to provide a source image. It’s the often subtle differences between the “Normal” image and the “variants” that make the object appear to switch from one state to another. For example, if you’ve checked the “Over” state for an object, you need to include a variant image that the web page can display when the button is moused over. If you want the button’s text to change from black to yellow, then the “Over” state will need an image with yellow text.

You’ll need to create these source images in a separate image-editing program. Here are some things to consider:

• Variant images will stretch to fit into the region occupied by the Normal image, so all the source images should have the same dimensions.

• Make sure the variants are all in precise registration with the Normal image, so there’s no unintended movement when images are swapped on rollover. To simplify matters, use an image editor with layering capability and create each variant on a separate layer directly above the Normal image.

• PagePlus displays only the Normal image, so preview the effect of swapping graphics by hiding and showing layers in the image editor.

• You only need to provide variant source images for the rollover states you’ve activated.

• Once you’re satisfied with the source images, export each layer to a separate file, and then return to PagePlus to define the rollovers.

• When assigning the source images, you’ll need to choose between linking and embedding. As long as a source image is linked (not embedded), PagePlus will always use the latest version of a file. So as a rule, until you’re truly sure your source images are final, you may wish to uncheck the Embed files box so that linked images will be used. You can easily repeat the assignment process, using embedding instead, once the source images are final. If you do find yourself needing to update an image that’s already been embedded, the best way is to save the revised file under a different name, then repeat the assignment process and specify the new file instead of the old.

Importing DrawPlus rollovers

Serif DrawPlus provides not only advanced image editing and layering capabilities, but built-in tools for producing rollover graphics. For example, you can preview just a region of your screen in a web browser, and set export options. DrawPlus outputs of a series of image files (e.g., myfile_02.gif, myfile_02_d.gif, myfile_02_h.gif, myfile_02_hd.gif, etc.) with variants for each rollover state, and a single HTML file (for example, myfile.html) that includes the JavaScript code.

To import a DrawPlus rollover graphic:

1. Choose Web Object from the Insert menu and select DrawPlus Rollover… from the submenu.

2. Locate the HTML file for the rollover graphic. Keep Embed graphic files checked to incorporate the images into the publication, or uncheck to link them.

3. Click OK.

PagePlus automatically inserts a placeholder for the object.

Adding rollovers