Using HTML and JavaScript with an image

An HTML template component lets you associate HTML data and JavaScript with an image.

These instructions create a light bulb image that turns on and off when clicked.

Step 1: Building the HTML component

  1. Click the Build a New Klip and add an HTML component.
  2. Select the Klip component and enter a name for the Klip Title.
  3. Select the HTML Template component.

Step 2: Adding HTML

  1. 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>

Step 3: Adding 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. From the Properties tab, 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.