寻找有关如何突出图像区域的建议

Question

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

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

alt text http://aquaviews.net/wp-content/uploads/2009/12/Quadriceps.png

假设我找到了一张没有突出显示任何区域的好照片，无论如何使用javascript（客户端）或C＃（服务器端）动态“突出显示”图片中的区域（红色部分）或者我是否需要单独使用每个运动的图片？

Answer 1

您可以使用SVG or a <canvas> element覆盖基本图像。

但是你会遇到跨浏览器问题，可能存在对齐问题，而且看起来可能很俗气。

我有一个有艺术倾向的人把亮点作为每个练习的单独图形。

但是，不要将它们作为单独的图像保存，而是将它们组合在一个文件中 - 作为CSS Sprite。然后，您将获得专业的外观，出色的跨浏览器支持以及简单，最少的编码。

Answer 2

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

修改 对不起，我想我应该详细说明。您可以使用CSS绝对定位元素，并使用图像翻转将图像的该部分换出到该图像的突出显示部分。您可以通过将每个肌肉群放入其自己的div中并将相应肌肉群的图像放入背景图像中来实现此目的。然后在滚动时将其换掉。或者您可以使用z-index并将翻转元素绝对定位到需要的位置，并在需要时更改z-index。

Answer 3

我认为你想要一种方法来做到这一点而不需要单独的图像，如果是这样 - 答案是否定的 - 你将需要为至少突出显示的区域创建单独的图像。如果没有使用具有跨浏览器问题的CANVAS元素，我不相信有任何方法可以将滤镜强加到图像元素的任意区域。

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

一旦你拥有了各种各样的图像，那么在那之后有各种方法可以解决问题...

Answer 4

有趣的是，我曾经是一名私人教练，我做了同样的事情，但是在闪光灯中完成了。这是我的建议。

但是，如果你想用JS和CSS来做，Brock对sprite的建议可能就要走了。

你可以做的，非常简单，就是有一个图像地图，对于某些被称为js函数的区域，用相同版本的图像与突出显示的部分交换背景图像。而不是几个小图像，你有相同的图像，但突出显示一个部分。

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

Answer 5

这是一个简单的实现，因为我用县地图突出显示了这个。使用图像映射。然后找到一个突出显示的脚本，如（mapper.netzgesta.de）mapper.js。您需要做的就是拥有一个正确设置的图像映射（图像必须由div完成）和此脚本的链接。突出显示立即开始。请检查许可证。其他几个脚本使用javascript css和jquery来实现同样的效果。只是研究在谷歌突出图像地图。对不起，我无法给你一个链接到我的实现，因为它是在一个安全的网站上工作。祝你好运。