Here is an example of how to click radios with an image map. You can see that I have added alt attributes to the <area> elements. These contain the answer codes.
(I have reduced the size of your image to 500x500 pixels to be more manageable)
Code:
<img src="/limeSurvey3x/upload/surveys/428695/images/test.png" usemap="#map" />
<map name="map">
<area alt="1" shape="rect" coords="0,0,250,250" href="" />
<area alt="2" shape="rect" coords="251,0,500,250" href="" />
<area alt="3" shape="rect" coords="0,250,251,500" href="" />
<area alt="4" shape="rect" coords="251,251,500,500" href="" />
</map>
<script type="text/javascript" data-author="Tony Partner">
$(document).on('ready pjax:scriptcomplete',function(){
$('#question{QID} area').on('click', function(e) {
e.preventDefault();
var thisCode = $(this).attr('alt');
$('#question{QID} :radio[value="'+thisCode+'"]').trigger('click');
});
});
</script>
You may want to consider adding markers when the image see clicked. See this post for inspiration -
