LimeSurvey forums :: Topic: Imagemap question (1/1)

Welcome, Guest

TOPIC: Imagemap question

Imagemap question 1 year 9 months ago #64296

mdekker OFFLINE LimeSurvey Team Posts: 254 Thank you received: 40 Karma: 25	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 1 year 9 months ago #64299

DenisChenu
OFFLINE
Moderator Lime
Posts: 4375
Thank you received: 451
Karma: 165

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#

Bug report | LimeSurvey Version 2.05 beta 1 released! | Please, read the documentation

Denis Chenu Libriste convaincu:
Official LimeSurvey Partner: Sondages Pro : Vos enquêtes sur internet
Web development : Développement de Logiciels Libres pour Internet"

Last Edit: 1 year 9 months ago by DenisChenu.

The administrator has disabled public write access.

Re: Imagemap question 1 year 9 months ago #64325

tpartner OFFLINE LimeSurvey Team Posts: 2853 Thank you received: 423 Karma: 243	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 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 9 months ago #64356

paulfiner OFFLINE Expert Lime Posts: 81 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 1 year 9 months ago #64362

mdekker
OFFLINE
LimeSurvey Team
Posts: 254
Thank you received: 40
Karma: 25

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 1 year 1 day ago #80616

TwentyTwo OFFLINE Junior Lime Posts: 30 Thank you received: 1 Karma: 1	just to update the link paulfiner is referring to: here
	Last Edit: 1 year 1 day ago by TwentyTwo. The administrator has disabled public write access.

Re: Imagemap question 3 months 1 week ago #92591

TwentyTwo OFFLINE Junior Lime Posts: 30 Thank you received: 1 Karma: 1	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 3 months 1 week ago #92597

tpartner OFFLINE LimeSurvey Team Posts: 2853 Thank you received: 423 Karma: 243	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 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 months 1 week ago #92602

TwentyTwo
OFFLINE
Junior Lime
Posts: 30
Thank you received: 1
Karma: 1

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: 3 months 1 week ago by TwentyTwo.

The administrator has disabled public write access.

Re: Imagemap question 3 months 1 week ago #92607

tpartner OFFLINE LimeSurvey Team Posts: 2853 Thank you received: 423 Karma: 243	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 LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project. The administrator has disabled public write access.

Forum

English support forums

Can I do this with LimeSurvey?

Imagemap question