画像ロールオーバーを実装するためにjavascriptを用いる例は多数存在しますし、私もよく利用します。今回、jQueryにも慣れてきたので、簡易版ではありますがjQueryでその機能を実装してみました。
jQueryのバージョンは1.3.2です。
function ROverImg(classname){ var prefix = '_o'; $("img").each(function(){ var src = $(this).attr("src"); if($(this).hasClass(classname) && src.indexOf(prefix + ".") == -1){ var size = src.length; var over = src.substring(0, size - 4) + prefix + src.substring(size - 4, size); $(this).attr("out", src); $(this).hover( function(){ $(this).attr("src", over); }, function(){ $(this).attr("src", $(this).attr("out")); } ); } }); }
簡単に説明すると、imgタグ全てに対してクラス名「classname」を指定した要素を探し出し、ロールオーバー画像をセットするという処理です。