Search code examples
imagemapsapui5

How to handle click event for sap.ui.commons.Area in OpenUI5

I am using the ImageMap control to make multiple clickable areas on an image.

var oImage = new sap.ui.commons.Image("i1");
oImage.setSrc("images/FlowersAndWesp.jpg");
oImage.setAlt("alternative image text for i1");
oImage.setUseMap("Map1");
oImage.placeAt("sample1");

var oMap = new sap.ui.commons.ImageMap();
oMap.setName("Map1");
var aArea1 = new sap.ui.commons.Area ("Area1", {shape: "rect", alt: "Bee", href: "http://www.sap.com", coords: "40,20,100,80"});
var aArea2 = new sap.ui.commons.Area ("Area2", {shape: "circle", alt: "Flower", href: "http://www.sap.com", coords: "170,60,30"});
oMap.addArea(aArea1);
oMap.addArea(aArea2);
oMap.placeAt("sample1");

When I click on aArea1, aArea2 instead of href click event should be invoke and in that I can write some popup dialog.

Solution

  • The sap.ui.commons.Area doesn't expose a press event itself, but passes it to the parent ImageMap.

    So if you want to handle the press event of an Area, you'll have to hook your logic up to the ImageMap and read the event argument to find out which area has been pressed.

    Please refer to https://jsbin.com/qujade/edit?html,output for an example of how this works.