onMouseOver and onMouseClick in wicket

[jayeshps <ja...@gmail.com>]

Hello,

I have a requirement where I need to change the images based on the current
position of the mouse on a particular background image, I have one
background image and around 15 different images that need to be shown on top
of the background image based on where the mouse points to on the image.

I have created two WebMarkupContainers. baseMarkupContainer, for the
background image which is always visible, and hoverMarkupContainer with the
hovering image which is visible on a mouseOver event.

I am using an AjaxEventBehavior to implement the same. It is working fine
with two images, but could anyone tell me how do I change the image for
several different mouse positions, relative to the background image.

I am not very familiar with javascript, if thats the only option, could some
help me with changing the name of the image file in the hoverMarkupContainer
based on mouse position, and how this change can be reflected back in the
wicket code.

Thanks and Regards.
Jayesh Sarswat



--
View this message in context: http://apache-wicket.1842946.n4.nabble.com/onMouseOver-and-onMouseClick-in-wicket-tp4666775.html
Sent from the Users forum mailing list archive at Nabble.com.

---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org

Re: onMouseOver and onMouseClick in wicket

[Martin Grigorov <mg...@apache.org>]

Hi,

You need to use the JavaScript mouseover's event to get the mouse's
coordinates.
In JavaScript this looks like:
var myMouseOverHandler = function(event) {
  var x = event.clientX;
  var y = event.clientY;
  document.getElementById('subImage').src = getSubImage(x, y);
};

In Wicket you can do:

backgroundImage.add(new AjaxEventBehavior("mouseover") {
  @Override
  protected void updateAjaxAttributes(AjaxRequestAttributes attributes) {
    super.updateAjaxAttributes(attributes);
    attributes.getDynamicExtraParameters().add("return [{name: 'x', value:
attrs.event.clientX}, {name: 'y', attrs.event.clientY}]; ");
  }

  @Override
  public void onEvent(AjaxRequestTarget target) {
    IRequestParameters parameters = getRequest().getRequestParameters();
    int x = parameters.getParameterValue("x").toInt(someSaneDefault);
   ....
  }
});


Martin Grigorov
Wicket Training and Consulting
https://twitter.com/mtgrigorov


On Mon, Jul 28, 2014 at 7:37 PM, jayeshps <ja...@gmail.com> wrote:

> Hello,
>
> I have a requirement where I need to change the images based on the current
> position of the mouse on a particular background image, I have one
> background image and around 15 different images that need to be shown on
> top
> of the background image based on where the mouse points to on the image.
>
> I have created two WebMarkupContainers. baseMarkupContainer, for the
> background image which is always visible, and hoverMarkupContainer with the
> hovering image which is visible on a mouseOver event.
>
> I am using an AjaxEventBehavior to implement the same. It is working fine
> with two images, but could anyone tell me how do I change the image for
> several different mouse positions, relative to the background image.
>
> I am not very familiar with javascript, if thats the only option, could
> some
> help me with changing the name of the image file in the
> hoverMarkupContainer
> based on mouse position, and how this change can be reflected back in the
> wicket code.
>
> Thanks and Regards.
> Jayesh Sarswat
>
>
>
> --
> View this message in context:
> http://apache-wicket.1842946.n4.nabble.com/onMouseOver-and-onMouseClick-in-wicket-tp4666775.html
> Sent from the Users forum mailing list archive at Nabble.com.
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>
>