- ベストアンサー
onMouseでbackgroundの画像を変える
あるテキストのリンクにマウスを持っていくと、テーブルのTDにつけてあるbackgroundの画像を他のものに入れ替えるという事をやりたいと思っています。 できればたくさんのブラウザでやりたいのですが、最低IEで動けばと思っています。できないのかなとも思うのですが。 どなたか是非アドバイスお願いします。よろしくお願いします。
- JavaScript
- 回答数3
- ありがとう数4
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
参考URLの 「文字にマウスポインタを合わせると背景画像を表示」 うぃ、参考にしてみては如何でしょうか。
その他の回答 (2)
こんな感じではいかがでしょうか。 <html> <head> <title>サンプル</title> <script type="text/javascript"><!-- var BImg= new Array(); var BkStl= new Array(); BImg[0]= new Image() ; BImg[0].src="***0.gif"; BImg[1]= new Image() ; BImg[1].src="***1.gif"; /* 背景画像のプレロード 背景画像に使う画像のURLを入れてください。 */ BkStl[0]="transparent"; BkStl[1]="url('***0.gif')"; BkStl[2]="url('***1.gif')"; BkStl[3]="#ffff00"; /* 背景を指定するスタイルシートを入れてください。 画像なら「url('画像のURL')」、背景色なら色指定、親要素継承ならtransparentを入れます。 */ function TDBkCh(i){ if (document.getElementById){ document.getElementById("TarTd").style.background = BkStl[i]; } } //--></script> </head> <body> <table> <tr> <td id="TarTd">さんぷる</td> </tr> </table> <a href="#" onMouseover="TDBkCh(0)">消去</a> <a href="#" onMouseover="TDBkCh(1)">イメージ1</a> <a href="#" onMouseover="TDBkCh(2)">イメージ2</a> <a href="#" onMouseover="TDBkCh(3)">黄色</a> </body> </html> document.getElementById("ID名").style.backgroundで、特定のID名をもつ要素の背景に関するスタイルシートを操作することができますので、それを利用して背景を変更するようなスクリプトになっています。 IE6、Netscape7、Opera7では動作確認してあります。 参考になれば幸いです。
お礼
返事が遅くなり申し訳ありません。 ありがとうございました。
- akira212
- ベストアンサー率24% (75/308)
あんまり、参考になりませんが・・・ <html> <head> <title></title> </head> <body> <table border="1" bgcolor="white"> <tr> <td onMouseover="this.style.background = 'orange'" onMouseout ="this.style.backgroundColor = 'white'"> 【リンク】 </td> </tr> </table> </body> </html> 上記のプログラムで、【リンク】にマウスを合わせると、色が変わるようにはできますが、画像を変換させる方法までは、わかりません・・・（ＴＴ） onMouseover="this.style.background = 'orange'" で、マウスが上に来ている時。 onMouseout ="this.style.backgroundColor = 'white'" でマウスが上に無いときの色を指定しています。 これを、テーブル外から変えたい場合は、<td name="name1">として、 外部のリンク文字の上に onMouseover="name1.style.background = 'orange'" 等すれば、できるんじゃないかと思いますので、参考になさって下さい。
お礼
返事が遅くなり申し訳ありません。 ありがとうございました。
お礼
返事が遅くなり申し訳ありません。無事解決いたしました。 function change_bgi(id,img_src){ document.all[id].style.backgroundImage = "url(" + img_src + ")"; } <a onMouseOver="change_bgi('btn01','img/bg_btn_on.gif');" onMouseOut="change_bgi('btn01','img/bg_btn.gif');">トップ</a> こんな感じです。本当にありがとうございました。