Image map support in Img works...with workaround of Canvas.js bug

[cretz]

Looking through the SmartClient source, I finally found a way to do an image map on Img, I simply set the activeAreaHTML attribute. This works just fine except the usemap attribute has an unnecessary apostrophe at the end of the name of the image map causing browsers not to see it. So I just extended Img and in the constructor added:

addDrawHandler(new DrawHandler() {
    @Override
    public void onDraw(DrawEvent event) {
        Element img = getDOM().getElementsByTagName("img").getItem(0);
        if (img != null) {
            String usemap = img.getAttribute("usemap");
            if (usemap != null && usemap.endsWith("'")) {
                img.setAttribute("usemap", usemap.substring(0, usemap.length() - 1));
            }
        }
    }
});

Of course, in my extension I added custom classes for different polygons with click handlers and what not, but hopefully the above can help anyone needing image maps. And hopefully the bug in Canvas.js's imgHTML static function will get fixed too.

[Isomorphic]

Fixed, thanks for the clear report. The fix should be in the next nightly, please confirm.

[squally]

Of course, in my extension I added custom classes for different polygons with click handlers and what not, but hopefully the above can help anyone needing image maps. And hopefully the bug in Canvas.js's imgHTML static function will get fixed too.

Hi Cretz,

I need image maps with smartgwt, can you post your custom classes please ?

@+

[hg_fill]

Unfortunately I could not figure out how to integrate HTML image maps in the current SmartGWT version - have there been any changes on this topic?

What worked for me was to use the HTML pane and add all the relevant img, map and area tags myself. From the area tags I then made calls via JSNI:

...
	mapHTML.append("<AREA SHAPE=\""+ currentArea.getShape() + "\" COORDS=\""+ currentArea.getCoords() +"\" HREF=\"#\" onClick=\"javascript:window.invokeMessageHandler('ObjectID:"+currentArea.getId()+"');\" />\n");
...

It would be great if SmartGWT could directly support image maps in the future.