Using HTML and JavaScript with an image

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. Click the Build a New Klip and add an HTML component.
  2. In the component tree, click the Klip component and enter a name for the Klip Title.
  3. 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.
 
Have more questions? Submit a request