Imagemap question

More
5 years 9 months ago #64296 by mdekker
mdekker created the topic: Imagemap question
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

Please Log in to join the conversation.

More
5 years 9 months ago - 5 years 9 months ago #64299 by DenisChenu
DenisChenu replied the topic: Imagemap question
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#

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand (or search sondages pro).
An error happen ? Before make a new topic : remind the Debug mode .
Last Edit: 5 years 9 months ago by DenisChenu.

Please Log in to join the conversation.

More
5 years 9 months ago #64325 by tpartner
tpartner replied the topic: Imagemap question
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.

Please Log in to join the conversation.

More
5 years 9 months ago #64356 by paulfiner
paulfiner replied the topic: Imagemap question
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

Please Log in to join the conversation.

More
5 years 9 months ago #64362 by mdekker
mdekker replied the topic: Imagemap question
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

Please Log in to join the conversation.

  • TwentyTwo
  • TwentyTwo's Avatar
  • Visitor
  • Visitor
5 years 1 week ago - 5 years 1 week ago #80616 by TwentyTwo
TwentyTwo replied the topic: Imagemap question
just to update the link paulfiner is referring to: here
Last Edit: 5 years 1 week ago by TwentyTwo.

Please Log in to join the conversation.

  • TwentyTwo
  • TwentyTwo's Avatar
  • Visitor
  • Visitor
4 years 3 months ago #92591 by TwentyTwo
TwentyTwo replied the topic: Imagemap question
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!

Please Log in to join the conversation.

More
4 years 3 months ago #92597 by tpartner
tpartner replied the topic: Imagemap question
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.

Please Log in to join the conversation.

  • TwentyTwo
  • TwentyTwo's Avatar
  • Visitor
  • Visitor
4 years 3 months ago - 4 years 3 months ago #92602 by TwentyTwo
TwentyTwo replied the topic: Imagemap question
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: 4 years 3 months ago by TwentyTwo.

Please Log in to join the conversation.

More
4 years 3 months ago #92607 by tpartner
tpartner replied the topic: Imagemap question
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.

Please Log in to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now