根据用户选择，使用javascript对图像进行局部着色

Coloring a image partialy using javascript based on user selection

本文关键字：图像行局 javascript 用户选择使用更新时间：2023-09-26

我有这个"时间线"，它的水平方向像

00 | 01 | 02 | 03 | etc至23

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

我有两个标签，用户应该选择一个"开始"时间和一个"结束"时间，我想知道如何使用javascript部分地为图像上色，我想我可以在它上面放一些CSS，比如在图像上，但我不知道如何使用javascript来做这件事，任何帮助都将非常重要。

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

但是，有没有一个很好的理由让你的时间线成为一个图像呢？对我来说，拥有一个节点集合听起来更好，这些节点要么有"选定"类，要么没有，每个节点上都有一个"00"-"23"文本标记。不需要图像。