Creating Rollovers

Creating Navigation Bars describes the basic operation of creating a navigation bar. This page gives information on the additional steps required for creating rollover buttons in that bar. You can create a standalone rollover button by creating a single button navigation bar.

Note that rollovers are slightly more complicated than a simple bar because they use JavaScript on web page. You do not need to know JavaScript but you may need to know the basics of HTML tags and attributes.

Creating rollover buttons:

After creating a simple navigation bar (which just contains the MouseOff state), you can create buttons for the other rollover states.

Details of creating a simple navigation bar

Details of creating rollover buttons

Viewing the button states:

1. Select from the drop-down list on the Button & NavBar Tool Infobar.

Any unused states appear as No states in the name field.

Assigning web addresses (URLs) to rollover buttons

To make it easier to create rollovers, you can give each set of buttons a URL. This is the web address to jump to when the user clicks the button on a web page. Adding the URL in Xara LX means the exported HTML includes the correct anchor tags (which saves you having to edit them afterwards) Details of adding web addresses to objects.

Notes:

You only need to add the URL to one of the button states (for example, just to MouseOff); the same URL applies to all the other button states.

You can add the URL to just a part of the button; in the exported HTML, the URL applies to the complete button.

If you apply different URLs to different button states, Xara LX uses the last URL applied.

Exporting rollovers

This is the same as for simple bars.

If you want to use these rollovers in Macromedia Dreamweaver, there is a separate page describing how to do this.

If you are not using Dreamweaver: we suggest inserting the bar into an existing web page. This automatically copies the JavaScript to the correct place on the web page.

Using the graphics and HTML/JavaScript on a web page

To include a bar with rollovers on a web page requires some HTML and JavaScript on the web page. This description assumes you know how to edit the web page and have a basic knowledge of HTML. (You do not need to know JavaScript.)

1. Skip this step if you inserted the bar into an existing web page. It applies only if you created a new page or overwrote an existing page.

Copy the JavaScript into your web page. The script starts

<!-- Navbar def -->

and ends

<!-- Navbar def end -->

Copy this entire block into the HEAD section of your web page. A convenient place is just before the </head> tag. If your web page already contains some JavaScript, just insert this new script after the existing </script> tag. You can have more than one JavaScript block on the same HTML page.

2. You may need to move the bar to where you want it on the page. Technical Note: the bar is contained in a Table. This ensures correct formatting. Copy the entire Table to where you want the bar to appear. The Table starts

<table name="XaraTable"...

and ends

</table>

You may also need to copy the graphics files to your web server:

1. We recommend copying the graphics to the same folder as the web page. If you use a different folder to the web page, you need to edit the SRC attributes to point to the correct folder.

2. Copy the graphics to your web site. The buttons are named Button1.gif, Button2.gif etc. for the default MouseOff state and Button1MouseOver.gif, Button1Selected.gif etc. for the other states.

For complex bars there may be other graphics with names such as r2c1.gif plus a file called shim.gif. Copy all these to your web site. Technical note: Shim.gif is a dummy graphic used for padding.

3. Unless you assigned a web address to the button, the bar uses a dummy address to jump to when the button is clicked. You need to edit this to point to the correct page. The link address is in the HREF attribute of the Anchor tag:

<a href="untitled.htm" ...>

Movies

Creating JavaScript rollovers

_______________

Related Topics