Developer Tips & Tricks - Creating Image Maps

February 01, 2012

Last week I talked about how to handle image click events. This week, on a related topic, I'd like to discuss how to implement image maps. We use image maps in the Campus Concierge Presentation, one of our free digital signage templates, to navigate to a different page of the Presentation when one of the tabs at the top is clicked. Image maps can be somewhat involved, so if you are not already familiar with them, I suggest reading this article before continuing on with the rest of this post.

Get started with Rise Vision

Image maps can be thought of as hot spots within an image. The first thing you'll need to do is determine the coordinates of each of these hot spots. When building the Campus Concierge Presentation, I simply opened the background image in MS Paint, and noted the coordinates that defined each of the tabs. With coordinates in hand, I was then able to write a Javascript function to create the image map in the Presentation's HTML. Here's a snippet of what that looked like:

function initImageMap() {
var backgroundImage = getPlaceholderIFrameIds("CampusNewsBackground")[0];
var imageMap = {
name: "tabs",
areas: [
{
shape: "poly",
coords: "0, 0, 218, 0, 212, 82, 0, 68",
title: "CampusNews"
},
{
shape: "poly",
coords: "219, 0, 377, 0, 379, 75, 217, 82, 215, 45",
title: "Events"
}
]
}

if (backgroundImage) {
document.getElementById(backgroundImage).contentWindow.addImageMap(imageMap);
}
}

Let's break this down to see what the code is doing. The first line is:

var backgroundImage = getPlaceholderIFrameIds("CampusNewsBackground")[0];

I've talked about getPlaceholderIFrameIds before. This code gets the first iFrame that is inside the Placeholder named CampusNewsBackground. In this case, the first (and only) Item in that Placeholder is an Image Item which contains the background image.

Next, we define the image map. This is where you'll use the coordinates of each hot spot:

var imageMap = {
name: "tabs",
areas: [
{
shape: "poly",
coords: "0, 0, 218, 0, 212, 82, 0, 68",
title: "CampusNews"
},
{
shape: "poly",
coords: "219, 0, 377, 0, 379, 75, 217, 82, 215, 45",
title: "Events"
}
]
}

Finally, we associate the image map with the background image:

if (backgroundImage) {
document.getElementById(backgroundImage).contentWindow.addImageMap(imageMap);
}

So far, so good, but we still need to set up some sort of event handler so that we know when a user clicks on one of the hot spots. That is accomplished by adding the following function:

function onImageClicked(id, title) {
//Check parameters and do something.
}

The id parameter contains the ID of the Image Item, while the title parameter contains the value of the title that was previously defined in the image map. (Incidentally, you can name these parameters anything you want.) What you do when a hot spot is clicked is entirely dependent on the nature of your particular Presentation. In the case of the Campus Concierge Presentation, the previous page is hidden and the page associated with the tab that the user has just clicked on is shown.

The last thing left to do is call the initImageMap function after the Presentation has loaded:

&lt;body style="height:1920px;width:1080px; margin: 0; overflow: hidden;" <span style="color: #0000ff;">onLoad="initPage();"</span>&gt;

If you want to examine the code for the Campus Concierge Presentation, click here to see a Preview, and then click on Copy Template in the Preview bar.