選択値に基づいて、imgの領域に色を付けたい。
例：
HTMLマークアップ：
<tr id="from"> <!-- Hide this table unless yes selected -->
<td>
from
</td>
<td>
<select name="from" id="from" style="width:100%; text-align:center; font-weight:bold;">
<option value="" name="" selected="selected">....</option>
<?php
$i = 0;
while ($i <= 23) {
if ($i<10) {
echo '<option value="f' . $i . '" name="f' . $i . '">0' . $i . '.00</option>';
}
else {
echo '<option value="f' . $i . '" name="f' . $i . '">' . $i . '.00</option>';
}
$i++;
}
?>
</select>
</td>
</tr>
<tr id="to"> <!-- Hide this table unless yes selected -->
<td>
to
</td>
<td>
<select name="to" id="to" style="width:100%; text-align:center; font-weight:bold;">
<option value="" name="" selected="selected">....</option>
<?php
$i = 0;
while ($i <= 23) {
if ($i<10) {
echo '<option value="t' . $i . '" name="t' . $i . '">0' . $i . '.00</option>';
}
else {
echo '<option value="t' . $i . '" name="t' . $i . '">' . $i . '.00</option>';
}
$i++;
}
?>
</select>
</td>
</tr>
<tr id="timer_table"> <!-- Hide this table unless yes selected -->
<td colspan="2">
<img src="img/time_line.png" width="100%" height="100%" style="border: 1px solid #d1d2d4;" />
</td>
</tr>
基本的に、ユーザーは開始時刻と終了時刻を選択することになっており、その部分はtime_lineimgで色付けされているはずです。
「time_line.png」は339x10ピクセルで、カラー写真は「cover_red.png」です。これは14x10ピクセルで、0.125ピクセルずれていますが、問題ありません。
だから私がやりたいのは、タイムラインimgにcolor imgを配置し、javascriptを使用して選択に基づいて色を付けることです。
私はこれをどのように行うのか分かりません。誰かが私を正しい方向に向けることができれば、それは非常に役に立ちます。