I have a similar setup in my app -- an image with a mouse-over handler
that causes a small control panel to appear layered over one corner of
the image. In my case, the primary image occupies the full
AbsolutePanel it resides in, so I sink events from that panel. To be
truthful, because I wanted mouse over events, I had to subclass
AbsolutePanel and override onBrowserEvent(). My control panel is
actually exactly that, another panel. That panel is layered over the
image in the same AbsolutePanel, and contains some ImageButtons.
So, I have something like this (to be terse):
class MyAbsolutePanel extends AbsolutePanel {
@Override
protected void onBrowserEvent(Event event) {
switch (event.getTypeInt()) {
case Event.ONMOUSEOVER:
// set the control panel visible
// other event yada yada
}
}
}
MyAbsolutePanel absolute = new ...
// add image to absolute
// add control panel to absolute. visibility hidden in my case,
// revealed by mouse over
absolute.sinkEvents(Event.ONMOUSEOVER | Event.ONMOUSEOUT);
As noted, the control panel is its own panel with ImageButtons
inside. Make sure your "checkbox" image is properly sized ... i.e.
isn't a DIV that fully overlays the entire image. Sticking it in
another panel that has width and height set should help. The buttons
in my panel have conventional click handlers. I have no problems
receiving events for the primary image, even when the control panel is
overlaid.
Hope this helps.
Brett
On Jul 8, 12:45 pm, zorro2b <[email protected]> wrote:
> Thanks. Works like a charm.
>
> Only question I have now is how do I manage clickHandlers for these
> images?
>
> It seems that I must have a clickHandler registered for the front most
> visible image or no click is detected. I tried using a transparent
> image with a high z index so it would always be in front, but no luck.
>
> Is there a better way to manage this than moving the click handler
> between the main image and the check mark depending ov visibility?
>
> thanks again,
> Andrew
>
> On Jul 8, 1:32 am, "brett.wooldridge" <[email protected]>
> wrote:
>
>
>
> > Oh, and don't forget to set the z-index of the checkmark to be greater
> > than the image it's over. Again, using either CSS (z-index) or
> > programatically:
>
> > checkImg.getElement().getStyle().setProperty("zIndex", "1000");
>
> > On Jul 8, 12:30 am, "brett.wooldridge" <[email protected]>
> > wrote:
>
> > > Put the images into an AbsolutePanel, set their positions accordingly
> > > using either CSS (top/left) or programatically (setWidgetPosition()).
>
> > > On Jul 7, 12:59 pm, zorro2b <[email protected]> wrote:
>
> > > > Is there a way to layer images with GWT? For example I am displaying
> > > > an image and want to display a check mark over it when it is clicked.
>
> > > > What is the best way to achieve this with GWT?
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Google Web Toolkit" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/Google-Web-Toolkit?hl=en
-~----------~----~----~----~------~----~------~--~---
