異なるセルに触れる度、テーブル背景画像もそれぞれ変化させる方法

質問

オンマウスで異なるセルなどの背景を変える方法
http://okwave.jp/qa4890043.html
で質問した者です。

その質問で教えて頂いたやり方(※1)を応用して、
異なるセルに触れる度に、テーブル自体の背景もそれぞれ異なる画像に変化させる方法を教えて下さい。　マウスオーバーで変化、マウスアウトで元の背景に戻る、というかたちでお願いします。

　＊　＊　＊　

テーブルにaaa.jpgという背景が設定されているとして、
<table><tr>
<td>1111</td>　←このセルに触れるとテーブル背景がbbb.jpgに変化。
<td>2222</td>　←このセルに触れるとテーブル背景がccc.jpgに変化。
</tr></table>
どのセルでもマウスアウトで元のaaa.jpgに戻る。

(※1)
<script>
function change(obj){
var p=obj.parentNode;
while(p){
if(p.nodeName=="TABLE") break;
p=p.parentNode;
}
p.style.backgroundImage="url(****.jpg)";
}
</script>
<table>
<tbody>
<tr>
<td onMouseover="change(this)">1111</td>
<td>2222</td>
<td>3333</td>
</tr>
</tbody>
</table>

私からのレスは明日以降になってしまいますが、宜しくお願いします。

回答No.1

yambejp · ベストアンサー

このへんまで具体的になるとHTMLよりJavascriptの質問ですね
mouseoutでもとに戻すならスタイルシートと併用がよいですね

<style>
#t0{
background-image:url(aaa.jpg);
}
</style>
<script>
function change(obj,img){
var p=obj.parentNode;
while(p){
if(p.nodeName=="TABLE") break;
p=p.parentNode;
}
var imgurl=img?"url("+img+")":"";
p.style.backgroundImage=imgurl;
}
</script>
<table id="t0">
<tbody>
<tr>
<td onMouseover="change(this,'bbb.jpg')" onMouseout="change(this)">1111</td>
<td onMouseover="change(this,'ccc.jpg')" onMouseout="change(this)">2222</td>
</tr>
</tbody>
</table>

お礼

>Javascriptの質問
それでも回答していただきありがとうございます(T∀T)

すごいっ！　思った通りになって嬉しいです(>∀<,,)

助かりました。ありがとうございます！