How-to insert Image into Hyperlink in GWT

Question

Is there a way to make a clickable Image in GWT?

Answer 1

What you could do to insert the Image in the Hyperlink:

Hyperlink link = new Hyperlink();
Image image = new Image(someUrl);
...
link.getElement().appendChild(image.getElement());

To make the Image clickable you simply add a ClickHandler to it.

Answer 2

Hyperlink link = new Hyperlink();
Image image = new Image(someUrl);
...
link.getElement().getFirstChild().appendChild(image.getElement());

would be correct. Otherwise the image is added after the hyperlink

Answer 3

Just attach a ClickHandler to the image:

Image img = new Image(URL);
img.addClickHandler(new ClickHandler() {
  @Override
  public void onClick(ClickEvent ev) {
    // do sth.
  }
};

That's it. The image is clickable. To indicate the clickability to the user just use an appropriate CSS style like cursor:pointer.

Answer 4

    Anchor anchor = new Anchor();
    anchor.getElement().getStyle().setCursor(Cursor.POINTER); 
    anchor.addClickHandler(new ClickHandler() {
          @Override
          public void onClick(ClickEvent ev) {
              Window.Location.assign("http://url.com");
          }
    });
    Image img = new Image("image/path.jpg");
    anchor.getElement().appendChild(img.getElement());

Use Anchor instead of HyperLink because addClickHandler is depreciated in HyperLink. The second line adds the hand pointer to the cursor when you hover the image. The rest is self explanatory I think.

Answer 5

You can also create a ToggleButton and apply some css styling. Then you have already all the ClickHandler support included.