Buttons Not Clickable

[jax]

When I run the creation as a preview/test, it works inside of hippo, however if I try to run the test.html or the exported version of the software directly from a browser... the button is not recognised.

I am unsure as to why this is happening though have a sneaking suspicion that it may be due to the fact that the button is currently located on a layer beneath a PNG Border

The PNG Border having a transparent middle area so the content appears to slide in or out from behind a "window"

Does Hippo see PNG files as solid elements even with transparencies or am I missing something.

If Hippo does see the PNG file as a solid element, is there a better way to create the same border pattern so that all the content below it's layer can be interacted with?


I have performed further testing and generated an SVG file which has the same area transparent and the design is full vector.

It also is in a layer above the button and the button still refuses to be recognised as a button outside of the internal test window.

[jax]

Problem has a result.

Sadly, you can not have buttons on layers beneath an object that masks a portion of them. if you can I have not yet figured out how to do this.

Both SVG and PNG files are recognized as being the top layer and solid even if content below their layers can be seen through the transparent zones.

1 Terrible solution would be to build the border out of 4 pieces.. like a jigsaw so that the central area is completely transparent and there IS no image covering it (transparent or otherwise)

I hope there is a more reasonable solution to fix this. Will keep looking at the other tools and see if three is some kind of "mask tool" available.

[Hippani]

Hmmm.. I replied to this already, looks like I forgot to post it or something.

Basicically in HTML you can't click through something unless you use the pointer events style. Unfortunatly there is only a handful of browsers that use this feature, so we don't use it as we like to support as many browsers as possible.

Instead, make sure the buttons are always in the top layer and nothing is covering them. You may need to use an art package like paint or the crop tool to cut up your image. Like you say, build the border out of 4 pieces.

Sorry there is not a better answer. Other packages might be able to support this feature. However, their HTML export won't work in older browsers and many tablets and phones won't work either.

[Hippani]

I've just done some checking. The CSS style pointer-events:none; can be used in HTML to allow the user to click HTML items below another. It is only really supported by Safari and Firefox. So it's not really a good cross browser solution.

[Hippani]

Also Chrome supports it. But not IE or Opera.

[Hippani]

We've done an update to Hippo Animator, it's not online yet though. In the player you now can't click a button under an image. So at least it works as expected.

[jax]

Hi,
Thank you very much for the replies, it at least confirms my suspicions and I agree, the best solution is one that works for cross browser support.

Also, just to confirm.. so long as an image is not covering the button it should still work even if the button is not on the top layer?

So if the border were made of 4 pieces and the button were in the middle well away from the border.. the button will still work?

[Hippani]

Actually, I've come up with another solution. I'll create a demo quickly and post it. Basically, if you replace the button with an image sequence or a toggle button. You could then add a button with no fill above the image and use it to control the toggle button/sequence below the image, giving the appearance it is being pressed. Give me 1 hour hour and I'll see what I can do.

[Hippani]

Here is a workaround and demo:

Click Thru Images

[jax]

Awesome.  Thank you very much