Question

我希望获得与here:

类似的效果

我在route-map元素中有一个图像，用作背景。在表单中选择选项后，我希望更改背景上的上层。如果我选择例如选项1，地图顶部的图片将会改变。其他选项也一样。

我怎样才能做到这一点？对于如何根据表单中选择的选项更改图像，我完全不知道。

Answer 1

您可以将“上层”设为具有透明背景的图像。图像绝对定位，最初不可见。选择后，调用JS函数使其可见。类似的东西：

<强> HTML：

<img src="map.gif"/>
<img id="line" src="line.png" />
<hr/>

<select onchange="displayLine()">
    <option></option>
    <option>Connect</option>
</select>

<强> CSS

#line {
   position: absolute;
   top:170px;
   left:140px;

   height:100px;
   width:150px;    

   display:none;

}

<强> JS

function displayLine() {
    document.getElementById("line").style.display="block";
}

DEMO： http://jsfiddle.net/U82LA/1/

选择选项后图像上的图像

1 个答案: