Hello,
I am creating a webpage where when you hover over a button it changes the background of a strip to an image. Then when you leave the button it changes back to another image. This can easily be done on the standard editor by creating MouseIn and MouseOut events using the following code;
export function button1_mouseIn(event) {
$w( ‘#columnStrip4’ ).background.src = “https://static.wixstatic.com/media/519d38_8f6fd782b12d49a398f4082bdb9d5f0d~mv2.jpg” ;
}
export function button1_mouseOut(event) {
$w( ‘#columnStrip4’ ).background.src = “https://static.wixstatic.com/media/519d38_20f42730df5d45d88b34e21b8fd86dab~mv2.jpg” ;
}
However we want to do this on Editor X but there is no element with a background, as all background images are essentially just images stretched or expanded to fill the section.
I originally thought we could use the section for ex. $w( ‘#section1’ ).background.src = but that does not work. I tried using #page1 and ‘Document’ but that doesn’t have .background
Anyone have some suggestions on how we could do this on Editor X? We would do it on the standard editor but hover boxes do not scale properly and the design of the website 100% relies on this for their intended affect.
Thanks in advance!