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 button.
  2. Select the HTML Template component.
  3. Select Don't use a data source.
  4. Select the Klip component and enter a name for the Klip Title.
  5. 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://www.w3schools.com/htmldom/pic_bulboff.gif" width="100" height="180">

<p>Click the light bulb 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://www.w3schools.com/htmldom/pic_bulboff.gif";   } else   { element.src="http://research.engineering.wustl.edu/~todd/cse330/javascript/pic_bulbon.gif";   } }

  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.

Related links: