基于用户选择使用javascript对图像进行部分着色

时间:2013-02-25 01:23:51

标签: javascript css

我有这个“时间线”,它的水平就像这样

00 | 01 | 02 | 03 |等至23

每个包含数字的跨度为17像素,而“|”线是1像素,整个图像是431x20像素。

我有2个标签,用户应该选择“开始”时间和“结束”时间,我想知道我如何使用javascript部分地为图像着色,我想我可以把一些CSS放在它上面,比如在图像上,但我不知道如何使用javascript做任何帮助,任何帮助都会大大增加。

1 个答案:

答案 0 :(得分:0)

将DIV绝对定位在图像顶部,使用相同的高度,无论选择何种颜色,以及一些适当的不透明度,将其左边缘设置为(这是一个快速计算,可能是错误)image.left +(18 * from),宽度为18 *(从 - + 1) - 1。

但是,有一个很好的理由让你的时间轴成为一个图像吗?对于我来说,拥有一个或者没有“选定”类的节点集合听起来更好,每个节点都有一个“00” - “23”文本标记。无需图片。