ロールオーバーでつまづく

ロールオーバーの実装ということで、教科書にも載っていたし比較的簡単そうなので自分で組んでみようと思ったのですが。

$(function(){

$("img.rollover").mouseover(function(){

$(this).attr("src",$(this).attr("src").replace(/^(.+)(\.[a-z]+)$/, "$1_on$2"));

}).mouseout(function(){

$(this).attr("src",$(this).attr("src").replace(/^(.+)_on(\.[a-z]+)$/, "$1$2"));

}).each(function(){

$("").attr("src",$(this).attr("src").replace(/^(.+)(\.[a-z]+)$/, "$1_on$2"));

});

});

……というまさしく教科書そのままをやってみようと思ったところ、何故かpngファイルがうまくいかない。

（jpgファイルの方はロールオーバーできた）

replace("_on.","_off.")

というのでもやってみようと思ったのですが、それもうまくいかないのですよね。

上を見る限り、拡張子に関係なくロールオーバーできるはずなのですが……。

 alertで途中を確認してみたところ、取っている値自体は『～/button_on.png』とかになっているので、何故ロールオーバーしてくれないのか、そちらの方が不思議です。

家に帰ってから教科書のサンプルの画像をpng形式に変換してやってみましたが、それは動くのですよね。

となると、PNG24形式がいけないのか、切り出し方が何かまずかったのか、画像の命名がダメなのか、はたまた何か根本的にダメなところがあるのか……。

プログラムを組むこと自体は結構面白いと思うのですが、いかんせんjQueryに関しては勉強を始めたばっかりでわからないことがたくさんります。

ちょこちょこ教科書のサンプルを自分で作って確認していこうかなあといった毎日です。