1

メニュー ボタン (画像) が白いページがありますが、ホバーすると赤くなり、マウスアウトすると白に戻ります。だから私は対応する赤いメニューボタンを持っています。したがって、白いボタンが motors1.jpg の場合、赤いボタンは motors2.jpg であるため、アルゴリズムの下の JQuery コードです。

<table>
<tr>
<td><img class="navimg" src="images/home1.gif"/></td>
<td><img class="navimg" src="images/motors1.gif"/></td>
<td><img class="navimg" src="images/about_us1.gif"/></td>
<td><img class="navimg" src="images/media1.gif"/></td>
<td><img class="navimg" src="images/forums1.gif"/></td>
<td><img class="navimg" src="images/dealers1.gif"/></td>
<td><img class="navimg" src="images/whats_new1.gif"/></td>

</tr>
</table>

Jquery コードは次のとおりです。

$(document).ready(function(){
   $('.navimg').mouseover(function(){
    source=$(this).attr('src').replace('1','2');
    $(this).attr('src',source);

   }).mouseout(function(){
    source= source.replace('2','1');
    $(this).attr('src',source);
   });

});

配置に外部 CSS スタイルシートを使用しました

                          .navimg{
                         width: 125.5px;
                         height: 34px;
                                  }

質問: ページが最初にロードされたときに、白いボタンが赤いボタンに変わるのに遅延があることに気付きました。ラグは、ページの読み込み時に赤いボタンが読み込まれなかったために発生したと思われます (したがって、ブラウザーのキャッシュにはありません)。したがって、jquery コードがそれらをリロードします。したがって、おそらくそれらを非表示の入力としてロードすることでこれを解決する方法、ブラウザのキャッシュにロードすること、またはこれを解決する他の方法があれば幸いです。

4

3 に答える 3

2

スプライトを使用するのが最善の解決策です。

ただし、これが不可能な場合は、次の JavaScript メソッド (Dreamweaver から取得) を使用して画像をプリロードできます。

html タグの直後に次を追加します。

<script type="text/JavaScript">
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
</script>

body タグに次のプロパティを追加します。

onload="MM_preloadImages('path of image goes here')"
于 2012-06-08T11:17:19.127 に答える
2

単純に画像スプライトソースを使用する

1 つのメニュー ボタンに対して、白と赤の画像が含まれる 1 つの画像ファイルがあるため、変更する必要があるのbackground-positionはホバー アクションのみです。非常に高速で、画像は完全に読み込まれ、JavaScript を使用する必要はなく、CSS のみを使用できます。

于 2012-06-08T11:07:14.510 に答える
1

これを行うには、motor1.gif と motors2.gif を結合して motors.gif にします。

上部に白い画像、下部に赤い画像を配置して 1 つの画像を作成した場合、mouseover/mouseout(ps. チェックアウトhover) 画像のオフセットを変更するだけで済み、プリロードは必要ありません。

于 2012-06-08T11:04:36.553 に答える