Re: onmouseover image

[Jeremy Thomerson <je...@wickettraining.com>]

This doesn't preload the images, but it is a simple way to do a Mouseover.
You could easily add a header contributor within the constructor of this
class that outputs some javascript to preload the images.

public class MouseoverImage extends Image {
 private static final long serialVersionUID = 1L;

 private final ResourceReference mImage;
 private final ResourceReference mMouseoverImage;

 public MouseoverImage(String id, ResourceReference image, ResourceReference
mouseoverImage) {
  super(id, image);
  mImage = image;
  mMouseoverImage = mouseoverImage;
  add(new AttributeModifier("onmouseover", null, true, new
LoadableDetachableModel<String>() {
   private static final long serialVersionUID = 1L;
   @Override
   protected String load() {
    return "this.src='" + urlFor(mMouseoverImage) + "';";
   }

  }));
  add(new AttributeModifier("onmouseout", null, true, new
LoadableDetachableModel<String>() {
   private static final long serialVersionUID = 1L;
   @Override
   protected String load() {
    return "this.src='" + urlFor(mImage) + "';";
   }

  }));
 }
}

-- 
Jeremy Thomerson
http://www.wickettraining.com

On Wed, Sep 24, 2008 at 2:04 AM, Tim Squires <wm...@tnwdb.com> wrote:

> Thanks Alastair, that's a good idea. AjaxEventBehavior would give the
> effect but with a round trip to the server.  It would be nice to have a
> javascript only onmouseover where the images are pre-loaded.
>
> I'm currently using the wicketstuff-dojo onmouseover-highlight, which is
> good enough for now.
>
>
> http://wicketstuff.org/wicketdojo13/?wicket:bookmarkablePage=%3Aorg.wicketstuff.dojo.examples.lfx.DojoFXTestPage
>
> Thanks again,
> Tim
>
> > Have a look at AjaxEventBehavior. You can either combine this with an
> > Image
> > component or add an AttributeModifier and manually tweak the <img>'s src
> > attribute.
> >
> > Alastair
> >
> > 2008/9/19 Tim Squires <wm...@tnwdb.com>
> >
> >> Hi All,
> >>
> >> Before I go and write my own component to change the src of an img
> >> onouseover, I just wanted to make sure that there is no standard
> >> component.  I don't want to re-invent the wheel.
> >>
> >> Is there a standard component for changing the Image or ImageButton
> >> image
> >> onmouseover?
> >>
> >> Thanks,
> >> Tim
> >>
> >>
> >> ---------------------------------------------------------------------
> >> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> >> For additional commands, e-mail: users-help@wicket.apache.org
> >>
> >>
> >
>
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>
>

Re: onmouseover image

[smallufo <sm...@gmail.com>]

I am seeking a solution and found this mail.
This is a very useful implementation.
I strongly suggest future wicket to include this Component.

Thank you , Jeremy

--
smallufo


2008/10/8 Jeremy Thomerson <je...@wickettraining.com>

> This doesn't preload the images, but it is a simple way to do a Mouseover.
> You could easily add a header contributor within the constructor of this
> class that outputs some javascript to preload the images.
>
> public class MouseoverImage extends Image {
>  private static final long serialVersionUID = 1L;
>
>  private final ResourceReference mImage;
>  private final ResourceReference mMouseoverImage;
>
>  public MouseoverImage(String id, ResourceReference image,
> ResourceReference
> mouseoverImage) {
>  super(id, image);
>  mImage = image;
>  mMouseoverImage = mouseoverImage;
>  add(new AttributeModifier("onmouseover", null, true, new
> LoadableDetachableModel<String>() {
>   private static final long serialVersionUID = 1L;
>   @Override
>   protected String load() {
>    return "this.src='" + urlFor(mMouseoverImage) + "';";
>   }
>
>  }));
>  add(new AttributeModifier("onmouseout", null, true, new
> LoadableDetachableModel<String>() {
>   private static final long serialVersionUID = 1L;
>   @Override
>   protected String load() {
>    return "this.src='" + urlFor(mImage) + "';";
>   }
>
>  }));
>  }
> }
>