- ベストアンサー
セルの背景画像の変更
リンクに触ると背景画像をp15.jpgに変更したいのですが よろしくお願いします。 <table> <tr><td>123</td> <td background="p10.jpg"><a hrf="abc.html">abc</A></td> <td>456</td> </tr></table>
- hana3090
- お礼率29% (65/222)
- JavaScript
- 回答数3
- ありがとう数1
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
<table> <tr><td>123</td> <td background="p10.jpg"><a hrf="abc.html" onMouseOver="setpbg(this,'p15.jpg')" onMouseOut="setpbg(this,'p10.jpg')">abc</A></td> <td>456</td> </tr></table> <script> function setpbg(oj,f){ parentSearch(oj,'TD').style.backgroundImage='URL('+f+')'; } function parentSearch(o,t){while(o.tagName!=t)o=o.parentNode;return o;}//親node探し </script>
その他の回答 (2)
- yambejp
- ベストアンサー率51% (3827/7415)
backgroundを直接いじるよりはクラスを入れ替えてやる方が効率的ですね こんな感じで <script> window.onload=function(){ var t=document.getElementById("t0"); var tags=t.getElementsByTagName("a"); for(var i=0;i<tags.length;i++){ tags[i].onmouseover=function(){p=this.parentNode;if(p.className=="p10") p.className="p15";} tags[i].onmouseout =function(){p=this.parentNode;if(p.className=="p15") p.className="p10";} } } </script> <style> .p10 { background: url(p10.jpg); } .p15 { background: url(p15.jpg); } </style> <table id="t0"> <tr> <td>123</td> <td class="p10"><a href="abc.html">abc</a></td> <td>456</td> </tr> </table>
お礼
返事遅くなってすみません、おかげさまで背景画像の変更が 出来るようになりました、有難うございます。 上記のコードを見ると私には少し難しすぎるようです、 これからもよろしくお願いします。
- hkd9001
- ベストアンサー率48% (99/204)
hana3090さん、おはようッス。 質問見たんですけど、こんな感じでどうッスか？ ----------------------------------------------- <html> <body> <style> #gazou a:hover { background: url(p15.jpg) no-repeat; } </style> <form> <table> <tr><td>123</td> <td background="p10.jpg"><div id="gazou"><a href="abc.html">abc</a></div></td> <td>456</td> </tr></table> </form></body></html> ----------------------------------------------- こんな風に、div タグで はさんで、指定をすると、いろいろできて面白いッスよ。 あとは、テーブルん中のセルの縦サイズと横サイズを、使いたい画像のサイズにうまく合わせることッスね。 じゃ、よろしくッス。
補足
返事遅くなってすみません、おかげさまで背景画像の変更が 出来るようになりました、有難うございます。 追加の質問なのですが下記のコードの解説をお願いしたいのですが よろしくお願いします。 function parentSearch(o,t){while(o.tagName!=t)o=o.parentNode;return o;}//親node探し