我正在建立一个跟踪锻炼的锻炼网站。每个练习都有一个映射到身体的某个部位（卧推 --> 胸部）
我正在尝试找出一种将其可视化的方法，并且我想到了将一个人的图像“突出显示”受影响的肌肉的想法。有点像这样：
（来源：aquaviews.net）
假设我找到了一张没有突出显示任何区域的好图片，是否可以使用 javascript（客户端）或 C#（服务器端）动态地“突出显示”图片（红色部分）中的区域，或者我需要单独的每个练习的图片？
【问题讨论】：
标签： javascript asp.net-mvc image
您可以使用SVG or a <canvas> element 覆盖基本图像。
但是你有跨浏览器的问题，可能的对齐问题，并且可能看起来很俗气。
我会让一个有艺术倾向的人将每个练习的亮点作为单独的图形。
但不要将它们作为单独的图像，而是将它们保存/组合在一个文件中——作为CSS Sprite。然后，您将获得专业的外观、出色的跨浏览器支持以及简单、最少的编码。
【讨论】：
您可以使用 css 将链接定位在所述肌肉群上，并使用翻转来显示突出显示的部分...
编辑： 对不起，我想我应该详细说明。您可以使用 CSS 绝对定位元素并使用图像翻转将图像的该部分交换为该图像的突出显示部分。您可以通过将每个肌肉群放入它自己的 div 并将相应肌肉群的图像放入背景图像中来做到这一点。然后在翻车时将其换掉。或者您可以使用 z-index 并将翻转元素绝对定位在它们需要的位置，并在需要时更改 z-index。
【讨论】：
有趣的是，我曾经是一名私人教练，我也做过同样的事情，但是一闪而过。这是我的建议。
但是，如果您想使用 JS 和 CSS 来实现，Brock 对精灵的建议可能是可行的方法。
您可以做的很简单，就是为某些区域创建一个图像映射，该映射称为 js 函数，以将背景图像与该图像的相同版本与突出显示的部分进行交换。不是几张小图片，而是同一张图片，但突出显示了一个部分。
不过，有一个问题，您会做复合练习，要求您突出显示两个部分吗？例如，上斜推会突出部分胸部和部分三角肌。由于您翻转的特殊性，这使得整个提议变得更加复杂。
【讨论】：
我认为您正在寻找一种不需要单独图像的方法来做到这一点，如果是这样 - 答案是否定的 - 您将需要至少为突出显示的区域创建单独的图像。可能没有使用具有跨浏览器问题的 CANVAS 元素，我不相信有任何方法可以将过滤器强加到图像元素的任意区域。
即使您可以应用 alpha 过滤器，您仍然需要每个形状的几何形状，因此努力/工作可能是相同的...
一旦你有了各种图像，之后就有各种各样的方法来解决问题......
【讨论】：
这是一个简单的实现，因为我使用县地图进行了突出显示。使用图像映射。然后找到一个像 (mapper.netzgesta.de) mapper.js 这样的高亮脚本。您需要做的就是正确设置图像映射（图像必须由 div 支持）和指向此脚本的链接。突出显示立即开始。请检查许可证。还有其他几个使用 javascript css 和 jquery 来实现相同效果的脚本。只需在 google 中研究高亮图像地图。对不起，我不能给你一个链接到我的实现，因为它在一个安全的工作网站上。祝你好运。
【讨论】：