WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:テーブル内の文字をオンマウス時に、画像と説明文をそれぞれ別々のセルに表示させたい。

0:[投稿] JS初心者 [2007/10/26 13:00 ] [環境:わからない わからない]

はじめまして。JavaScript初心者です。
独学でJavaScriptをつかいHPを作成しています。
現在、テーブル内の文字をオンマウス時に画像を表示させるところまでは上手くいったのですが、
説明文を表示させるにはどのようすればよいのか分からず、頓挫しています。

<table border="2">
<tr>
<td  colspan="4" nowrap><font size="6">↓の遺産名をポイントしてください。画像と説明文が表示されます♪</font></td>
</tr>
<tr>
<td align="center">項目</td>
<td align="center">画像</td>
<td align="center">説明文</td>
</tr>
<tr>
<td align="left" valign="top" width="10%">
<a href="JavaScript:void(0)" onMouseOver="gazou('aaa.jpg')">早朝の山頂</a><br>
<a href="JavaScript:void(0)" onMouseOver="gazou('bbb.jpg')">水蓮</a><br>
<a href="JavaScript:void(0)" onMouseOver="gazou('ccc.jpg')">氷景</a><br>
<a href="JavaScript:void(0)" onMouseOver="gazou('ddd.jpg')">夕焼け</a><br>
</td>
<td width="60%">
<img name="myimg" src="aaa.jpg" border="0" width="600" height="400">
<SCRIPT LANGUAGE="JavaScript">
<!--
function gazou(mySrc){
document.myimg.src=mySrc;
}
//-->
</SCRIPT>
</td>
<td>
*****
</td>
</tr>
</table>

*****の部分に説明文を表示させたいのですが、その方法がわかりません。
新参者ですが、どなたかご享受の程よろしくお願いします。


1:[回答] j [2007/10/26 15:40 ]

<img name="myimg" src="aaa.jpg" border="0" width="600" height="400">

<img id="myimg" src="aaa.jpg" border="0" width="600" height="400" alt="遺産画像">
alt属性は必須です。nameでなくidを使います。
<SCRIPT LANGUAGE="JavaScript"> は古い書き方なので、<script type="text/javascript">
document.myimg.src=mySrc; は
document.getElementById('myimg').src=mySrc;
そして本題。
<td> ***** </td> を
<td id="mesasge">***** </td>
メッセージは
document.getElementById('message').innerHTML=メッセージが代入されている変数;
として出力。
大体こんな方向で。


2:[質問] JS初心者 [2007/10/26 18:23 ]

jさん回答ありがとうございます。
jさんの指摘通り書き直してみました。
こんな感じでよろしいのでしょうか?

<table border="2">
<tr>
<td  colspan="4" nowrap><font size="6">↓の遺産名をポイントしてください。画像と説明文が表示されます♪</font></td>
</tr>
<tr>
<td align="center">項目</td>
<td align="center">画像</td>
<td align="center">説明文</td>
</tr>
<tr>
<td align="left" valign="top" width="10%">
<a href="JavaScript:void(0)" onMouseOver="gazou('aaa.jpg')">早朝の山頂</a><br>
<a href="JavaScript:void(0)" onMouseOver="gazou('bbb.jpg')">水蓮</a><br>
<a href="JavaScript:void(0)" onMouseOver="gazou('ccc.jpg')">氷景</a><br>
<a href="JavaScript:void(0)" onMouseOver="gazou('ddd.jpg')">夕焼け</a><br>
</td>
<td width="60%">
<img id="myimg" src="aaa.jpg" border="0" width="600" height="400" alt="遺産画像">
<script type="text/javascript">
<!--
function gazou(mySrc){
document.getElementById('myimg').src=mySrc;
}
//-->
</SCRIPT>
</td>
<td id="mesasge">*****</td>
document.getElementById('message').innerHTML=メッセージが代入されている変数;
</tr>
</table>

もしかしたら、とても初歩的な質問なのかもしれませんが、
”メッセージが代入されている変数”とどういう意味なのでしょうか?。
よろしくお願いします。


3:[回答] j [2007/10/26 21:51 ]

「大体こんな方向」です。コピペしちゃダメですよ^^;;。
ある程度ご自分で作ることができた部分のことは理解出来ていると思ったんですが。
<td id="mesasge">*****</td>
document.getElementById('message').innerHTML=メッセージが代入されている変数;
</tr>
document.(以下略)はjavascriptですからscriptタグの内側にないと...

>メッセージが代入されている変数
やはり紛らわしかったですかorz.

えと、
document.getElementById('myimg').src=mySrc;
mySrcはgazou('aaa.jpg')の引数であるaaa.jpgが代入されている変数。
document.getElementById('myimg').srcはdocumentのIdがmyimgである要素のsrc属性の値を変数mySrcの値にする。
という事は分かりますか?で、テーブルのセルに説明文を表示させたいなら
tdにid=messegeとして、その内容を変更すれば良いので
document.getElementById('message').innerHTML =
=の右側は説明文のはいった変数をかく。
表示したい説明文は分かりませんが、たとえば、
<a href="JavaScript:void(0)" onMouseOver="gazou('aaa.jpg')">早朝の山頂</a><br>
のgazouという名前の関数をgazou('aaa.jpg',"表示したい説明文")として、
function gazou(mySrc){ をfunction gazou(mySrc,message){にして、
function gazou(mySrc){}のブロックの中で
document.getElementById('message').innerHTML = message;
とする。
分かりにくいかもしれませんがなんとか解読していただけると。。。。。^^;


4:[回答] JS初心者 [2007/10/27 10:56 ]

Jさん、ご回答ありがとうございます。
何もかも、教えていただこうとは思いません。
Jさん指摘を参考にし、これから試行錯誤を行おうと思います。
また、わからないことがあれば、質問させていただきます。
その時もし、よろしければご享受の程よろしくお願いします。

回答(必須): 状態:

お名前(必須):

URL:




[戻る]