Jquery 单击时显示不同文本的交互式多边形形状 更新：

嗨，伙计们，这就是我取得的成绩：（我正在用“拉斐尔JS澳大利亚”的例子进行测试）

我现在唯一无法解决的问题是，当单击另一个元素时，如何将元素的状态恢复为0。我已经解决了如何在单击某个元素时获得“活动/选定”状态，然后悬停对其余元素起作用，但是单击的任何元素都会停留在最后一个状态，悬停事件不再对其起作用

有人知道怎么解决这个问题吗

---

老问题：

我想创造一些非常类似的东西：

我想能够绘制自定义形状，当点击时，每个形状在页面上显示不同的文本（可能在“div”中）

就像链接中的示例一样，我想添加鼠标悬停、单击等交互样式。当您将鼠标悬停在形状上时，它们会产生动画，然后当您单击其中一个形状时，它会保持选中状态，允许悬停动画作用于其他形状，直到您单击另一个形状。还有文字淡入淡出的效果

我一直在寻找很多方法来创建它，特别是HTML5Canvas、Raphaeljs（）和其他一些方法，但我似乎没有找到正确的方法

“奥运村”正是我所需要的——有人能帮我吗

---

谢谢@vlad otrocol，我已经研究了您建议的教程，它们非常有用。他们确实有很多我需要的东西，但我找不到我想要的一切

感谢@kevin nielsen提供的示例，您的方法比我在RaphaelJS示例网站上研究的“澳大利亚”示例要简单得多。我已经走了这么远

我已将我的示例与您的示例集成在一起，并具有以下内容：

我需要做的是能够点击一个元素，改变它的颜色，然后保持该颜色状态，同时允许其他元素在悬停时改变颜色（如“奥运村地图”）

正如您从我的示例中看到的，目前我有一个“mouseout”事件，它将每个元素的颜色更改为一种颜色。我是否需要为每个元素创建一个“mouseout”事件？是否有一种方法可以在悬停后将元素颜色恢复到其原始状态

还有Kevin，在你的例子中，你如何定位文本？在我正在处理的示例中，使用了div，因此可以使用CSS更改位置

---

再次感谢大家的帮助-我会在这方面做更多的工作，并将报告任何进展

如果您决定在项目中使用html画布元素，我会看一下： 他在画布上有一系列非常好的教程

西蒙的教程包含了你所需要的一切。但你必须记住几个关键要素：

必须跟踪画布上所有对象的坐标和状态

画布没有形状/对象事件这样的东西。只能将事件添加到画布元素

如果希望鼠标悬停在形状事件上，则需要画布鼠标悬停事件，根据形状的位置获取光标的坐标，然后可以确定光标是否悬停在形状上

画布的一般过程是：事件触发->重新计算新画布状态、对象位置和可见性等->重新绘制所有内容

---

我也会看一看html5画布教程

对于这样的显示，我会反对使用画布，而赞成使用RaphaelJS支持的SVG，就像您正在使用的奥运村地图作为模型一样。它为鼠标悬停和单击以及持久状态信息提供了内置的事件处理，即时可用，并且对数百或数千个对象保持合理的性能。如果您对javascript非常熟悉，它会使您所描述的地图变得非常简单。考虑小提琴，它演示了拉斐尔的JS为任意形状的悬停和点击，只用了几分钟就写了。 您是否有要构建的地图的路径