onMouseでbackgroundの画像を変える

解決済

質問者：noname#107402
質問日時：2003/07/27 22:58
回答数：3件

あるテキストのリンクにマウスを持っていくと、テーブルのTDにつけてあるbackgroundの画像を他のものに入れ替えるという事をやりたいと思っています。

できればたくさんのブラウザでやりたいのですが、最低IEで動けばと思っています。できないのかなとも思うのですが。

どなたか是非アドバイスお願いします。よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： BlueRay
回答日時：2003/07/28 11:52

参考URLの

「文字にマウスポインタを合わせると背景画像を表示」
うぃ、参考にしてみては如何でしょうか。

参考URL：http://www.geocities.co.jp/SiliconValley-Cuperti …

- 0
- 件

通報する

この回答へのお礼

返事が遅くなり申し訳ありません。無事解決いたしました。

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>

こんな感じです。本当にありがとうございました。

通報する

お礼日時：2003/08/11 21:57

No.3

回答者： lead1976
回答日時：2003/07/28 19:09

こんな感じではいかがでしょうか。

<html>
<head>
<title>サンプル</title>
<script type="text/javascript"></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では動作確認してあります。

参考になれば幸いです。

- 1
- 件

通報する

この回答へのお礼

返事が遅くなり申し訳ありません。
ありがとうございました。

通報する

お礼日時：2003/08/11 21:58

No.2

回答者： akira212
回答日時：2003/07/28 14:43

あんまり、参考になりませんが・・・

<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'"
等すれば、できるんじゃないかと思いますので、参考になさって下さい。