Willkommen, Gast
Benutzername: Passwort: Angemeldet bleiben:

THEMA: Imagemap question

Imagemap question 3 Jahre 3 Monate her #64296

  • mdekker
  • mdekkers Avatar
  • OFFLINE
  • LimeSurvey Team
  • Beiträge: 341
  • Dank erhalten: 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
Der Administrator hat öffentliche Schreibrechte deaktiviert.

Re: Imagemap question 3 Jahre 3 Monate her #64299

  • DenisChenu
  • DenisChenus Avatar
  • OFFLINE
  • Moderator Lime
  • Beiträge: 6551
  • Dank erhalten: 868
  • Karma: 257
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#
Letzte Änderung: 3 Jahre 3 Monate her von DenisChenu.
Der Administrator hat öffentliche Schreibrechte deaktiviert.

Re: Imagemap question 3 Jahre 3 Monate her #64325

  • tpartner
  • tpartners Avatar
  • OFFLINE
  • LimeSurvey Team
  • Beiträge: 4360
  • Dank erhalten: 827
  • Karma: 381
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.
Der Administrator hat öffentliche Schreibrechte deaktiviert.

Re: Imagemap question 3 Jahre 3 Monate her #64356

  • paulfiner
  • paulfiners Avatar
  • OFFLINE
  • Expert Lime
  • Beiträge: 92
  • Dank erhalten: 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
Der Administrator hat öffentliche Schreibrechte deaktiviert.

Re: Imagemap question 3 Jahre 3 Monate her #64362

  • mdekker
  • mdekkers Avatar
  • OFFLINE
  • LimeSurvey Team
  • Beiträge: 341
  • Dank erhalten: 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
Der Administrator hat öffentliche Schreibrechte deaktiviert.

Re: Imagemap question 2 Jahre 6 Monate her #80616

  • TwentyTwo
  • TwentyTwos Avatar
just to update the link paulfiner is referring to: here
Letzte Änderung: 2 Jahre 6 Monate her von TwentyTwo.
Der Administrator hat öffentliche Schreibrechte deaktiviert.

Re: Imagemap question 1 Jahr 9 Monate her #92591

  • TwentyTwo
  • TwentyTwos 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!
Der Administrator hat öffentliche Schreibrechte deaktiviert.

Re: Imagemap question 1 Jahr 9 Monate her #92597

  • tpartner
  • tpartners Avatar
  • OFFLINE
  • LimeSurvey Team
  • Beiträge: 4360
  • Dank erhalten: 827
  • Karma: 381
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.
Der Administrator hat öffentliche Schreibrechte deaktiviert.

Re: Imagemap question 1 Jahr 9 Monate her #92602

  • TwentyTwo
  • TwentyTwos 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
Letzte Änderung: 1 Jahr 9 Monate her von TwentyTwo.
Der Administrator hat öffentliche Schreibrechte deaktiviert.

Re: Imagemap question 1 Jahr 9 Monate her #92607

  • tpartner
  • tpartners Avatar
  • OFFLINE
  • LimeSurvey Team
  • Beiträge: 4360
  • Dank erhalten: 827
  • Karma: 381
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.
Der Administrator hat öffentliche Schreibrechte deaktiviert.
Moderatoren: ITEd
Ladezeit der Seite: 0.217 Sekunden
Donation Image