Button Component mouse over

[Asim Khan]

We have creative, mouse over to expand. The creative is working properly mouse over to expand

but it should only expand again when user leave and mouse over again.

Check this link

https://www.google.com/doubleclick/studio/externalpreview/#/HEg6tfxvRw6qpkVN0h5ocw?creativeId=41066742

Follow below steps:

Mouse Over - it will expand creative.

Close expand creative with X

it will be difficult to close it.

[micsun-al]

I wonder if animating an invisible div to block mouse interactions would work?  Could go something like this...

1. On your initial page, create a div, width/height at 100% and "display: none", make sure it is the top layer and name it something like "mouse-blocker".
   
2. Create a couple of key frames at 2 and 3 seconds for the div.
   
3. Modify the third key frame so the div animates off the stage.
   
4. On your second page (the expand), create an event to set the CSS of the div on your initial page to "display: block".

This makes it so the invisible div blocks mouse events for 2-3 seconds (or whatever you set your key frames to) and gives the user a chance to get their cursor off the ad.

Otherwise, making it so it expands on hover instead of roll over would work.  Generally some type of indicator like a line or countdown indicator is useful for this.

[rika]

Hi Asim,

Have you resolved the issue?  If not, please attach the source file (pre-published one) so that we can take a look.

Thanks,

Rika

(GWD team)

[Asim Khan]

I attached expanding_creative.zip which is Google Web Designer file.

I trying using delay counter but it is not working properly so I disabled it.

ideally, mouse-in should only trigger expanding.

User click, creative should expand then user close creative

User pointer should expand creative only after user pointer is out of creative and enters again.

[rika]

Hi Asim,

The problem is that the tap area is covering the entire banner page, so any mouse move after you collapse the page

will trigger the mouse over event.  I have a couple suggestions to make it work the way you want:

1) Reduce the tap area coverage so that it won't trigger the mouse over event

2) Create an event to hide the tap area when hovering the mouse and a timeline event to bring up the tap area after a few seconds

(similar to what micsun-al suggested in the previous post):

expand-button > mouseover > CSS, Set styles > expand-button > display: none

banner-page > Timeline, event-1 > CSS, set styles > expand-button > display: block

Please find the attached file.  Now, we have the known issue in Safari that the event won't work when you have the animation delay,

so the delay is taken out.  You may need to adjust the images.

Hope it helps,

Rika

(GWD team)