Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

Use an image map

  • tammo
  • tammo's Avatar Topic Author
  • Offline
  • Official LimeSurvey Partner
  • Official LimeSurvey Partner
More
3 years 4 days ago #214879 by tammo
Use an image map was created by tammo
I thought that there would be a manual page about using image maps.
But I could not find it.
I did find a very old article, with a very good example by Denis:
forums.limesurvey.org/forum/can-i-do-thi...96-imagemap-question

I am not sure how to proceed form here? How to attach to radio question or multiple choice question?


Tammo ter Hark at Respondage
For Limesurvey reporting, education and customized themes
respondage.nl
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Away
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
3 years 4 days ago #214908 by tpartner
Replied by tpartner on topic Use an image map
Hi Tammo, can you attach a small sample survey, using absolute paths for the image(s)?

If you want the image map to be responsive, you will need to use something like David Bradshaw's Image Map Resize library - github.com/davidjbradshaw/image-map-resizer

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The following user(s) said Thank You: DenisChenu
The topic has been locked.
  • tammo
  • tammo's Avatar Topic Author
  • Offline
  • Official LimeSurvey Partner
  • Official LimeSurvey Partner
More
3 years 3 days ago #214910 by tammo
Replied by tammo on topic Use an image map
Hi Tony,

thank you for your attention for this. I do not ahve a survey yet, do not know where to begin.... All I have is an image and a file that is the image map. See attachements.

Tammo


Tammo ter Hark at Respondage
For Limesurvey reporting, education and customized themes
respondage.nl
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Away
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
3 years 3 days ago #214915 by tpartner
Replied by tpartner on topic Use an image map
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>

Sample survey: 

File Attachment:

File Name: limesurvey...8695.lss
File Size:15 KB


You may want to consider adding markers when the image see clicked. See this post for inspiration - forums.limesurvey.org/forum/can-i-do-thi...p-integration#191414
 

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Attachments:
The following user(s) said Thank You: tammo
The topic has been locked.
  • tammo
  • tammo's Avatar Topic Author
  • Offline
  • Official LimeSurvey Partner
  • Official LimeSurvey Partner
More
3 years 3 days ago #214917 by tammo
Replied by tammo on topic Use an image map
Thank you Tony.

This opens new possibilities. And probably a lot of questions...

Tammo


Tammo ter Hark at Respondage
For Limesurvey reporting, education and customized themes
respondage.nl
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose