Question

I want to be able to insert a div tag that surrounds an <img> tag.

I found the following class when I was searching for a way to create a Anchor with an image instead of text.
Now this works, but I need to surround the <img> that is inside a <a> tag.

public class ImageAnchor extends Anchor {
    public ImageAnchor() {
    }    

    public void setURL(String imageURL) {
        Image img = new Image(imageURL);
        img.setStyleName("navbarimg");
        setTarget("_blank");

        DOM.insertBefore(getElement(), img.getElement(), DOM
                .getFirstChild(getElement()));
    }
}

The above outputs this:

<a class="gwt-Anchor" target="_blank" href="#">
  <img src="img.png" class="navbarimg"/>
</a>

But I need this:

<a class="gwt-Anchor" target="_blank" href="#">
  <div class="style">
    <img src="img.png" class="navbarimg"/>
  </div>
</a>

For sake of understanding the reasoning behind this, I do not know how many ImageAnchors I will need, it depends on what is returned from a database.
I just add them all to a flowpanel with their corresponding image and link. (later I plan on adding a descrption that appears on hover)

Answer 1

Why don’t you just use a HTMLPanel?

        HTMLPanel myHTML = new HTMLPanel(
            "<a class=\"gwt-Anchor\" target=\"_blank\" href=\"#\">  " +
            "<div class=\"style\">    " +
            "<img src=\"img.png\" class=\"navbarimg\"/>  " +
            "</div>" +
            "</a>");
    RootPanel.get().add(myHTML);

Lookes a little bit easier and you don’t need so much DOM manipulation….

On the otherHand you might really have a good reason to use something like this!:

        class ImageAnchor extends Anchor {
        public ImageAnchor() {
        }    

        public void setURL(String imageURL) {
            Image img = new Image(imageURL);
            img.setStyleName("navbarimg");
            setTarget("_blank");

            HTMLPanel stylePanel = new HTMLPanel("<div class=\"style\"");


            DOM.insertBefore(stylePanel.getElement(), img.getElement(), DOM
                    .getFirstChild(getElement()));

            DOM.insertBefore(getElement(), stylePanel.getElement(), DOM
                    .getFirstChild(getElement()));
        }
    }

    ImageAnchor ia = new ImageAnchor();
    ia.setURL("img.png");

    RootPanel.get().add(ia);

Both examples produce

<a class="gwt-Anchor" target="_blank"><div><img src="img.png" class="navbarimg"></div></a>

for me.

Regards,
Stefan