- INTERACTIONS -
Callout & Highlight
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
Callout and Highlight animations using hide, show and timers