一回も披露したことのない豆知識

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

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

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

A 回答 (5件)

<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";

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

補足日時:2005/07/19 21:31
    • good
    • 0
この回答へのお礼

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

お礼日時:2005/09/11 22:33

下記参照


http://allabout.co.jp/career/javascript/closeup/ …
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>
    • good
    • 0
この回答へのお礼

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

お礼日時:2005/09/11 22:34

DOM対応ブラウザなら


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

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

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

ご参考になれば幸いです。
    • good
    • 0
この回答へのお礼

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

お礼日時:2005/09/11 22:30

参考URLは、適当な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
    • good
    • 0
この回答へのお礼

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

お礼日時:2005/09/11 22:29

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

この回答への補足

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


<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>


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

補足日時:2005/07/18 17:50
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


おすすめ情報