Rollover Button--Help!

[nikkisart]

I'm having a hard time creating the fly in text next to the rollover buttons (as shown on the Xara X homepage example) especially since the fly in text of one button may be a different length then the fly in text of the next button. I want the buttons to stay the same distance from each other even if the fly in text next to the buttons are longer or shorter relative to one another (I hope I'm not confusing anyone). I've seen this done on other websites where different messages of different lengths are displayed next to a rollover button on mouseover and could never figure out how they did it. Is Xara capable of doing this. Can someone post a tutorial out there somewhere on how to do this. Can anyone understand what I'm asking [img]/infopop/emoticons/icon_confused.gif[/img] ?

[nikkisart]

I'm having a hard time creating the fly in text next to the rollover buttons (as shown on the Xara X homepage example) especially since the fly in text of one button may be a different length then the fly in text of the next button. I want the buttons to stay the same distance from each other even if the fly in text next to the buttons are longer or shorter relative to one another (I hope I'm not confusing anyone). I've seen this done on other websites where different messages of different lengths are displayed next to a rollover button on mouseover and could never figure out how they did it. Is Xara capable of doing this. Can someone post a tutorial out there somewhere on how to do this. Can anyone understand what I'm asking [img]/infopop/emoticons/icon_confused.gif[/img] ?

[bputnam]

Nikki, are you referring to the little yellow box that appears next to a button when the mouse is over it? If so, that text is controlled by the ALT attribute on the IMG tag. Xara X sets that to "Button1", etc. by default but you can edit the html and change it.

By the way, it would be a useful feature if the ALT attribute for a given button could be set in the Web address dialogue box.

Bryan

[nikkisart]

If you go to http://www.xara.com/products/xarax/tour/tour3.asp you'll see the nav bar example with the pink buttons. When you click on the example and pass the mouse over each of the button, the text "page 1", "page 2", etc. appears next to the button. This is the affect I want to create, but instead of each button saying "page #", my button 1 may have a whole statement 2 lines long and my button 2 may have a statement 4 lines long and so on. In other words the text next to the button may have different dimensions. I don't want the varying dimensions of the text next to the buttons to change the positions of the buttons relative to one another (i.e. the longer text will push the next button image further down to accomodate the additional lines of text). I just want the buttons to appear as they do in the example all the time and the text that rollsover next to the button to be able to say whatever I want without changing everything else. Is that any clearer? Is Xara able to do that? [img]/infopop/emoticons/icon_confused.gif[/img]

[stlewis]

In one case I know, (http://www.hotmetalpro.com/), this is achieved with a second image triggered by the mouseover event on the first.

It is quite hard to do this with a text editor. A wodge of JavaScript includes offset distances to push the flyout text to the right and down by the right amount. If the client changes the buttons, lots of things have to change.

Someone else may come up with a better trick.

[stlewis]

To do it the Xara way, create the button with sample text to the right. Select both (don't group them), and then select the navbar tool. Create the set with New, and Create States for MouseOver etc.

Open the Layer Gallery, and delete the text from the layers you don't want it on - perhaps leaving just the MouseOver layer.

And Export the buttons.

[stlewis]

If, having created the buttons as previously, you are playing with the Name Gallery and you double-click the name of a 'button extender', the button suddenly doubles in size. But Undo has no effect. So you hope you saved first!

[Egg Bramhill]

Nikki
It's quite easy to do. If you follow Simons method above it's quite a good method.
I did it slightly differently, I added a no fill no line fill rectangle to the back of my button, but did'nt add the text at this stage.
I then typed in the required text inside the non visible rectangle, for each button and each "mouse over" and "mouse down" stage.
Finally I placed a layer bellow all the buttons and gave it a background, the size you see. I DID'NT USE MAKE BACKGROUND FROM LOWEST SELECTION, as this stretches the background and repositions the buttons.
Select all and export
See the final product @ buttons with text

[Egg Bramhill]

Nikki
I'm sorry but when I visited you suggested URL I ended up at Xara site re nav buttons, not the hotmetal.pro site you were directing us to. These buttons are entirely different in type and I'm not sure if they could be as easily generated in Xara.
Egg

[FrankMcAree]

The effect on the xara page has nothing to do with Xara and is a piece of html tagging. In this case they have used the title tag for each link - which does not work in older browsers. Most sites use the alt tag which is more compatible to give the 'flyout'. For something more sophisticated you could use 'layers' (NN and IE call them differenet things) whose visibility is controlled by a bit of javascript.