Home Button Construction

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.

Attachment 123151

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

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.

Quote:

---

Originally Posted by 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.

---

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

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

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.

Quote:

---

Originally Posted by gwpriester

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

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

Quote:

---

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.

Quote:

---

Originally Posted by gwpriester

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

I see what you mean.

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.

Layers using Web Animation are an option, almost.

Quote:

---

Originally Posted by gwpriester

Layers using Web Animation are an option, almost.

---

Gary, I applaud your persistence. Layers aren't really what I wanted.

My CSS attempt is still a work in progress: Attachment 123167

Acorn

I thought you want the text to be text? If it is text I cannot select it.

Quote:

---

Originally Posted by gwpriester

I thought you want the text to be text? If it is text I cannot select it.

---

Gary, I can click off a button and drag the pointer over a button and the text is highlighted.

Here is the HTML for "RANGE":

Code:

---

<h1 class="xr_tc Heading_1 xr_s0" style="left: 55.34px; top: -20.92px; width: 51px;margin:0;"><span class="Heading_1 xr_s0" style="width:46.65px;display:inline-block;-ms-transform-origin: 0%;-webkit-transform-origin: 0%;transform-origin: 0%;-webkit-transform: scaleX(0.955);-moz-transform: scaleX(0.955);-o-transform: scaleX(0.955);transform: scaleX(0.955);"><a href="#" onclick="return(xr_nn());" onmousemove="xr_mo(this,0)" >RANGE</a></span></h1>

---

Effectively, it is a H1 tag.

I have used a single graphic that I Named filename="buttonbackground".

Acorn