2010
03/03
03/03
JQueryで画像のロールオーバーを簡略化
JQUERY | written by 村田佑介
imgタグにロールオーバーをつけていくのが面倒なので、記述を簡略化できるスクリプトを作成しました。
通常は、
<img src="img_001.jpg" onmouseover="src='img_001_o.jpg'" onmouseout="src='img_001.jpg'" />
と書かなければならないところを、
<img class="over" src="img_001.jpg" />
で済むようにしました。
--------------------
■使い方
1.ロールオーバー用の画像を用意してファイル名に_oをつけます。
例：img_001.jpgとimg_001_o.jpg
2.Jqueryを読み込んで下記タグを貼りつけます。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>
<script language="JavaScript">
<!--
$('document').ready(function(){
$('.over').hover(
function(){
var src = $(this).attr('src');
var src_o = src.substr(0, src.lastIndexOf('.')) + '_o' +
src.substring(src.lastIndexOf('.'));
$(this).attr('src',src_o);
},
function(){
var src = $(this).attr('src');
var src = src.substr(0, src.lastIndexOf('.')-2) +
src.substring(src.lastIndexOf('.'));
$(this).attr('src',src);
}
)
});
// -->
</script>
3.ロールオーバーしたい画像にoverクラスをつけます。
例：<img class="over" src="img_001.jpg" />
--------------------ご自由にお使い下さい。
