0

私はJqueryを初めて使用し、次の機能を実行するのに問題があります。

2列のWebページがあります。左側の列には、順序付けられていないリンクのリストがあります。

右の列にはdivがあります。

私がやりたいのは、右の列にdivを配置し、ユーザーが左の列のリンクにカーソルを合わせたときに画像を変更することです。

例えば。

ユーザーホバーリンク1divが画像1を表示するように変更されます

ユーザーホバーリンク2divは画像2を表示します

何をしても動かないようです。

どんな助けでも大いに感謝します

4

2 に答える 2

2

divの代わりに画像のソースを変更するだけの非常に簡単な解決策です。

<a href="javascript:;" class="mylink" id="link1">link1</a>    
<a href="javascript:;" class="mylink" id="link2">link2</a> 
<div class="mydiv" ></div>

$(".mylink").bind("mouseover",function(){
  if ( this.id == 'link1' )
  {
     $(".mydiv")[0].innerHTML = "<img src='1.png'.. />";  
  }
  else
  {
     $(".mydiv")[0].innerHTML = "<img src='2.png' .. />";  
  }
}).bind("mouseout",function(){

  $(".mydiv")[0].innerHTML = "";
});

ソースのプレビュー

于 2009-10-01T12:53:39.703 に答える
2

これは、HTML5 データ属性を使用して、画像リソースの場所を保存します。

<ul>
    <li><a href="foos.html" data-image-src="images/foo.png">What is a foo?</a></li>
    <li><a href="bars.html" data-image-src="images/bar.jpg">Find a good bar!</a></li>
</ul>

おまけに、簡単なイメージ プリローダーも入れておきます。

$(function() {
    $('ul a')
        .mouseover(function() {
            $('div img').attr('src', this.getAttribute('data-image-src'));
        })
        .each(function() {
            new Image().src = this.getAttribute('data-image-src');
        });
}

これに合わせて素敵なフェード効果を作成するのに、それほど労力を費やす必要はありません。

于 2009-10-01T12:58:52.080 に答える