Rollover Button--Help!

**nikkisart** · 19 December 2000, 09:06 AM

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** · 19 December 2000, 03:22 PM

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

**stlewis** · 21 December 2000, 06:31 AM

All it does is tell XaraX the overall button size.

I made one with white fill and line, and it worked fine - unless you need transparency in which case see all the threads dealing with that hornets nest of an issue!

www.thelondonhouse.co.uk

**nikkisart** · 20 December 2000, 06:21 AM

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]

**nikkisart** · 21 December 2000, 11:21 AM

I FINALLY DID IT! You guys suggestions worked great. In fact, I have 2 rollover bars on one page (which took a bit of work), and I owe it all to you guys. [img]/infopop/emoticons/icon_biggrin.gif[/img] Thanks!!!!!

**Egg Bramhill** · 20 December 2000, 07:48 AM

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

**stlewis** · 21 December 2000, 12:41 AM

1. Use Alt tag to give a simple popup tip
2. Use Xara to create buttons where the MouseOver variant has some text
3. Use Xara to create primary and secondary buttons - you have to do all the HTML yourself.

Any more for any more?

www.thelondonhouse.co.uk

**FrankMcAree** · 20 December 2000, 10:29 AM

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.