Mouse Over Image

[nacho]

Hi, i want to do the following, i want to display a label when the
user passes the mouse over the image and i want to hide the label when
the user takes out the mouse from the image. Just like a toolkit.

What i did is the following, what am i missing?

final Label lblRecyclerBin = new Label("Recycler Bin");
lblRecyclerBin.setVisible(false);

RootPanel.get().add(lblRecyclerBin);

final Image imgRecyclerBin = new Image("images/icons/trashcan.png");
imgRecyclerBin.setHeight("40px");
imgRecyclerBin.setWidth("40px");
imgRecyclerBin.setStylePrimaryName("reflex");

imgRecyclerBin.addMouseOverHandler(new MouseOverHandler() {
public void onMouseOver(MouseOverEvent arg0) {
lblRecyclerBin.setVisible(true);

RootPanel.get().setWidgetPosition(lblRecyclerBin,
imgRecyclerBin.getAbsoluteLeft(), imgRecyclerBin.getAbsoluteTop());
}
});

[lineman78]

I believe you need to use the add(Widget, x, y) method on root panel
when you add it in the first place so that it sets it as position
absolute. Why not just use the alt text on an image(setTitle)? It is
a lot less work and is accessable, meaning the alt text is what screen
readers look to in order to describe an image for a blind person.

[cokol]

as lineman already written, you first have to add the label widget to
the DOM ,you could do it just after setting label to "hidden". Then
you also have to give the widget the property "position: absolute"....
in your case you could also use tooltips over widgets, they are better
fitted since they know where to show if, i.e. the target widget (like
your bin) is near to the edge of the screen, then the tooltip would be
placed in a position that is readible.

in its simplest way you could use the setTitle() on any control, which
would popup a simple text after a user holds with a mouse, a tooltip
(in GWT vanilla its called PopupPanel) can take any widget, like HTML
or image or whatsoever...

br,

[nacho]

Hi, thanks both.

The problem was that i was using this javascript library
http://www.netzgesta.de/reflex/ with that image and the reflection
script was modifing the image widget html generated by gwt.

On the other hand i'm using a label because i'm building a gwt-apple-
like-dock so the simple title of an image wasn't be usefull for me.

[abhiram wuntakal]

Hi,

  I had implemented a very similar functionality, where I had to display a label as soon as there is a mouse-over on the image and where there a mouse-out, the label had to disappear. This is what I did.

  defined an image at a position fixed Rootpanel.
  defined a html(instead of a label) at the centre of the image (as per x,y coordinates)
  initially made it setvisible(false) just the was u did
  for a mouse-over set the html visibility true
  for a mouse-out set the html visibility false.

This worked perfectly fine for me. i guess the trick is to use the HTML widget instead of the label, although u will get all the properties of the label with that. use this and it will work fine.

let me know if u need any other info

~ Abhiram

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To post to this group, send email to google-we...@googlegroups.com.
To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

[Craigo]

The PopupPanel.showRelativeTo(UIObject) method is handy for this.

On Jul 22, 3:10 pm, abhiram wuntakal <abhir...@gmail.com> wrote:
> Hi,
>
>   I had implemented a very similar functionality, where I had to display a
> label as soon as there is a mouse-over on the image and where there a
> mouse-out, the label had to disappear. This is what I did.
>
>   defined an image at a position fixed Rootpanel.
>   defined a html(instead of a label) at the centre of the image (as per x,y
> coordinates)
>   initially made it setvisible(false) just the was u did
>   for a mouse-over set the html visibility true
>   for a mouse-out set the html visibility false.
>
> This worked perfectly fine for me. i guess the trick is to use the HTML
> widget instead of the label, although u will get all the properties of the
> label with that. use this and it will work fine.
>
> let me know if u need any other info
>
> ~ Abhiram
>
>
>
> On Thu, Jul 22, 2010 at 9:41 AM, nacho <vela.igna...@gmail.com> wrote:
> > Hi, thanks both.
>
> > The problem was that i was using this javascript library

> >http://www.netzgesta.de/reflex/with that image and the reflection

> > google-web-tool...@googlegroups.com<google-web-toolkit%2Bunsubs cr...@googlegroups.com>
> > .

[George Georgovassilis]

You might do it with some CSS provided that you are not targeting IE6.

1. Make a div with fixed dimensions
2. Put the label and the image into the div
3. The initial style for the label should be absolute positioning and
hidden. You can play with margins to place the label anywhere ove rthe
image
4. Use the :hover pseudoclass to display the label

The downside is that you need a copy of the label in every image.

But before you go too far: are you sure the image's alt="" attribute
(gwt jargon: title) doesn't suffice?