Welcome, Guest
Username: Password: Remember me

TOPIC: Imagemap question

Imagemap question 3 years 1 month ago #64296

  • mdekker
  • mdekker's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 341
  • Thank you received: 68
  • Karma: 38
I know i have once seen a topic describing how to use an imagemap in limesurvey. For example to let users click in what state they live. Can somebody help me?
---
Menno Dekker
The administrator has disabled public write access.

Re: Imagemap question 3 years 1 month ago #64299

  • DenisChenu
  • DenisChenu's Avatar
  • OFFLINE
  • Moderator Lime
  • Posts: 6362
  • Thank you received: 827
  • Karma: 245
Hello Memno,

I think the best is to use jquery to fill an answer according to the imagemap area click.

Maybe something like that (with question 42 ):
Click the good area:
<img src="your.gif" usemap="#parts" />  
<map name="parts">  
  <area shape="rect" coords="20,6,200,60" href="#" alt="value1" />  
  <area shape="circle" coords="100,200,50" href="#" alt="value2" />  
</map>
$('area').click(function() { 
    var alt = $(this).attr('alt');
    $("#question42 input.text").val(alt); 
 
 
  return false; 
});

I'm sure Tony can have a best idea ;)

PS: maybe you can add some beautiful effect: davidlynch.org/js/maphilight/docs/demo_usa.html#
Last Edit: 3 years 1 month ago by DenisChenu.
The administrator has disabled public write access.

Re: Imagemap question 3 years 1 month ago #64325

  • tpartner
  • tpartner's Avatar
  • NOW ONLINE
  • LimeSurvey Team
  • Posts: 4208
  • Thank you received: 791
  • Karma: 360
Yeah, that should do it.

I have used a similar approach inserting transparent divs over the map. It's a little more CSS intensive but allows cutting of corners by laying one div over another with z-index. The downside is that you are restricted to rectangles where am imagemap allows circles and polygons.
Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
The administrator has disabled public write access.

Re: Imagemap question 3 years 1 month ago #64356

  • paulfiner
  • paulfiner's Avatar
  • OFFLINE
  • Expert Lime
  • Posts: 92
  • Thank you received: 1
  • Karma: 1
I think the guy in this link might have been the author of the post you were looking for.
He has a few other Limesurvey tips on the website too.

Cheers

Paul
The administrator has disabled public write access.

Re: Imagemap question 3 years 1 month ago #64362

  • mdekker
  • mdekker's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 341
  • Thank you received: 68
  • Karma: 38
Thanks! This was just what I was looking for. I used the plugin for highlights and used www.image-maps.com/ to do the mapping of my image. I modified the click function to have the question id first to make it specific in case there are more mapping questions on the same page.
$('#question42 area').click(function() { 
    var alt = $(this).attr('alt');
    $("#question42 input.text").val(alt); 
 
 
  return false; 
});
---
Menno Dekker
The administrator has disabled public write access.

Re: Imagemap question 2 years 4 months ago #80616

  • TwentyTwo
  • TwentyTwo's Avatar
just to update the link paulfiner is referring to: here
Last Edit: 2 years 4 months ago by TwentyTwo.
The administrator has disabled public write access.

Re: Imagemap question 1 year 7 months ago #92591

  • TwentyTwo
  • TwentyTwo's Avatar
Hi,
Your solution works great, I am trying todo the same with drag and drop.
Do you have an idea how to turn the click function into a drop function?
Thanks!
The administrator has disabled public write access.

Re: Imagemap question 1 year 7 months ago #92597

  • tpartner
  • tpartner's Avatar
  • NOW ONLINE
  • LimeSurvey Team
  • Posts: 4208
  • Thank you received: 791
  • Karma: 360
I'm not clear on what you are trying to accomplish with a "drop function" but you can check out the droppable docs here - api.jqueryui.com/droppable/.
Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
The administrator has disabled public write access.

Re: Imagemap question 1 year 7 months ago #92602

  • TwentyTwo
  • TwentyTwo's Avatar
Hi,

I have combined some code -

People can drag and drop a ball on a triangle.
However they are only allowed to do drop the ball on the triangle or in a box.

Drag and drop is working, calculating the coordinates is working as well.

I only can't manage to write a value back when someone drops it on the specific area on the image.
(those areas are just two defined areas, when I just use the click function that's working however I am checking how to do it with dropping as well)

to see the example in LS:

Demo

and standalone:

Demo

I am using the image mapster here as well.
Seems I can't get the highlight working in LS.

Tony I have seen your solution on the image mapster as well.
Maybe you see if there is just a small thing I am missing?

I think it goes wrong in the LS example at code, line 237.
It won't load the value of img.mapster

Thanks, Dennis
Last Edit: 1 year 7 months ago by TwentyTwo.
The administrator has disabled public write access.

Re: Imagemap question 1 year 7 months ago #92607

  • tpartner
  • tpartner's Avatar
  • NOW ONLINE
  • LimeSurvey Team
  • Posts: 4208
  • Thank you received: 791
  • Karma: 360
Yeah, I think you will need to trigger a click on the image map when the ball is dropped but, unfortunately, I don't have time this week to debug it.
Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
The administrator has disabled public write access.
Moderators: ITEd
Time to create page: 0.176 seconds
Donation Image