Question

I am trying to create a custom GWT Button based on an image.

I have an image that is not rectangular, something like this:

     

1. Now, I want the click-able area to only work inside the visible parts of the image (non-transparent areas). This would mean that it’s possible for someone using the button to click in the transparent corners of the image (Button) and not trigger the click event on the Button. Is this possible without having to create a custom widget (and the HTML to go with it)?
2. I would like to make a set of these non-rectangular buttons, in which there would be other buttons that would inter-connect with this one (their visible edges will bump right up against eachother, in sort of an inter-locking pattern), sort of like this:
   
   
   That’s a very complex example, mine wouldn’t be as big/many but the concept holds: inter-locking buttons of custom shape each being an individual button. These buttons would not be generated statically, but grow based on action.

Is this even possible? I have no clue where to begin. The 2nd picture (pyramid inter-locking triangles) is more complex than what I’m envisioning, but the concept holds. The reason it’s more complex is because ultimately I would only be inter-locking buttons Horizontally (think of the 2nd row near the top of the pyramid picture, the 3 triangles from left to right).

Answer 1

You can create a simple Map Widget for <map>, <area> tags.

public class ImageMap extends Widget implements HasMouseDownHandlers {

  private MapElement mapElement;

  public ImageMap() {
    mapElement = Document.get().createMapElement();
    setElement(mapElement);
  }

  public String getImgName() {
    return mapElement.getName();
  }

  public void setImgName(String imgName) {
    mapElement.setName(imgName);
  }

  public void addMapArea(AreaElement area) {
    mapElement.appendChild(area);
  }

  public HandlerRegistration addMouseDownHandler(MouseDownHandler handler) {
    return addDomHandler(handler, MouseDownEvent.getType());
  }

}

The creation code:

AreaElement area = Document.get().createAreaElement();
area.setShape("rect");
area.setCoords("389,250,491,502");
area.setHref("#main");

imageMap = new ImageMap();
imageMap.setImg("frontPage");
imageMap.addMapArea(area);
imageMap.addMouseDownHandler(this);

or can use SVG image with raphaeljs for more complex effects (see raphaelgwt). It’s better than map-area solution.