1

私には2つのDIV要素があります。
内部DIV_1では、呼び出されたときに特定の画像を表示したいDIV_2と考えていLINKSます。

の各個人LINKがホバーされると、リンク関連の画像が に表示され、別の写真DIV 2がホバーされている場合は別の写真に変更されますが、マウスの矢印が特定の の上にホバーされていない場合は非表示になります。DIV 1LINKLINK

Javascript

function showIt(imgsrc) 
{
    document.getElementById('bottle').src=imgsrc;
    document.getElementById('bottle').style.display='block';
}

function hideIt()
{
    document.getElementById('bottle').style.display='none';
}
4

4 に答える 4

2

リンクにこのコードを追加します：

<a href="#" onmouseover="showIt('some_image.jpg')" onmouseout="hideIt()" >...</a>

しかし、それはきれいに見えません。jQueryの使用を検討してください。

編集：

jQueryを使用すると、次のように実行できます。

HTML：

<a href="#" data-src="some.jpg" class="changeImage" >...</a>
<a href="#" data-src="another.jpg" class="changeImage" >...</a>
...
<img class="bottle" />

JavaScript

$(function(){
  $('.changeImage').hover(function(){
         $('.bottle').attr('src',$(this).attr('data-src'));
         $('.bottle').show();
     },
     function(){
         $('.bottle').hide();
     });

})

show（）およびhide（）の引数としてアニメーション時間を指定することにより、アニメーションの速度を調整できます。タグのdata-src属性に配置された画像のURL。

于 2012-09-07T19:52:35.887 に答える
0

background-image別の方法として、CSS でプロパティを設定してから、疑似クラスを追加して新しい画像に変更することを検討してください:hover。これにより、Javascript をまったく処理する必要がなくなります。

このtransitionプロパティを使用すると、2 つの画像の間にフェードを追加することもできます。追加の作業や、jQuery などの別のライブラリを含める必要はありません。

于 2012-09-07T19:59:06.590 に答える
0

使用できる簡単な jQuery を次に示します。

$('#DIV1').delegate('a', 'mouseenter mouseleave', function (e) {
    if (e.type === "mouseenter") {
        switch ($(this).attr('href')) {
            case "#link1":   
                $('#DIV2').html('<img src="image1.jpg" />');
                break;
            case "#link2":   
                $('#DIV2').html('<img src="image2.jpg" />');
                break;
        }
    } else if (e.type === "mouseleave") {
        $('#DIV2 img').fadeOut();
    }
});
于 2012-09-07T20:00:49.220 に答える
0

jsBin デモ

このようなものがある場合：

  <div id="images">
    <img src="img1.jpg" alt="" />
    <img src="img2.jpg" alt="" />
    <img src="img3.jpg" alt="" />  
  </div>
  
  <ul id="links">
    <li><a href="#">Link1</a></li>
    <li><a href="#">Link2</a></li>
    <li><a href="#">Link3</a></li>
  </ul>

CSS:

#images img{position:absolute;display:none;}

これだけが必要なよりも：

$('#links li').on('mouseenter mouseleave',function(e){
    $('#images img').stop().fadeTo(300,0);    // do on mouseenter and mouseleave
    if(e.type=='mouseenter'){                 // do just on mouseenter
        $('#images img').eq( $(this).index() ).stop().fadeTo(300,1);
    }
});
于 2012-09-07T20:01:27.000 に答える