a clickable image

Let's take a bit of a side road and try to make a CRF with an image that is clickable. First we need to create a folder in our OpenClinica folder structure where we can store our files. If you have not created one already do so now and take as name "extrafiles": for example D:\tomcat\webapps\oc341\extrafiles. Then download to that location the image file brain.jpg plus the so-called image-map, that was wrapped in a javascript-command: brain.js

Now download this CRF and as you've done before: upload it and preview it. Hover above one of the coloured areas and see what happens. Now click one of the coloured areas and watch the console. This is all because we defined the image-map. You can see what happens in the image-map when you right-click on one of the areas and then choose "inspect element". You now see that the area is a polygon made up of lots of coordinates. This area has a name and a title. Now how exactly do we get to see the name in the console? Because we defined a function with jQuery that is applicable to all elements of type "area". When you click one, write the name and the title in the console:

$.noConflict();
jQuery(document).ready(function($) { 
$('area').click(function() { 
	var areaName = $(this).attr('name');
	console.log('you clicked: ' + areaName + ', ' +$(this).attr('title')); 
	});
})

Now let's make a reference to te checkbox group:

	var ckbGroupColour = $("#brainImage").parent().parent().find("input");

As we have seen with the radio-buttons, we can loop through the checkboxes. Let's do that when we click on an area

	$('area').click(function() { 
		var areaName = $(this).attr('name');
		console.log('you clicked: ' + areaName + ', ' +$(this).attr('title')); 
		for (var i = 0; i < ckbGroupColour.length; i++) {
			console.log(ckbGroupColour[i].value);
			}
	});

Now it's relatively a small step to change the status of checked from true to false or from false to true:

for (var i = 0; i < ckbGroupColour.length; i++) {
	if(ckbGroupColour[i].value == areaName){
		ckbGroupColour[i].checked = !ckbGroupColour[i].checked;
		}
	}

And our complete code then is:

<img src="extrafiles/brain.jpg" width="700" height="450" border="0" usemap="#brainmap" id="brainImage"/>
<script src="extrafiles/brain.js"></script>
<script src="includes/jmesa/jquery.min.js"></script>
<script>
$.noConflict();
jQuery(document).ready(function($) { 
	var ckbGroupColour = $("#brainImage").parent().parent().find("input");
	$('area').click(function() { 
		var areaName = $(this).attr('name');
		for (var i = 0; i < ckbGroupColour.length; i++) {
			if(ckbGroupColour[i].value == areaName){
				ckbGroupColour[i].checked = !ckbGroupColour[i].checked;
				}
			}
	});
})
</script>

Start-page of the workshop.

this page was last reviewed July 2015