在 jQuery 向导中选择图像的区域答案

【问题标题】：Selecting regions of an image in a jQuery wizard在 jQuery 向导中选择图像的区域
【发布时间】：2010-12-28 13:07:16
【问题描述】：

我正在使用 jQuery Wizard Redux 创建一个向导（真的，一个美化的调查）。我有几张图像（在 Illustrator 中创建），我希望用户从中进行选择，这将作为向导每个步骤的“提交”。

例如this world map I made in Flash Catalyst.

（旁注：我希望该向导可以在 ipad/iphone 上查看，所以我现在回避 Flash）

是否可以使用 jQuery/Javascript 创建类似的东西？一些地区相当复杂——例如，地图的“东亚”部分由 6 个不同的不可见矩形按钮组成，因此（几乎）所有黑色区域都显示为“东亚”的点击。

或者，是否有一些简单的方法可以将我的 Flash Catalyst 文件（以 MXML 编码）转换为 javascript？

【问题讨论】：

标签： jquery shapes imagemap flashcatalyst

【解决方案1】：

您可以通过为每个区域定义map and area elements（折线）来使用image map。

更新

我会创建透明的.png 文件，这些文件会被覆盖（每个文件都包含一个区域）并在单击区域元素时控制它们的不透明度。

这是我制作的用于轻松创建图像映射的小工具（点击即可获得coords）
http://jsfiddle.net/gaby/CKJwp/41/
这里有一个演示页面来检查图像映射
http://jsfiddle.net/gaby/8qgfS/29/

更新 2

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

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

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

所以当你想要它时，你可以使用var regionId = $('img.selected-region').attr('rel');

【讨论】：

太棒了，我希望有一个优雅简单的解决方案！干杯盖比。因此，我在 Dreamweaver 中制作了一些图像映射（这非常容易，经过了令人尴尬的数小时搜索如何做到这一点！）。处理 onClick 事件的最佳方法是什么？我可以将整个图像换成选择 country'x' 的新州，但这似乎是对带宽的浪费。是否可以仅更改特定区域 onClick 的不透明度？
@Jascination，通过常规方法无法更改图像部分的不透明度（需要使用 html5 <canvas> 或类似方法）。用可能的解决方案更新了答案。看看..
盖比，你是一个绝对的传奇人物，我非常感谢你的帮助。正是我想要的。最后一件事 - 很抱歉问了这么多问题，但 jquery/js 对我来说是全新的 - 有没有一种方法可以为每个状态添加一个变量，以便我可以将它用作向导的一部分，以便它可以与其他选择“交谈”？即我希望用户有 8 个或 9 个“问题”，然后将结果输出给用户。基本上我要问的是，如何将变量附加到每个区域，然后在用户单击“下一步”时（本地）存储它？
感谢@Jascination :) 更新答案.. 仅供将来参考，最好为新问题创建新问题（如果它们不是对现有问题的澄清），或更新原始问题，以便用户可以注意到它已更改并再次查看它。他们还打算使用 StackOverflow 来接受最适合问题的答案，以便它们在未来显示为对其他相关方的回答（他们认为问题没有解决）您可以阅读更多stackoverflow.com/faq
啊，抱歉，我是新来的。再次感谢您的帮助，非常感谢。

【解决方案2】：

您还可以使用 HTML5 canvas 标签来绘制元素本身，然后每个元素（大陆）都可以精确地在边界上单击。

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

【讨论】：