Mouse Actions and layering them

Hi,

I am messing around with creating some fake ads for practice and am wondering if there really is not a way to have mouse actions working (rollovers in this case) while also being able to have the entire ad clickable (to a URL). It seems if I have a rectangle element with "0" opacity set to click through to a URL, that it "covers" all of my rollovers rendering them useless. From the Tumult documentation, this is correct, BUT I am wondering if there is a workaround.

I am including the file. If I have done that incorrectly, let me know. NOTE: I have turned off the layer that is the rectangle I am using to make the whole ad clickable, so that you can see the rollovers and how they are working to change the headphone colors.
Beats Ad.zip (1.4 MB)

Thanks!

Does this solve it for you?

Beats Ad.hype.zip (1,4 MB)

Hi,

I opened that file, but it acts the same way my previous file does. I don't see an add making the entire ad clickable. It seems you deleted the top element that I was wanting to use to make the whole area clickable. That's the rub - how do you have the entire ad area be clickable, while also having the rollovers work?

Hey, while I'm at it - I know I'm going off topic, but since you can see the file I am wondering if you can tell me why the "SHOP" button padding looks fine in the file, but is off center when previewed. I am having alignment issues on other files as well, where two objects are aligned in-file, but on preview are not. Makes no sense and is making me mental.

I think then I don't understand what you mean. I get roll overs and the click?

CleanShot 2022-06-26 at 22.49.02

About the button… I don't use buttons apart from demonstrating stuff. I usually just use text elements or/and mainly rectangles to build my own. That said, it looks centered to me in Safari and Chrome?

CleanShot 2022-06-26 at 22.57.03@2x

1 Like

My bad! You are right, your file has the rollovers and the click. Although, I can't see what you did to make it work. Can you explain?

Weird on the alignment. I only see Safari and Firefox (my default) in the Preview list in Hype, and haven't yet figured out how to get Chrome to appear in the list. I do have it installed and open. Anyway, when viewing on Safari the alignment is only slightly toward being correct, but still off.

Thanks!

Hype uses direct event. I used a bubbled event. Bubbles down to the doc root.

Ok. I am not well-versed enough in what you're referring to. Sounds like developer/code info, and I don't code. I was hoping for a solution that uses the actions. I now see that you added code, but again not something a non-coder using Hype would know how to accomplish. Given that, would you say your solution is the only way to do what I want to do (make the whole area clickable, without affecting the rollovers.)?

Thanks again for having this convo with me.

What I always do to combine the hover and fully clickable ad is to make a click layer have the exit function (ofcourse positioned above the non interactive elements) And on top of that I make hover area's or other interactive stuff that react onhover. However, I also give these elements an exit click function. This way you can have hover elements while keeping the entire ad clickable.

2 Likes

Well that makes total sense! Of course the easy answer is to simply make the rollovers clickable :slight_smile:

1 Like