画像のロールオーバーをつけるのがめんどくさい人のために、簡単にロールオーバーできるミニライブラリを作りました。
通常は、

<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

SPONSERD LINK

使い方その2

Jqueryを読み込んで下記タグを貼りつけます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>
<script language="JavaScript">
<!--
$(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>

使い方その３

ロールオーバーしたい画像にoverクラスをつけます。
例：

<img class="over" src="img_001.jpg" />