Selecting regions of an image in a jQuery wizard

问题

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?

回答1:

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.

• Here is small tool i made to easily create the image-map (give coords from your clicks)
  http://jsfiddle.net/gaby/CKJwp/41/
• Here is a demo page to check the image map
  http://jsfiddle.net/gaby/8qgfS/29/

---

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');

回答2:

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/

来源：https://stackoverflow.com/questions/4546275/selecting-regions-of-an-image-in-a-jquery-wizard