Image with clickable areas to choose

Ionic Framework ionic-v3
#1

Hi, I want to make an overview in which the user can select how far he has been driven by choosing an area of an image (like here:)
image

After clicking a section the section should be highlighted:

image

and then the user clicks OK…

So my question is how to do something like that?

Is HTML image mapping like

<map name="map">
  <area shape="rect" coords="0,0,82,126" (click)=area1()>
  <area shape="circle" coords="90,58,3" (click)=area2()>
  <area shape="circle" coords="124,58,8" (click)=area2()>
</map>

a good opportunity to manage that in any way or are there are (better) thoughts?

My searches ended up in image mapping, but I’m not sure how to manage this best with the ionic 2 bindings.

Or is it better to use a background image with buttons on it (then how to place them correctly on the image)?

Thanks in advance!

#2

Hi, is this available?

#3

yes, it is.

    <area shape="rect" coords= "0,0,82,126" href="z0" />

Is simply HTM, not ionic, so you can’t use click()
z0 is a new page. I didn’ t find a way to run a function.

P.

1 Like