- Posts: 965
- Thank you received: 218
Welcome to the LimeSurvey Community Forum
Ask the community, share ideas, and connect with other LimeSurvey users!
Use an image map
- tammo
- Topic Author
- Offline
- Official LimeSurvey Partner
Less
More
3 years 4 days ago #214879
by tammo
Tammo ter Hark at Respondage
For Limesurvey reporting, education and customized themes
respondage.nl
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?
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
- Away
- LimeSurvey Community Team
Less
More
- Posts: 10099
- Thank you received: 3589
3 years 4 days ago #214908
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
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
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
- Topic Author
- Offline
- Official LimeSurvey Partner
Less
More
- Posts: 965
- Thank you received: 218
3 years 3 days ago #214910
by tammo
Tammo ter Hark at Respondage
For Limesurvey reporting, education and customized themes
respondage.nl
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
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
- Away
- LimeSurvey Community Team
Less
More
- Posts: 10099
- Thank you received: 3589
3 years 3 days ago #214915
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
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)
Sample survey:
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
(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:
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
- Topic Author
- Offline
- Official LimeSurvey Partner
Less
More
- Posts: 965
- Thank you received: 218
3 years 3 days ago #214917
by tammo
Tammo ter Hark at Respondage
For Limesurvey reporting, education and customized themes
respondage.nl
Replied by tammo on topic Use an image map
Thank you Tony.
This opens new possibilities. And probably a lot of questions...
Tammo
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.