By default, all Actions are applied to a div container surrounding your elements, which is a rectangular bounding box.

You can try to:

  1. Create an Action (eventHandler) using the UI, e.g. to apply a hover event to one of your elements.
  2. Pop open code mode, and look for two things:
       a.  The id of the event handler you just created (something like "haiku:Blue-Circle-cd15b1f49a409def").
       b.  The place in the template where the id in ^ a is found.
  3. The template element you found in 2b should have children nested inside.  Choose one of these, e.g. an elementName: "path" or elementName: "circle" (depending on which non-rectangular element you want to target), and copy its haiku-id to your clipboard (e.g. "Page-1-44566a19a389e4ae").
  4. Finally, go back to your Action (eventHandler) that you found in 2a, and replace its ID with the ID you found in 3.

In short, this process will point your eventHandler to a new element (a child element, and one that's not a rectangular div) instead of the whole bounding container.

Did this answer your question?