jQueryで画像のロールオーバー

2008年10月 7日

<ul id="gnav">
<li><a href="foo"><img src="gnav_foo_off.gif"></a></li>
<li><a href="bar"><img src="gnav_bar_off.gif"></a></li>
</ul>

HTMLがこんなんなってるとして、jQueryを使うと、JavaScriptはこんなんでいいみたい。

$('#gnav img').hover(function(){
    this.src = this.src.replace('_off.gif','_on.gif');
    },function(){
    this.src = this.src.replace('_on.gif','_off.gif');
});

シンプルすぎて逆に不安。

上記だと、画像の先読み込みをしていないので、先読み込みするプラグイン Preload を入れてみる。
そして、先読み込みの記述を追加。