シンプルなコードでロールオーバー／jquery.js

■参照サイト■
意外とよく使うJavascript　ロールオーバー
by maro-z.com

■対象フレームワーク■
jquery.js

■必要なプラグイン■
jquery.rollover.js
※リンク先ページ中ほどからDLできる。

■サンプル■
class="rollover" を指定している画像が、
マウスオーバー時にsample_on.gifに差し替わる。



■jquery.rollover.js　■
var preLoadImg = new Object();

function initRollOvers(){
$("img.rollover").each(function(){
var imgSrc = this.src;
var sep = imgSrc.lastIndexOf('.');
var onSrc = imgSrc.substr(0, sep) + '_on' + imgSrc.substr(sep, 4);
preLoadImg[imgSrc] = new Image();
preLoadImg[imgSrc].src = onSrc;
$(this).hover(
function() { this.src = onSrc; },
function() { this.src = imgSrc; }
);
});
}
$(function(){
initRollOvers();
});