Javascript 寻找关于如何突出显示图像上区域的建议

我正在建立一个锻炼网站，跟踪锻炼。每个练习都有一个到身体某个部位的映射（卧推-->胸部）

我试图找出一种方法来形象化这一点，我想到了一个想法，把一个人的形象“突出”受影响的肌肉。有点像这样：

（来源：）

---

假设我发现了一张没有突出显示任何区域的好图片，那么是否可以使用javascript（客户端）或C#（服务器端）动态“突出显示”图片（红色部分）中的区域或者每次锻炼我都需要一张单独的图片吗？

你可以使用css将链接定位在所述肌肉群上，并使用翻转显示高亮部分

编辑：

---

对不起，我想我应该详细说明一下。您完全可以使用CSS定位元素，并使用图像翻转将图像的该部分切换到该图像的高亮部分。您可以通过将每个肌肉组放入它自己的div中，并将相应肌肉组的图像放入背景图像中来实现这一点。然后在翻滚时将其换掉。或者，您可以使用z索引，将滚动元素绝对定位在需要的位置，并在需要时更改z索引

您可以使用覆盖在基础图像上

但是你会有跨浏览器的问题，可能的对齐问题，可能还有一个俗气的外观

我会让一个有艺术倾向的人为每一个练习做一个单独的图形

---

但与其将它们作为单独的图像，不如将它们保存/组合在一个文件中，作为一个单独的文件。然后，您将获得专业的外观、强大的跨浏览器支持和简单、最少的编码。

我认为您正在寻找一种不需要单独图像的方法，如果是，答案是否定的，您将需要为至少突出显示的区域创建单独的图像。除了可能使用具有跨浏览器问题的CANVAS元素之外，我认为没有任何方法可以将过滤器强加给图像元素的任意区域

即使你可以应用alpha过滤器，你仍然需要每个形状的几何体，所以努力/工作可能是相同的

---

一旦你有了各种各样的图像，你就有各种各样的方法来解决这个问题……

有趣的是，我曾经是一名私人教练，我也做过同样的事情，但都是在flash中完成的。这是我的建议

然而，如果你想使用JS和CSS，Brock对sprites的建议可能是最好的选择

你能做的，非常简单，就是有一个图像映射，对于某些区域，调用一个js函数，将背景图像与具有突出显示部分的相同版本的图像交换。与多个小图像不同，您具有相同的图像，但其中一个部分高亮显示

---

但有一个问题，你会做需要突出显示两个部分的复合练习吗？例如，倾斜按压会突出部分胸部和部分凹陷。由于您的滚动的特殊性，这使得整个命题更加复杂。

这是一个简单的实现，因为我已经用县地图突出显示了这一点。使用图像地图。然后找到一个突出显示的脚本，如（mapper.netzgesta.de）mapper.js。您所需要做的就是有一个正确设置的图像映射（图像必须由div进行suuounded）和一个指向此脚本的链接。高亮显示立即开始。请检查许可证。还有一些其他脚本使用javascript css和jquery来实现同样的效果。只需在谷歌搜索高亮图像地图。很抱歉，我不能给你一个链接到我的实施这是一个安全的网站上的工作。祝你好运。

你说得对，我希望某些练习能够突出显示多个方面。我想这不会带来更多的复杂性，但我可能低估了。你能让我更深入地了解一下你的flash解决方案吗？@ooo-那个特定的应用程序是多年前构建的，我已经没有了，但我确实为一个客户构建了一些类似的东西。在本例中，客户希望您能够滚动身体的某些部位，以找出与脊椎疼痛相关的信息。你会很快明白的。这是一个更大页面的一部分，因此onClick处理程序不再做任何事情：如果您需要任何帮助，我将非常乐意为您提供帮助。