You can create JavaScript rollover (sometimes called mouse-over) button bars using the Button and NavBar tool - these are buttons that change appearance when you pass your mouse over them or click on them.

I'm going to use a ready made static button bar to demonstrate how easy it is to create rollover states in Xara Xtreme (to see how this button bar was created see the tutorial on creating button bars).

So to start: select the Button and NavBar Tool and click on the Create/Delete States button in the Infobar. This lets you create rollover buttons for the Mouse-Over, Mouse-Down, and Selected states - the button design you started with is your Mouse-Off design.

When you're creating new states you can chose whether to copy the Mouse-Off design (so that you can then edit it yourself) or to have Xara Xtreme automatically create the new state designs for you.

We'll just create a Mouse-Over and Selected state and we'll have Xara Xtreme create the graphics for us. So I set the drop down to 'new State looks distinct' and check the Mouse-Over and Selected states and click Create.

You can now preview each state separately:

These are the designs that Xara created (l-r: Mouse Off, Mouse Over, Selected):

I quite like that Mouse-Over design but I want to change the appearance of the Selected state. With the Selected design showing on screen, I select the top button and edit its design in the normal way (in this case I'm putting white shading along the bottom to make my button look as if it's being pressed in). Then I can update the other Selected state buttons to this design:

This saves the effort of editing them all separately. And that could be the color, bevel, shadow, transparency or whatever.

So here's the new Mouse-Off, Mouse-Over and Selected States.

Once you've created all your states and you're happy with the design, click on Export on the infobar...

....then name and save the file. The Export dialog box opens letting you apply any optimization settings to the buttons. Then click on Export at which point it gives you the option to preview the complete button bar in a browser. The button bar is automatically sliced and exported with all the necessary HTML and Javascript. Note: We recommend that you save it to a separate folder so that it's clear which files belong to this bar.