Using events and $w API we can react to user actions and change the site content. ​

 

In this example, we use a combination of a black and white image, three color images and three transparent boxes to create the effect.

​

The three transparent boxes are used as hotspots that react when a user mouse hovers on top of them (using the events onMouseIn and onMouseOut).

​

On the onMouseIn we make the color picture below the hotspot appear.

​

On the onMouseOut event we trigger a timer to wait 0.5 secs, then make the color picture fade out.

​

In addition to the color picture, we also make a box with a label appear and disappear using the same logic.

​

The actual show and hide logic is in the file showHide.js