Open Site Navigation

Image Swap on Hover in Editor X

In this post, you will learn how to swap images that display on your site when users hover over specified areas on the site. This is a pretty simple trick that does require a little bit of code.


Image Swap in Editor X

Before you apply the code, watch this video to ensure that you set your website up correctly first!



Also, before you add the code, make sure you add the Event Handler "mouseIn" and delete the default comments that Wix adds.


 

$w('#imageX1').show('fade') .then (() => { $w('#imageX2').hide('fade'); $w('#imageX3').hide('fade'); })

 

Make sure to set "#imageX" to the ID of the images on your website. And if you do not want the images to fade in/out, remove the " 'fade' " parts of the code.


Have fun!