The heatmap isn't something you would do within LimeSurvey but to capture the coordinates of a click on an image (presumably in relative percentages), you could place something like this in the source of a short-text question. When the image is clicked, the script places a marker at that position and loads the coordinates (comma separated) into the text input. The text input can be hidden by uncommenting line 8 of the script.
Code:
Question 1:<br /><br />
<div class="image-wrapper" style="border:2px solid #999; width: 600px;">
<img src="https://www.google.com/logos/doodles/2015/fifa-womens-world-cup-2015-finals-5184884003831808-hp2x.jpg" style="border:0 none; width: 100%; height: auto;" />
</div>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// Identify this question
var thisQuestion = $('#question{QID}');
// Hide the text input - uncomment below
//$('input.text', thisQuestion).hide();
// Create the click "marker"
$('.image-wrapper', thisQuestion).append('<div class="click-marker" />');
var leftVal = 0;
var topVal = 0;
var displayVal = 'none';
if($.trim($('input.text', thisQuestion).val()) != '') {
leftVal = $.trim($('input.text', thisQuestion).val()).split(',')[0]+'%';
topVal = $.trim($('input.text', thisQuestion).val()).split(',')[1]+'%';
displayVal = 'block';
}
$('.click-marker', thisQuestion).css({
'display': displayVal,
'position': 'absolute',
'left': leftVal,
'top': topVal,
'margin': '-10px 0 0 -10px',
'width': '18px',
'height': '18px',
'-moz-border-radius': '10px',
'-webkit-border-radius': '10px',
'border-radius': '10px',
'background': '#0C0',
'border': '1px solid #090'
});
// Insert an overlay to click on
$('.image-wrapper', thisQuestion).css('position', 'relative').append('<div class="click-overlay" />');
$('.click-overlay', thisQuestion).css({
'position': 'absolute',
'left': 0,
'top': 0,
'margin': 0,
'width': $('.image-wrapper', thisQuestion).width()+'px',
'height': $('.image-wrapper', thisQuestion).height()+'px'
});
// Click event on the overlay
$('.click-overlay', thisQuestion).click(function(e) {
var thisWidth = $(this).width();
var thisHeight = $(this).height();
var posX = $(this).offset().left;
var posY = $(this).offset().top;
var xCoord = e.pageX - posX;
var yCoord = e.pageY - posY;
var xCoordPercent = (xCoord/thisWidth)*100;
var yCoordPercent = (yCoord/thisHeight)*100;
// Load the click coordinates (as relative percentages)
$('input.text', thisQuestion).val(xCoordPercent.toFixed(2)+','+yCoordPercent.toFixed(2));
// Reposition the marker
$('.click-marker', thisQuestion).css({
'display': 'block',
'left': xCoordPercent+'%',
'top': yCoordPercent+'%'
});
});
});
</script>
