メニュー ボタン (画像) が白いページがありますが、ホバーすると赤くなり、マウスアウトすると白に戻ります。だから私は対応する赤いメニューボタンを持っています。したがって、白いボタンが 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 コードがそれらをリロードします。したがって、おそらくそれらを非表示の入力としてロードすることでこれを解決する方法、ブラウザのキャッシュにロードすること、またはこれを解決する他の方法があれば幸いです。