着色partialy使用基于用户选择的javascript图像

00 | 01 | 02 | 03 |等多达23

每个跨度包含的数字是17个像素，并且“|”行是1像素，整个图像是431x20像素。

我有2个标签，用户应该选择一个“开始”时间和一个“结束”时间，我想知道如何使用JavaScript部分颜色的图像，我想我可以把一些CSS它，如在图像上，但我不知道如何使用JavaScript做到这一点，任何帮助将大大延长。

2013-02-25 John Doe

我们需要您的场景的更多细节。时间轴是图像本身吗？通过对图像进行部分着色意味着什么 - 用图层覆盖它，切换背景......？ – Terry 2013-02-25 01:27:06

你的“形象”是什么？它是HTML的图像元素吗？ – 2013-02-25 01:27:27

时间轴是一个图像，它看起来像这样： 00 | 01 | 02 | 03 | etc最多23 通过着色我的意思是部分覆盖“从 - 到”部分，如用户选择“从13“”到16“ 13-14-15-16需要colord – 2013-02-25 01:28:20

它让我觉得很简单，就是在图像顶部绝对定位DIV，使用相同的高度，选择任何颜色，以及一些适当的不透明度，将其左边缘设置为（这是一个快速计算，可能会是错误的）image.left +（18 * from），其宽度为18 *（to - from + 1） - 1.

但是，是否有很好的理由让您的时间轴成为图像？对我来说，听起来更好的是拥有一组节点，它们有或没有“选定”类，每个节点上都有一个“00” - “23”文本标记。没有图像需要。

2013-02-25 01:38:34

回答