button with image and text

[ASlak]

My goal is to make a button that has transparency, to look nice, and
text on top so the user knows what the button does.

I currently am using a pushbutton for the image part and that works
fine. The issue is how I am adding the text. Right now I have a label
with the text that I want located behind the pushbutton. This appears
as I want it to visually, however if I mouse over the label it brings
up the text selector cursor and no longer allows me to click the
button.

Effectively this makes most of the button unclickable(the parts of the
button outside of the label area work as expected).

Is there a way to fix this so the text does not interfere with the
button's function? Or is there a completely different approach to
this task that would work better?

Thanks in advance.

[Jeff Larsen]

Solution 1. Change the z index of the button to have it be on top of the text. 

Solution 2: Use Button instead of PushButton and create a SafeHtml Template for your text+image. (this is the better option if you don't need all the stuff that PushButton provides)

[ASlak]

Thanks for your fast response!

I am very new to gwt, so I may be wrong, but from what I understand
you need to use gwt-ext to change the z index of components. I am
trying to only use standard gwt. If it is in fact possible to change
the z index with standard gwt then I have not been able to find how to
do it. I am using eclipse for my project and I have tried the
"order" > "send to back" option for the label in the design window,
but this does not solve the problem.

As for solution 2, I do need some of the features that PushButton
provides, such as the UpHovering property, so I am not sure that that
is a viable option.

So, is it possible to change the z-index in standard gwt? Or is there
another way to solve my issue?

Thanks

[ASlak]

So I learned that I can change the z-index. I tried making the index
of my button Label -1, which made it disappear completely from the
screen. My guess was that it happened because it had gone behind the
background image, however when I set the image of the background image
to -2 the Label did not reappear.

Any ideas?

Thanks again.

[Jeff Larsen]

I am very new to gwt, so I may be wrong, but from what I understand you need to use gwt-ext to change the z index of components.

nope it is a CSS property.  

add this to the style of your TextBox
z-index:-1;

also might be able to do what you need to with Button by using the appropriate css selectors. 

http://www.w3.org/TR/CSS2/selector.html

5.11.3 The dynamic pseudo-classes: :hover, :active, and :focus

Interactive user agents sometimes change the rendering in response to user actions. CSS provides three pseudo-classes for common cases:

• The :hover pseudo-class applies while the user designates an element (with some pointing device), but does not activate it. For example, a visual user agent could apply this pseudo-class when the cursor (mouse pointer) hovers over a box generated by the element. User agents not supporting interactive media do not have to support this pseudo-class. Some conforming user agents supporting interactive media may not be able to support this pseudo-class (e.g., a pen device).
• The :active pseudo-class applies while an element is being activated by the user. For example, between the times the user presses the mouse button and releases it.
• The :focus pseudo-class applies while an element has the focus (accepts keyboard events or other forms of text input).

An element may match several pseudo-classes at the same time.

CSS does not define which elements may be in the above states, or how the states are entered and left. Scripting may change whether elements react to user events or not, and different devices and UAs may have different ways of pointing to, or activating elements.

CSS 2.1 does not define if the parent of an element that is ':active' or ':hover' is also in that state.