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

Willkommen, Gast

THEMA: Imagemap question

Imagemap question 1 Jahr 9 Monate her #64296

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

Re: Imagemap question 1 Jahr 9 Monate her #64299

DenisChenu
OFFLINE
Moderator Lime
Beiträge: 4409
Dank erhalten: 456
Karma: 166

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"

Letzte Änderung: 1 Jahr 9 Monate her von DenisChenu.

Der Administrator hat öffentliche Schreibrechte deaktiviert.

Re: Imagemap question 1 Jahr 9 Monate her #64325

tpartner OFFLINE LimeSurvey Team Beiträge: 2867 Dank erhalten: 426 Karma: 246	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. Der Administrator hat öffentliche Schreibrechte deaktiviert.

Re: Imagemap question 1 Jahr 9 Monate her #64356

paulfiner OFFLINE Expert Lime Beiträge: 81 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 1 Jahr 9 Monate her #64362

mdekker
OFFLINE
LimeSurvey Team
Beiträge: 254
Dank erhalten: 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

Der Administrator hat öffentliche Schreibrechte deaktiviert.

Re: Imagemap question 1 Jahr 4 Tage her #80616

TwentyTwo OFFLINE Junior Lime Beiträge: 32 Dank erhalten: 1 Karma: 1	just to update the link paulfiner is referring to: here
	Letzte Änderung: 1 Jahr 4 Tage her von TwentyTwo. Der Administrator hat öffentliche Schreibrechte deaktiviert.

Re: Imagemap question 3 Monate 1 Woche her #92591

TwentyTwo OFFLINE Junior Lime Beiträge: 32 Dank erhalten: 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!
	Der Administrator hat öffentliche Schreibrechte deaktiviert.

Re: Imagemap question 3 Monate 1 Woche her #92597

tpartner OFFLINE LimeSurvey Team Beiträge: 2867 Dank erhalten: 426 Karma: 246	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. Der Administrator hat öffentliche Schreibrechte deaktiviert.

Re: Imagemap question 3 Monate 1 Woche her #92602

TwentyTwo
OFFLINE
Junior Lime
Beiträge: 32
Dank erhalten: 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

Letzte Änderung: 3 Monate 1 Woche her von TwentyTwo.

Der Administrator hat öffentliche Schreibrechte deaktiviert.

Re: Imagemap question 3 Monate 1 Woche her #92607

tpartner OFFLINE LimeSurvey Team Beiträge: 2867 Dank erhalten: 426 Karma: 246	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. Der Administrator hat öffentliche Schreibrechte deaktiviert.

Forum

Englische Support Foren

Can I do this with LimeSurvey?

Imagemap question