Developer Tips & Tricks - Handling Image Click Events

January 25, 2012

In building Presentations with our digital signage software, you may find that you need something to happen when a user clicks on or touches an image. For example, the image might be a button that should show a different page in a multi-page Presentation when selected. Never fear! There are not one, but two ways in which this can be accomplished.

Get started with Rise Vision

The first way is to use the Image Item. Simply add the Image Item as per usual, and then add the following Javascript to the Presentation's HTML:

function onClick(id) {
//Code to handle clicking on an image.
}

This function will be called whenever an image is clicked. To determine exactly which image it was, you can inspect the id parameter and execute different code depending on its value.

The tricky part is in figuring out what the ids of each of the Image Items are. The easiest way to determine this is to add the following code to the onClick function:

function onClick(id) {
console.log(id);
}

Now when you preview the Presentation and click on an image, the id of that image will be displayed in the console.

The problem with doing things this way is that if you move an image to a different position in a Playlist, or to a completely different Placeholder, the id will change and your Javascript will no longer work as expected. A better alternative, and the one we recommend as a best practice, is to add an image as the background of a Placeholder. When you add an image in this way, a div tag gets added to the HTML, to which you can then add an onclick attribute. Whenever the Placeholder is clicked, the code specified in onclick will fire:

<div id="ph0" placeholder="true" onclick="alert('I was clicked!');" ...></div>

Have another technique that you use? Let us know in the comments or on our forum.