Hi, there are e few solutions provided here.
1.
As you see, the coordinates are stored in the data. In a real survey you will hide this of course.
@tpartner's javascript
Code:
<div class="image-wrapper img-responsive center-block" style="border:2px solid #999; width: 100%;max-width: 500px; position:relative ">
<img src="upload/surveys/{SID}/image/muskeln.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 - un-comment below
// $('input.text', thisQuestion).hide();
// $('.ls-answers', 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'
});
// Click event on the image
$('.image-wrapper, img', thisQuestion).on('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+'%'
});
});
// Returning to the page
if($('input:text', thisQuestion).val() != '') {
var coords = $.trim($('input:text', thisQuestion).val()).split(',');
$('.click-marker', thisQuestion).css({
'display': 'block',
'left': coords[0]+'%',
'top': coords[1]+'%'
});
}
});
</script>
Up to now you can only enter one point.
You may adapt the script to be able to enter more
2.
@tpartner's plugin "interestPoints"
[url]
github.com/tpartner/LimeSurvey-Image-Interest-Points-3x
[/url]
This you may adapt to have only one kind of markers, not the (+) and (-)
If I remember correctly there also was a question how to enter several markers some time ago.
I think it was about places in the Netherlands.
[url]
forums.limesurvey.org/index.php/forum/de...res-all-mouse-clicks
[/url]
Joffm
P.S.
I hope the survey will help to develop a therapy against this skin disease.
Topic Author
