1

我想根据选择值为 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_line img 上着色。

“time_line.png”是 339x10 像素，彩色图片是“cover_red.png”，它是 14x10 像素，偏移 0.125 像素，但没关系。

所以我想做的是把颜色img放到时间轴img上，使用javascript根据选择对其进行着色。

我不知道该怎么做，如果有人能指出我正确的方向，那将非常有帮助。

4

1 回答 1

1

解决这个问题的另一种方法可能是图像映射。<img>tag属性（参见丰富的usemapHTML 文档）允许图像的可点击区域。使用z-indexCSS 属性还可用于根据可变输入对具有不同背景颜色（或图像精灵）的不同元素进行分层。使用 CSS top/right 将这些图层适当地放置position:absolute在最低的背景基础图像上z-index。

于 2013-02-25T00:32:16.897 回答