1

I'm creating a wizard (really, a glorified survey) using jQuery Wizard Redux. I have several images (created in Illustrator) which I want the user to select from, which would act as their "submission" for each step of the wizard.

e.g. this world map I made in Flash Catalyst.

(sidenote: I want the wizard to be viewable on an ipad/iphone so I'm shying away from Flash at this point)

Is it possible to create something similar using jQuery/Javascript? Some of the regions are quite complex - for instance, the "East Asia" section of the map is made up of 6 different invisible rectangular buttons so that (nearly) everywhere in black registers as a click for "East Asia".

Alternatively, is there some easy way to convert my flash catalyst files (which are coded in MXML) into javascript?

Gabriele Petrioli
  • 191,379
  • 34
  • 261
  • 317
JVG
  • 20,198
  • 47
  • 132
  • 210

2 Answers2

3

You could use an image map by defining a map and area elements (polyline) for each region.

update

I would create transparent .png files that get overlaid (each one holding a region) and control their opacity when clicking on the area elements.

Update 2

You can use the rel attribute of the region images to store the value like 

<img src="..." id="..." rel="5" />

Now, since we add a class selected-region to define the selected region we can use jQuery to target the image with that class, and retrieve the value stored in its rel attribute.

so when you want it you can use var regionId = $('img.selected-region').attr('rel');

Gabriele Petrioli
  • 191,379
  • 34
  • 261
  • 317
  • Fantastic, I was hoping there would be an elegantly simple solution! Cheers Gaby. So I've made some image maps in Dreamweaver (which was painfully easy, after an embarrassing number of hours of searching for how to do this!). What is the best way to deal with the onClick event? I could swap the entire image for the new state where country'x' is selected, but that seems like a waste of bandwidth. Is it possible to just change the opacity from a specific region onClick? – JVG Dec 28 '10 at 14:12
  • @Jascination, change opacity on part of an image is not possible by normal methods (*need to use html5 `` or similar*). Updated answer with a possible solution. Have a look .. – Gabriele Petrioli Dec 28 '10 at 15:36
  • Gaby, you are an absolute legend, I can't thank you enough for you help. Exactly what I was looking for. One final thing - and apologies for asking so many question, but jquery/js is completely new to me - is there a way of adding a variable to each state, so that I can use it as part of a wizard, so that it can 'talk' to other selections? i.e. I want the user to have 8 or 9 'questions', and then output the results back to the user. Basically what I'm asking is, how do I attach a variable to each region and then store it (locally) when the user clicks "next"? – JVG Dec 29 '10 at 00:27
  • Thanks @Jascination :) updated answer.. Just for future reference, it is good to create new questions for new issues (*if they are not clarifications on the existing question*), or update the original question so users can note that it has changed and review it again. Also they intended use of StackOverflow is to accept answers that best fit the question, so that they appear as answered to other interested parties in the future (*and they do not think that the issue is unsolved*) You can read more at http://stackoverflow.com/faq – Gabriele Petrioli Dec 29 '10 at 12:03
  • Ah, apologies, I'm new here. Thanks again for your help, really appreciate it. – JVG Dec 29 '10 at 13:19
0

You could also use the HTML5 canvas tag to draw the elements themselves and then each element (continent) would be click-able exactly on the boundaries.

http://joncom.be/code/excanvas-world-map/

zsalzbank
  • 9,685
  • 1
  • 26
  • 39