Hi, I’m trying to create a map of different sectors in the city. I want each sector to be a button, with its hover and click functions. Problem is, each button is contained inside a box, and when a box falls over another one, no matter the images don’t overlay, the invisible area of the button does, and they interfere with each other. Is there a way to limit the button area only to the shape of the button?districts.zip (184.0 KB)
Only if you use SVG. Because you can then target the actual paths. WHich can be any shape you want. There should be some examples here, on the forum, that will help in understanding that concept.
What you could do is create an SVG file that overlays your map with the specific shapes (paths) and then create actions that “target” those paths for the clicks / buttons.
I am using svg graphics for the map, but they also appear inside a box, and when i give them a button behaviour, the problem appears.
oh no .... I'm quoting myself! 
@elegram you would have to run a small function, maybe on scene load, to get to the actual path information in the SVG. Plus, you would also have to give those "paths" ID's.
pseudo example
<svg>
<path id="area1" ...
</svg>
on Scene Load (maybe)
area1.on('click')
play timeline or do another action in hype
Note this is not actual code but a way to explain the logic.
If you search here in the forums there will be examples of doing something similar to this using SVG's
1 Like
Thanks!!! I’m going to test it and let know if that works
