jQueryでマウスオーバー画像変化について

質問

マウスカーソルを重ねると画像が変化する効果を以下のコードで行っています。

$(function(){
$('span img').hover(function(){
$(this).attr('src', $(this).attr('src').replace('-', 'x'));
}, function(){
if (!$(this).hasClass('currentPage')) {
$(this).attr('src', $(this).attr('src').replace('x', '-'));
}
});
});

BODY部分は、

<SPAN><IMG src="画像-.jpg"></SPAN>

画像-.jpg と 画像x.jpg 2枚の画像ファイルを用意しています。

上記のコードだとファイル名に“-”と“x”を付けた2枚が必要で、
マウスオーバー前、変化前の画像ファイル名にわざわざ“-”を付けておかないといけません。

教えていただきたいのは、
マウスオーバー前、変化前の画像ファイル名に“-”を付けない 画像.jpg のまま
（BODY部分は、<SPAN><IMG src="画像.jpg"></SPAN>）で、
マウスオーバー時は、“x”を付けてある 画像x.jpg を表示し、
カーソルが去ったら 画像.jpg に戻る、コードです。

簡単に云えば、マウスオーバー時、 ファイル名に“x”を付加し、
カーソルが離れたら、 ファイル名を元に戻す（付加した“x”を削除する？）、
ということになるでしょうか。

実は、以前、ホームページビルダーで作ったページが多数あって、
そちらは変化後の画像にだけ“x”を付けて区別するだけで画像変化ができていますが、
ソースも長く、重いです。
今後、jQueryを使って軽くなるよう、修正して行きたいと思っていますが、
上記のコードだと、画像ファイル名に“-”を付ける作業が増えてしまい、
結果、タイプミスなども増えると思うので、できれば避けたいのです。

よろしくお願いします。

回答No.1

mikemike7 · ベストアンサー

拡張子が.jpgで統一されているのなら、
以下のように変換すればいいのではないでしょうか。

$(function(){
$('span img').hover(function(){
$(this).attr('src', $(this).attr('src').replace('.jpg', 'x.jpg'));
}, function(){
if (!$(this).hasClass('currentPage')) {
$(this).attr('src', $(this).attr('src').replace('x.jpg', '.jpg'));
}
});
});

お礼

おお！
拡張子ごとreplaceの対象にすればOKってことですね！
コードの中では記述された拡張子も文字列の一部みたいなものだから、replaceの対象になるってことかぁ…。

拡張子は統一されています（jpg←→gifは無し）ので、早速試したら、上手く行きました！
ありがとうございました。