1. TOPページに戻る
  2. Javascript
  3. jQueryで画像をロールオーバーする方法2

jQueryで画像をロールオーバーする方法2

jQueryを使って画像をロールオーバーする方法のclassなどを指定せず画像の名前だけで、ロールオーバーする方法です。

使用方法

使用方法はJSファイルを読み込んだ後、単純にロールオーバーしたい画像の名前の拡張子の前に「_off」をつけるだけです。そして ロールオーバーする画像は「_on」で用意しておきます。

$(document).ready(function() {
$("img").each(function(){
var offSrc = $(this).attr("src");
var onSrc = offSrc.replace("_off.","_on.");
$(this).hover(
function() { $(this).attr("src",onSrc); }
,function() { $(this).attr("src",offSrc); }
);
});
});