js mouseoverを介して表示された画像へのhrefリンクを追加

Question

私は3つの画像をマウスオーバーで2番目の画像に変更しました。マウスオーバーすると、他のイメージも標準イメージにリセットされます。これはすべて正常に動作します。私は別のページへのクリック可能なリンクであることを第2の画像のそれぞれを希望

しかし

..

誰かが助けてくれることを願っています。

$(document).ready(function(){ 
    $('#s1').mouseover(function(){ 
     $('#s1').attr('src', 'images/object/click-1.png'); 
      $('#s2').attr('src', 'images/object/standard-2.jpg'); 
      $('#s3').attr('src', 'images/object/standard-3.jpg'); 
    }); 
    $('#s2').mouseover(function(){ 
     $('#s1').attr('src', 'images/object/standard-1.jpg'); 
      $('#s2').attr('src', 'images/object/click-2.png'); 
      $('#s3').attr('src', 'images/object/standard-3.jpg'); 
    }); 
    $('#s3').mouseover(function(){ 
      $('#s1').attr('src', 'images/object/standard-1.jpg'); 
      $('#s2').attr('src', 'images/object/standard-2.jpg'); 
      $('#s3').attr('src', 'images/object/click-3.png'); 
    }); 


}); 

のでリンクはクリックし-3.pngをクリックし-2.pngをクリック-1.pngにする必要があります。

<div id="section3" class="container-fluid" align="center"> 
    <div class="row row-centered "> 
    <div id="top-box-1" class="col-sm-4"> 

    <img src="images/object/standard-1.jpg" id="s1" width="300" height="300" /> 
    </div> 


    <div id="top-box-2" class="col-sm-4"> 

    <img src="images/object/standard-2.jpg" id="s2" width="300" height="300" /> 
    </div> 


    <div id="top-box-3" class="col-sm-4"> 

    <img src="images/object/standard-3.jpg" id="s3" width="300" height="300" /> 
    </div> 
    </div> 
    </div> 

Answer 1

各画像タグ（s1、s2、s3）をリンクにするだけです。 imgタグの実際のsrc属性は、あなたが望むイメージを表示するように変更することができますが、それは本当に無関係です。結局のところ、ユーザは自分が何かをマウスでクリックしただけです。