Skip to main content

How do I use an HTML template component to associate HTML data and JavaScript with an image?

Updated

An HTML template component lets you associate HTML data and JavaScript with an image. Learn more about how to build HTML template components here.

This article will show you how to create a lightbulb image that turns on and off when clicked.

Building the HTML component

To build the HTML component:

  1. In an open dashboard, click +Add Klip > +New custom Klip, or, from the Klip Library, click +New custom Klip.
  2. Add an HTML component.
  3. In the component tree, click the Klip component and enter a name for the Klip Title.
  4. Select the HTML Template component and add it to your Klip.

Adding HTML

To add HTML, from the Properties tab, in the HTML Template box, copy and paste the following HTML data:

<!DOCTYPE html> <html> <body>

<img id="myimage" onclick="changeImage()" src="http://res.cloudinary.com/klipfolio/image/upload/v1500283193/pic_bulboff_to4zaq.png"  height="180">

<p>Click the lightbulb to turn on/off the light</p>

</body> </html>

Adding JavaScript

To add JavaScript:

  1. From the Properties tab, Script field, click the Use JavaScript with this HTML Template link.
  2. In the Script box, copy and paste the following JavaScript.

window.changeImage = function() {
    element=document.getElementById('myimage');
    if (element.src.match("bulbon")) {
        element.src="http://res.cloudinary.com/klipfolio/image/upload/v1500283193/pic_bulboff_to4zaq.png";
    }
    else { element.src="http://res.cloudinary.com/klipfolio/image/upload/v1500283189/pic_bulbon_tvpcg5.png";
    }
}

  1. At the Height field, use the drop-down menu to select a display size.
  2. At the Overflow field, use the drop-down menu to select Auto scrollbars.
  3. Click the Save button.
  4. Name the Klip.
  5. Click the Finished button.
 

Related articles