嗨，大家好，这是我走了多远：http://jsfiddle.net/vsJMn/（我正在测试'RaphaelJS澳大利亚'的例子）
我现在唯一无法弄清楚的问题是当点击另一个元素时如何将元素的状态恢复为0。当我点击一个元素时，我已经研究了如何获得“主动/选定”状态，然后悬停然后对其余部分起作用，但是点击的任何元素都会停留在最后一个状态并且悬停事件不会再也不用了。
有人知道如何解决这个问题吗？
陈旧问题：
我想创建一些与此类似的东西：http://www.voanews.com/content/olympic-village-map/1446501.html
我希望能够绘制自定义形状，点击时，每个页面上都显示不同的文字（可能是'div'）。
就像链接中的示例一样，我想通过鼠标悬停，单击等添加交互式样式。当您将鼠标悬停在形状上时，它们会进行动画处理，然后当您单击其中时它会保持选中状态，允许悬停动画处理其他形状，直到你点击另一个形状。文字褪色效果。
我一直在寻找创建它的很多方法，特别是HTML5画布，Raphaeljs（http://raphaeljs.com/australia.html）和其他一些方法，但我似乎无法做到正确。
那个'奥运村'正是我所需要的 - 请有人帮我解决这个问题。
谢谢@ vlad-otrocol，我查看了你建议的教程，他们真的很有帮助。他们确实有很多我需要的东西，但我找不到我想要的东西。
感谢@ kevin-nielsen为您的榜样，您的方式比我在RaphaelJS示例网站上所做的'澳大利亚'示例容易得多。这是我得到了多远：http://jsfiddle.net/k2GQj/。
我已将您的示例与您的示例集成，并且具有：http://jsfiddle.net/L3bHz/。
我需要做的是能够点击一个元素，改变它的颜色，然后保持这种颜色状态，同时允许其他元素在悬停时改变颜色（如'奥运村地图'）。
从我的示例中可以看出，目前我有一个'mouseout'事件，它将每个元素颜色更改为一种颜色。我是否需要为每个元素创建一个'mouseout'事件 - 是否有一种方法可以在悬停后将元素颜色恢复为原始状态？
凯文，在你的例子中，你如何定位文本？在我一直在使用的示例中，使用了DIV，因此可以使用CSS更改定位。
再次感谢大家的帮助 - 我将继续努力，并将以任何进展报告！
答案 0 :(得分：0)
如果你决定为你的项目使用html canvas元素，我会看一下：http://simonsarris.com/blog/510-making-html5-canvas-useful 他在画布上有一系列非常好的教程。
Simon的教程包含了你需要的一切。但你必须记住几个关键要素：
我也会看看html5 canvas教程，http://www.html5canvastutorials.com/tutorials/html5-canvas-tutorials-introduction/
答案 1 :(得分：0)
对于这样的显示器，我会反对使用canvas来支持使用RaphaelJS驱动的SVG，就像你用作模型的奥运村地图一样。它提供了用于悬停和点击的内置事件处理以及开箱即用的持久状态信息，并且对数百或数千个对象保持合理的性能。如果您完全熟悉javascript，它会使您所描述的地图非常容易。考虑一下this little example小提琴，它表明拉斐尔的js能够悬停并点击任意形状 - 只需几分钟即可完成。
您是否有要构建的地图的路径？