onmouseoverを別の箇所でも反映させたい

質問

知識不足でどうしても解らないので質問させていただきました。
ご存知の方がいらっしゃったら解答していただければ嬉しいです。

テーブル内の画像でonmouseoverで画像を変える構文を入れています。
ただ、そのセルの画像と同時に真下のセルの文字もどうにか変化させたいのです。（背景色でも文字の色でも可）

このような動作をさせるのは可能でしょうか？
よろしくお願いいたします。

回答No.4

olda · ベストアンサー

<script language="javascript">
<!--
function swapImage(nUrl, nImageId, nMessage, nLabelId) {
// ブラウザ判定
if(document.getElementById) {
// 画像を入れ替える
document.getElementById(nImageId).src = nUrl;
// メッセージを入れ替える
document.getElementById(nLabelId).innerHTML = nMessage;
}
}
//-->
</script>

<table>
<tr>
<td>
<img src="1.jpg" onmouseover="swapImage('2.jpg', 'image01', 'マウスオーバー', 'label01')" onmouseout="swapImage('1.jpg', 'image01', 'マウスアウト', 'label01')" id="image01">
</td>
</tr>
</table>

<table>
<tr>
<td>
<span id="label01">メッセージ</span>
</td>
</tr>
</table>

お礼

ソース使わせて頂きました！大変参考になりました。
有難う御座いました！！

補足

// メッセージを入れ替える
document.getElementById(nLabelId).innerHTML = nMessage;

ここの部分を

document.getElementById(nLabelId).style.backgroundColor="#FF0000";

に変えてやってみたのですが、マウスアウトしても
元に戻らなくなってしまいました・・・

回答No.5

N_A_O

下記参照
http://allabout.co.jp/career/javascript/closeup/CU20010415/index3.htm#setFGCOLOR
http://game.gr.jp/about/s/part2/q/q02/q02_6.htm
http://game.gr.jp/about/s/part2/l/l01/l01_6.htm

<script Language="JavaScript"><!--
function myChgPic(myPicURL,myImgTagName){
document.images[myImgTagName].src = myPicURL;
}
//文字
function setFGCOLOR(layName,color){
if(document.all) //IE4用
document.all(layName).style.color=color
else if(document.getElementById) //N6,Moz,IE5,IE6用
document.getElementById(layName).style.color=color
}
//セル
function setBGCOLOR(layName,color){
if(color=='')color='transparent'
if(document.getElementById) //N6,Moz,IE5,IE6用
document.getElementById(layName).style.backgroundColor =color
else if(document.all) //IE4用
document.all(layName).style.backgroundColor=color
else if(document.layers){ //NN4用
if(color=='transparent')color=null
document.layers[layName].bgColor=color
}
}
// --></script>
<style>
<!--
.lays {
color : #000000 ;
font-size : 18px ;
font-weight: bold ;
}
-->
</style>

<table>
<tr>
<td>
<a href="#" onmouseover="myChgPic('2.jpg' , 'a');setFGCOLOR('a0','royalblue');setBGCOLOR('a0','yellow')" onmouseout="myChgPic('1.jpg' , 'a');setFGCOLOR('a0','#000000');setBGCOLOR('a0','white')">
<IMG src="1.jpg" name="a" width="20" height="20">
</a>
</td>
</tr>
</table>
<table>
<tr>
<td width="350" heght"100">
<div id="a0" class="lays">
◆ここにonmouseoverを反映させたい
</div>
</td>
</tr>
</table>

お礼

丁寧なソース、どうも有難う御座いました！！
大変参考になりました！

回答No.3

cyokokichi

DOM対応ブラウザなら
document.getElementById('ID属性値').firstChild.nodeValue="文字"
で文字列を変更できるらしいです。（IE6、NN7、Firefoxで確認しました。）
これは「はじめてのＤＯＭ」さんでわかりやすく解説されています。

IE4以上なら
document.all('ID属性値').innertext="文字"
でも変更できます。
このあたりは「イヌでもわかるJavaScript講座」さんが得意みたいです。ブラウザ判別要領もサンプルに乗っています。

ユーザーエージェント一覧は下のサイトが参考になります。
http://www.openspc2.org/userAgent/

ご参考になれば幸いです。

お礼

document.ElementByIdを使って出来ました！
どうも有難う御座いました！

回答No.2

BLUEPIXY

参考ＵＲＬは、適当なIDを付けたタグのテキストを置き換えるサンプルです。
参考になると思います。
一般に
document.ElementById(idName).style.color="#FF0000";
で文字色を
document.ElementById(idName).style.backgroundColor="#FF0000";
で背景色を変えられます。
また、場合によっては、
あらかじめいくつか文字列を準備しておいて
style.display="none" or "inline";
とかして表示・非表示を切り換えるとかの方法もあります

参考URL：

http://okweb.jp/kotaeru.php3?qid=1498191

お礼

document.ElementById
でできました。有難う御座いました！！

回答No.1

noname#83116

現在のソースを貼り付けてみてください。

補足

回答有難う御座います。
見づらくて申し訳御座いませんがソースです。

<SCRIPT language="JavaScript"><!--
function myChgPic(myPicURL,myImgTagName){
document.images[myImgTagName].src = myPicURL;
}
// --></SCRIPT>
<table>
<tr>
<td>
<a href="javascript:void(0)" onmouseover="myChgPic('2.jpg' , 'a')" onmouseout="myChgPic('1.jpg' , 'a')">
<IMG src="1.jpg" name="a">
</a>
</td>
</tr>
</table>
<table>
<tr>
<td>
◆ここにonmouseoverを反映させたい
</td>
</tr>
</table>

以上です。
見栄え上、テーブルを分けてしまいました。
先述の内容と異なってしまって申し訳ございません。
何卒よろしくお願いいたします。