logo
down
shadow

GWT ImageMap, how to register a Mouse Handler to an Area Element?


GWT ImageMap, how to register a Mouse Handler to an Area Element?

By : Cristina
Date : November 17 2020, 11:52 AM
To fix this issue I don't know why handlers in my questions don't fire, but getting inspiration from this leading to this ImageMapArea implementation, I found an approach that works: the trick is to resort to native javascript (JSNI) to set the onmouse call backs -- JSNI Google Doc here.
In case anyone finds it useful as I would have, here is my updated version of ImageMapArea to setup the native handlers.
code :
public class ImageMapArea extends Widget
{
  private AreaElement areaElement;
  private ArrayList<Hook> onMouseDownHooks = null;
  private ArrayList<Hook> onMouseOutHooks = null;
  private ArrayList<Hook> onMouseOverHooks = null;

  public ImageMapArea() {
    areaElement = Document.get().createAreaElement();
    super.setElement(areaElement);
    this.setupNativeHandlers(areaElement);
  }

  public AreaElement getAreaElement() { return areaElement; }

  public void addMouseDownHandler(final Hook handler)
  {
    if (onMouseDownHooks == null)
      onMouseDownHooks = new ArrayList<Hook>(1);
    onMouseDownHooks.add(handler);
  }

  public void addMouseOutHandler(final Hook handler)
  {
    if (onMouseOutHooks == null)
      onMouseOutHooks = new ArrayList<Hook>(1);
    onMouseOutHooks.add(handler);
  }

  public void addMouseOverHandler(final Hook handler)
  {
    if (onMouseOverHooks == null)
      onMouseOverHooks = new ArrayList<Hook>(1);
    onMouseOverHooks.add(handler);
  }

  private void onMouseDown()
  {
    if (onMouseDownHooks != null && !onMouseDownHooks.isEmpty())
    {
      for (int i = 0; i < onMouseDownHooks.size(); ++i)
      {
        final Hook hook = onMouseDownHooks.get(i);
        hook.execute();
      }
    }
  }

  private void onMouseOut()
  {
    if (onMouseOutHooks != null && !onMouseOutHooks.isEmpty())
    {
      for (int i = 0; i < onMouseOutHooks.size(); ++i)
      {
        final Hook hook = onMouseOutHooks.get(i);
        hook.execute();
      }
    }
  }

  private void onMouseOver()
  {
    if (onMouseOverHooks != null && !onMouseOverHooks.isEmpty())
    {
      for (int i = 0; i < onMouseOverHooks.size(); ++i)
      {
        final Hook hook = onMouseOverHooks.get(i);
        hook.execute();
      }
    }
  }

  private native void setupNativeHandlers(final AreaElement elem) /*-{
    var self = this;
    elem.onmousedown = function(){
        self.@bkg.gwt.resources.client.widget.ImageMapArea::onMouseDown()();
    };
    elem.onmouseout = function(){
        self.@bkg.gwt.resources.client.widget.ImageMapArea::onMouseOut()();
    };
    elem.onmouseover = function(){
        self.@bkg.gwt.resources.client.widget.ImageMapArea::onMouseOver()();
    };
  }-*/;
}


Share : facebook icon twitter icon
Javascript - Detect if mouse button is down when the mouse entered active area (mouse was pressed down outside this area

Javascript - Detect if mouse button is down when the mouse entered active area (mouse was pressed down outside this area


By : Mohammad Hafiz Mypap
Date : March 29 2020, 07:55 AM
Any of those help Yes: ensure that the mouse event handlers to detect a mouse-down event are attached to some element that occupies the entire viewport. For instance the HTML (document) element...
GWT - area selection/imagemap

GWT - area selection/imagemap


By : user3367234
Date : March 29 2020, 07:55 AM
it helps some times I'm sure there are a couple ways of going about this. You might want to try some extension of the an already existing class as was done here with ComplexPanel http://www.koders.com/java/fid1ACE81656C6F49C2E81126751E938A61215D6A6F.aspx?s=mdef%3ainsert
can i have an onclick event on a imagemap area element

can i have an onclick event on a imagemap area element


By : SmartyParts
Date : March 29 2020, 07:55 AM
To fix this issue I would like to put an onclick event on an area element. Here is my setup: , Pay attention:
code :
$(".blue").on("click", function(e){
    e.preventDefault();
    /*
       your code here
    */
});
How do I make an imagemap area clickable with jQuery?

How do I make an imagemap area clickable with jQuery?


By : silent_mongoose
Date : March 29 2020, 07:55 AM
I wish did fix the issue. You need the href. And you have to ignore events in the click function. Also, most readable if you give each area an id, or, if some areas respond in the same way, use a class (i.e. class="areaRed")
e.g.
code :
<map name="myMap" id="myMap">
 <area id="area1" shape="rect" coords="10,10,100,100" href="#">
</map>
$("#area1").on("click", function(e){
  e.preventDefault();
  /*
   your code here
  */
});
Onclick event on an imagemap area element

Onclick event on an imagemap area element


By : user2663262
Date : March 29 2020, 07:55 AM
should help you out You should have to call a javascript function from area tag and put your php code in that function definition
Eng
Related Posts Related Posts :
shadow
Privacy Policy - Terms - Contact Us © ourworld-yourmove.org