Image with clickable areas in template

Webix JS
#1

What is the best way to include an image with clickable areas in a Webix template? I want to have an image of a floorplan in my template, and when user clicks on one room, a certain function is called, and when user clicks on another room, a different function is called, etc. I want to stay within my floorplan view, so I don’t want to use href redirects to react to the clicks. Thanks!

#2

try to set classes to areas and handle them in onClick handler
https://snippet.webix.com/mwh0pwiq

#3

Thanks so much intregral. Funny, that picture you used is the exact same one I’ve been working off! The solution below also seems to work, via webix.callEvent() instead of this.callEvent() . But yours is better. Thanks again.

  <img src="sources/images/sample_floorplan.jpg" alt="Workplace" usemap="#workmap" height="600">,

  <map name="workmap">
    <area shape="rect" coords="34,44,270,350" alt="Computer" onClick="webix.callEvent('testClick', ['computer'])">
    <area shape="rect" coords="290,172,333,250" alt="Phone" href="#!/top/unit_view?deviceId=computer">
    <area shape="circle" coords="337,300,44" alt="Cup of coffee" onClick="webix.callEvent('testClick', ['cup_of_coffee'])>
  </map>`,