Changing page's background onMouseIn

Hey all,
I am working on a new website and try to find a way to change the site’s background when hovering over some elements (buttons, menu elements, ecs’)
I tried to use the .background and .style but always get an error.
I was wondering, maybe one of you can help me with this issue…
thanks

you can place a shape on your page, stretch it out so that it covers the entire page, then use .style to modify the color

that’s a good idea! thanks, i will try.
I hope to find a way to adjust the size to the screen

actually, it’s not a good solution for me. as i want to change the BG to images and shapes have only color values. there is no way to handle the site BG directly?

@goonberlin
haven’t seen a way to access it but someone else might know.

one other alternative is just to place a hidden image on the screen and then show the image onMouseIn

@mikemoynihan99 yeah, but it’s a bit dirty :smiley: thank you

@goonberlin Hey I am working on trying to do the same thing but no luck. Have you found a way to do this or a solution?
Thanks in advance!

Hey if you are using strip, this may be useful →
https://www.wix.com/corvid/reference/$w/columnstrip/background

@ajithkrr Thanks so much this might be exactly what I need! Do you know how to have an element tied to this so when you hover over the element it changes the background? I know this code will take care of the background image just not sure how the individual element links to it.

I think you have to change the background of the strip if the mouse hovers on a button. Right ? If so, you should add a button to that strip. Then add onmousein function from the properties panel (for the respective button) →

export function button1_mouseIn(event) {
    $w('#columnStrip2').background.src = "wix:image://v1/68d3a9_1de7529c444b4c9eb38401f8efe0cad2.jpg/flowers.jpg#originWidth=1970&originHeight=1120";
}

Then you have to add a onMouseOut function →


export function button1_mouseOut(event) {
       $w('#columnStrip2').background.src = "wix:image://v1/68d3a9_1de7529c444b4c9eb38401f8efe0cad2.jpg/flowers.jpg#originWidth=1970&originHeight=1120"; 
}

(Don’t copy the export function button1_mouseOut or mouseIn(event) from here.
Follow the steps in the image.

Post if it works !!!

@ajithkrr
This worked perfectly! You are amazing, I totally did not think of onMouseIn and onMouseOut what a great solution! Thanks so much!

Welcome !!!

How can I achieve something like this - https://www.allisamazing.com/

You can create buttons and add different onMouseIn event for all buttons and change the background image each time with a different source.