Home Button Construction

[Acorn]

Dear Xara...

I hought of helping out TGer Koko (https://www.talkgraphics.com/showthr...llover-Buttons) in designing a rollover button from an image and using Text that could be changed to make further simple rollover buttons.

Home Buttons.xar

My attempt seems to work until you slide the pointer up into the underneath of the button, whereupon the MouseOver button jumps to the right!

Now I purposely used text soft-grouped on top of a grouped object so that when scaled up the text is still a font rendering so no jaggies.

It fails as far back as V12.

What is going wrong?

Acorn

[gwpriester]

One or both of the objects on your aberrant button is not grouped. Remove the soft group, separate the buttons and make sure both button, graphic, and text are grouped.

[Acorn]

One or both of the objects on your aberrant button is not grouped. Remove the soft group, separate the buttons and make sure both button, graphic, and text are grouped.

Sorry Gary, my grouping is grouped graphics, soft grouped text anon both and then soft-grouped to form the button. This is correct as I want the text to stay text.

If I hard-group the text to the graphic, I lose the exact effect I am after.

I have just created a text area with centred text for the word HOME.
I cloned this and moved to the MouseOver layer and changed the colour from white to yellow.
I then soft-group both HOMEs and added a # link.

On Preview, I get even worst jumping!

This is not right at all.

Acorn

[gwpriester]

Well if you're good with the jumping button then your method is the way to go.

What is your reason for wanting editable text on the button? It's a button.

If you soft group the text and rectangle, then you have to change your text color and turn off underscore, and you lose the ability to have highlighted text.

Plus, when you group text with a shape, such as a button, the text appears in the HTML document as an Alt tag.

[Acorn]

Well if you're good with the jumping button then your method is the way to go.

What is your reason for wanting editable text on the button? It's a button.

If you soft group the text and rectangle, then you have to change your text color and turn off underscore, and you lose the ability to have highlighted text.

Plus, when you group text with a shape, such as a button, the text appears in the HTML document as an Alt tag.

If I create an underlying graphic for the button base, I can Name it "fred" and clone it as often as I want. i would do the same for a graphic on the MouseOver layer.
So placing the text as text does not change the grpahic and therefore the presentation is quicker, the download equally so. Finally, I can give the text a style that maps to a H1, H2 or H3 tag so it integrates better into the needs for improving search engine discovery.

I actually wanted to use rollover effects as well but have not got that far.

My current compromise is not to have a MouseOver part.
I have the base graphic soft-grouped with the text.
My text has Website link colours set as White under Yellow and no underlining.

I therefore get a white to yellow text colour change on mouse over of the text alone; the graphic expresses the link but does not change the text colour.

This last part is easy to do using CSS but Xara should make it work with its graphical MouseOver approach, not have jumping text.

Acorn

[gwpriester]

This last part is easy to do using CSS but Xara should make it work with its graphical MouseOver approach, not have jumping text.

The example I posted had two buttons, one with text grouped to the button and one soft grouped. Both have mouse over states and both work without jumping. I think that is an aberration of some kind.

[Acorn]

The example I posted had two buttons, one with text grouped to the button and one soft grouped. Both have mouse over states and both work without jumping. I think that is an aberration of some kind.

Thank you Gary. Neither have text rendered - it is part of the image so does not help my case.

Acorn

[gwpriester]

I see what you mean.

[gwpriester]

Would this work? It's about the only way I can see to do what you are asking. And maybe this is the same solution you have reached.

[gwpriester]

Layers using Web Animation are an option, almost.