javascript - リンクで画像を変更

Question

現在、「前」と「後」の2つのリンクがある単純なドロップダウンがあります。

<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>

これらのリンクの1つをクリックすると、メイン画像のsrcが変更されます。これらのドロップダウンをプレーンリンクに変換したいのですがBefore | After、その方法がよくわかりません。

誰か助けてもらえますか？ありがとう。

Answer 1

これを試して

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

Answer 2

次のようなjQueryを使用できます。

<img id="beforeAfter1" src="images/b2.jpg" width="580" height="435"/>
<a id='before' value="images/b2.jpg">Before</a> |
<a id='after' value="images/a2.jpg">After</a>

<script>
$(document).ready(function(){
  $('#before').click(function(e) {
    e.preventDefault();
    $('#beforeAfter1').attr('src', 'images/b2.jpg');
  });
  $('#after').click(function(e) {
    e.preventDefault();
    $('#beforeAfter1').attr('src', 'images/a2.jpg');
  });
});
</script>