How to make Image clickable only within it's contour/shape

(Valentin) #1


I need to make multiple animations on a web page, all triggered by the mouse click action.
The goal is to have a house in the background, and all the elements that compose it must come alive when the mouse passes. I managed to configure my actions and my timelines differently.
Here is the problem, the images that follow one another are not necessarily straight or square, and the box of the image is far too large. In picture it gives this for exemple:

I would like that during the passage of the mouse, only the element delimited by its contour is clickable and not the entire box. The multitude of images makes the user do not necessarily click on the good animation since the windows are square.

Here is the box where the hover take effect:

I tried with different format of images (svg,png,jpeg…) and the result are the same. I specify that my images have a transparent background.

Any ideas to my problem?

Thank so much.
Sorry for my english.

(Mark Hunte) #2

Have a look at the links in this post related to Clipping Paths

(Rick) #3

My “work around” for this was to guide the viewer with outlines by creating an outline and placing it in the mouse over button part. It has the trouble of square boxes but is compatible with all browsers.

(Valentin) #4

Thanks for your response.
The CSS clip-path property seems to be deprecated on IE and Edge.
Do you know an other way to do that?


The ‘multiple boxes’ option @Rick4F mentioned is the most compatible method of creating a mouse click action in a non-rectangular (and non circular) shape.

(Rick) #6

I couldn’t sleep, too damp warm, :sweat: so my head kept spinning around this.

A: I remembered there is a topic around here to create custom shapes with Hype’s build in elements by adding and “substracting” you can get pretty far. But, I just looked and cannot find that topic. :sob:

B: So back to my warm bed… I came up with the idea to cut up your image(s) to keep their “footprint” small so to speak.

After experimenting with it this morning I realized it was too cumbersome to be effective.

But thinking back to (A) and combining that with (B) I came up with this idea:

Just create a rectangle, give it the action you need, then copy/paste and resize it to your needs.
It’s not purfect but it gives you more control of the “box” that triggers an action and a smaller ""footprint so things get easier reachable behind it.

Edit: duh, I forgot you can rotate stuff…

(Valentin) #7

Thank you Rick. I really appreciate your help. I hope that you have been able to sleep despite the heat!
I will use this solution which seems to me the best.
Have a nice day!