изображение на изображение после выбора опции

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"; 
} 

DE MO:http://jsfiddle.net/U82LA/1/