5

jQuery 画像表示ギャラリーを作成しようとしているので、画像にカーソルを合わせると、gal (ギャラリー) div の背景になります。

$(document).ready(function(){
    $("#img1").hover(function(){
        var img1 = document.getElementById("gal");
        gal.style.background="url(images/img1.png), black";
    });
    $("#img1").mouseout(function(){
        gal.style.background="none";
    });
});
$(document).ready(function(){
    $("#img2").hover(function(){
        var img2 = document.getElementById("gal");
        gal.style.background="url(images/img2.png), black";
    });
    $( "#img2" ).mouseout(function(){
         gal.style.background="none";
    });
});

htmlコード

        <section>       
 <h1> Images</h1>
 <h3> Photos </h3>
 <div id="gal">
 </div>
 <img id="img" src="images/img1.png" width="100px" height="100px"/>
 <img id="img" src="images/img2.png" width="100px" height="100px"/>

    </section>

これは私のコードであり、完全に正常に動作しますが、このコードを使用すると、各 div を個別に入力する必要があります。

画像にカーソルを合わせると、それがどの画像であるかがわかり、divの背景がそれと等しくなる方法はありますか? ご協力ありがとうございました。

PS私はJavaScriptが初めてです。

4

2 に答える 2

1

これを試して：

   $(document).ready(function(){
   var gal = $("#gal"); //Avoid repeated traverse

   $("img").hover(function(){
     gal.css("background",'url(' + $(this).attr('src') + ')');  
     //Assuming you want to set current image as background image
    });

   $( "img" ).mouseout(function(){
      gal.css("background","none");  
   });
  });

これが基本的な仕組みです。必要に応じて、セレクターとパスを変更する必要がある場合があります。

フィドル: http://jsfiddle.net/NNGdR/5/

于 2013-08-01T11:03:28.657 に答える