我正在使用 jQuery Wizard Redux 创建一个向导（实际上是一个美化的调查）。我有几个图像（在 Illustrator 中创建），我希望用户从中进行选择，这些图像将作为向导每个步骤的“提交”。
例如我在Flash Catalyst 中制作的世界地图。
（旁注：我希望在 ipad/iphone 上可以查看该向导，所以我现在回避 Flash）
是否可以使用 jQuery/Javascript 创建类似的东西？有些区域相当复杂 - 例如，地图的“东亚”部分由 6 个不同的隐形矩形按钮组成，因此（几乎）所有黑色区域都会显示为“东亚”的点击。
或者，是否有一些简单的方法可以将我的 Flash Catalyst 文件（以 MXML 编码）转换为 JavaScript？
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?
发布评论
评论（2）
您可以通过定义 图像映射 href="http://www.w3.org/TR/html401/struct/objects.html#h-13.6.1" rel="nofollow">每个区域的地图和区域元素（折线）。
更新
我将创建透明的
.png文件，这些文件会被覆盖（每个文件包含一个区域），并在单击区域元素时控制其不透明度。坐标）http://jsfiddle.net/gaby/CKJwp/41/
http://jsfiddle.net/gaby/8qgfS/29/
更新2< /strong>
您可以使用区域图像的
rel属性来存储像Now 这样的值，因为我们添加了一个类
selected-region到定义所选区域，我们可以使用 jQuery 将图像定位到该类，并检索存储在其rel属性中的值。因此，当您需要它时，可以使用 varregionId = $('img.selected-region').attr('rel');
You could use an image map by defining a map and area elements (polyline) for each region.
update
I would create transparent
.pngfiles that get overlaid (each one holding a region) and control their opacity when clicking on the area elements.coordsfrom your clicks)http://jsfiddle.net/gaby/CKJwp/41/
http://jsfiddle.net/gaby/8qgfS/29/
Update 2
You can use the
relattribute of the region images to store the value likeNow, since we add a class
selected-regionto define the selected region we can use jQuery to target the image with that class, and retrieve the value stored in itsrelattribute.so when you want it you can use
var regionId = $('img.selected-region').attr('rel');您还可以使用 HTML5
canvas标签来绘制元素本身，然后每个元素（大陆）都可以在边界上精确点击。http://joncom.be/code/excanvas-world-map/
You could also use the HTML5
canvastag 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/