Callout and Highlight

Interactions

Create callouts and highlights using hide, show and timers.

Play with the example below to see what you can do:

Open this example as a template so you can see how everything works in the Editor. 

This example demonstrates how to use events and the $w API to react to user actions and change the page content. ​

 

We use a combination of one grayscale image, three color images and three transparent boxes to create the callouts and highlights. The three transparent boxes are used as hotspots that react when a user’s mouse hovers over them.

Using the onMouseIn event of the hotspots, we make a color picture appear, highlighting one section of the image. We also make a box with a label appear, creating a textual callout.

Using the onMouseOut event, we trigger a timer to wait half a second and then make the color picture and callout fade out.

The show and hide logic is imported into the page code from the showHide.js file. It resides in the site’s Public code section.

Next Steps

  1. Open this example in the Editor to work with the template.

  2. Publish the site.

  3. Learn how to work with examples in Corvid.

Example Code

arrow&v

Example Demonstrates

onMouseIn & onMouseOut

Hide & Show

To start using Corvid:  Go to the Wix Editor > Dev Mode > Turn on Dev Mode