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.
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.
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.
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.
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.
<!-- Navbar def -->
<!-- Navbar def end -->
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
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" ...>