着色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

回答