Question

Right now I have a simple drop down with two links “before” and “after”:

<img id="beforeAfter1" src="images/b2.jpg" width="580" height="435"/>
<div class="baDiv">
    <select class="baSelect" onchange="document.getElementById('beforeAfter1').src = this.value">
        <option value="images/b2.jpg">Before</option>
        <option value="images/a2.jpg">After</option>
    </select>
</div>

When I click on one of these links the main image src changes. I want to convert these drop downs to plain links Before | After But I am not quite sure how to do that.

Can anyone help me? Thanks.

Answer 1

Try this

<a href="#" onclick="document.getElementById('beforeAfter1').src = 'images/b2.jpg';">Before</a>
<a href="#" onclick="document.getElementById('beforeAfter1').src = 'images/a2,jpg';">After</a>