jquerで画像の入れ替えをしたいのですが、上手く行かず困っております

質問

jquerで画像の入れ替えをしたいのですが、上手く行かず困っております。

ブロックを丸ごとクリック範囲にするため、透過gifをかぶせています。
htmlは下記のようになりますが、マウスオーバーで背景と、<p class="ここも変更">に入っている画像を入れ替えたいです。

<ul>
<li>
<div class="data">
<h3>タイトル</h3>
<p>～</p>
<p class="a">～</p>
<p class="ここも変更"><img src="***.png" /></p>
</div>
<img src=".**.jpg" />
<a href="***.html" class="sp"><img src="sp.gif" /></a>
</li>
</ul>

背景についてはスクリプトができております。
liにクラスをつけて、cssで背景を書き換えています。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
$(function(){
$("body#list.index #contents ul li a.sp").mouseover(function(){
$(this).parents('li').addClass("over") ;
}).mouseout(function(){
$(this).parents('li').removeClass("over");
});
});
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

しかし、<p class="ここも変更">の部分について、セレクタの指定がうまくできずにいます。
よろしくお願いいたします。

回答No.1

kuzumiHK · ベストアンサー

もっと簡単な方法もあるかもしれませんが。。
※「ここも変更」はclass名を英文にしておいたほうが無難かもしれません。

$(function(){
$("a.sp").mouseover(function(){
$(this).parents('li').addClass("over");
var image = $(this).parents('li').find('p.ここも変更 img').attr('src');
image = image.replace(/^(.+?)(\.(png|jp(e)?g|gif))$/g, "$1_over$2");
$(this).parents('li').find('p.ここも変更 img').attr('src',image);
}).mouseout(function(){
$(this).parents('li').removeClass("over");
var image = $(this).parents('li').find('p.ここも変更 img').attr('src');
image = image.replace(/^(.+?)_over(\.(png|jp(e)?g|gif))$/g, "$1$2");
$(this).parents('li').find('p.ここも変更 img').attr('src',image);
});
});

お礼

少々体調を崩してしまいレスが遅くなりました。
希望の動作ができ、ソースの方も理解できました！
kuzumiHKさん、ありがとうございました。

補足

ありがとうございます。
ぱっとみてすぐ理解できないので、明日リファレンスを見ながらどうなっているのか調べてさせていただきます。

class名の「ここも変更」実際には英数で書いております。
変更をしたい場所がわかりやすいように日本語にしましたが逆にわかりにくくなってしまったようで申し訳ありません。