在jQuery向导中选择图像的区域 [英] Selecting regions of an image in a jQuery wizard

问题描述

我正在使用jQuery Wizard Redux创建一个向导(实际上是一项荣耀的调查).我有几张图像(在Illustrator中创建)，我希望用户从中选择，这些图像将作为向导的每个步骤的提交".

例如我在Flash Catalyst中制作的这张世界地图.

(旁注:我希望向导可以在ipad/iphone上查看，因此我现在避开了Flash)

是否可以使用jQuery/Javascript创建类似内容?一些地区非常复杂-例如，地图的东亚"部分由6个不同的不可见矩形按钮组成，因此(几乎)所有黑色区域都表示单击东亚".

或者，有一些简单的方法可以将我的Flash催化剂文件(以MXML编码)转换为javascript吗?

解决方案

您可以使用 http://jsfiddle.net/gaby/CKJwp/41/

这是一个演示页面，用于检查图像地图
http://jsfiddle.net/gaby/8qgfS/29/

---

更新2

您可以使用区域图像的rel属性来存储

之类的值.

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

现在，由于我们添加了一个类 selected-region 来定义所选区域，因此我们可以使用jQuery使用该类定位图像，并检索存储在其rel属性中的值./p>

因此，您可以在需要时使用var regionId = $('img.selected-region').attr('rel');

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?

解决方案

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

这篇关于在jQuery向导中选择图像的区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！