onclickで画像と文字を別々の場所に表示したいのですが...

質問

onclickで小さい画像を別の場所に大きな画像で表示することは出来たのですが、その時に別の場所に文字を表示したいのです。
（例えば：「山」の小さな画像をクリックすると大きな「山」の画像が表示されて←これはＯＫ、
その下に「富士山」の文字を表示したい←これです。）

下記のようにしています。

<script language="javascript">
<!--
function Image(img){ document.getElementById("image").src=img}
//-->
</script>
</head>
<table>
<tr>
<td><img src="sample1_small.jpg" onclick="Image('sample1.jpg')"></td>
<td><img src="sample2_small.jpg" onclick="Image('sample2.jpg')"></td>
<td><img src="sample3_small.jpg" onclick="Image('sample3.jpg')"></td>
<td><img src="sample4_small.jpg" onclick="Image('sample4.jpg')"></td>
</tr>
<tr>
<td colspan="4"><img src="sample1.jpg" name="image"></td>
</tr>
<tr>
<td>***ここに文字を表示させたいのです***</td>
</tr>
</table>

宜しくお願いします。

回答No.3

noname#30818 · ベストアンサー

<script language="javascript">
<!--
function Image(e,img){
document.getElementById("image").src=img
document.getElementById("WW").innerHTML=e.getAttribute('alt')
}
//-->
</script>
</head>
<table>
<tr>
<td><img src="sample1_small.jpg" onclick="Image(this,'sample1.jpg')" alt="富士山0"></td>
<td><img src="sample2_small.jpg" onclick="Image(this,'sample2.jpg')" alt="富士山1"></td>
<td><img src="sample3_small.jpg" onclick="Image(this,'sample3.jpg')" alt="富士山2"></td>
<td><img src="sample4_small.jpg" onclick="Image(this,'sample4.jpg')" alt="富士山3"></td>
</tr>
<tr>
<td colspan="4"><img src="sample1.jpg" name="image"></td>
</tr>
<tr>
<td id="WW">***ここに文字を表示させたいのです***</td>
</tr>
</table>

無いものは表示できないので何処かに書いてそれを参照し、表示するだけです。
参考までにスクリプトはalt属性に文字を書いてid属性値にWWを持つ要素の中に表示しようと企んでいます。

お礼

大変有難うございました。
無事に完成しそうです。
もっともっと勉強していきます。

回答No.2

MAN_MA_RUI

<td><img src="sample1_small.jpg" onclick="Image('sample1.jpg')"></td>
<td><img src="sample2_small.jpg" onclick="Image('sample2.jpg')"></td>
<td><img src="sample3_small.jpg" onclick="Image('sample3.jpg')"></td>
<td><img src="sample4_small.jpg" onclick="Image('sample4.jpg')"></td>
この方式がそのまま使えませんか？

スクリプトがfunction Image(img)となっていますから、Image('***.jpg')の***.jpgの部分が毎回スクリプトのimgに代入されるのです。
意味分かるかな？処理対象が複数あっても大丈夫なようにできてます。

お礼

ご回答有難うございます。
完成に近づきつつあります。
まだまだ勉強不足ですね(^_^;)
がんばります！！

回答No.1

noname#33813

<script language="javascript">
<!--
function Image(img){
document.getElementById("image").src=img
document.all("change_txt").innerHTML = '富士山'
}
//-->
</script>
～ 中略 ～
<td><div id="change_txt"></div></td>

こんな感じで如何でしょう。
IE6でしか動作確認していないので古いブラウザとかだと動かないと思いますが、参考例にしてくださいとういうことで。

補足

早速のご回答有難う御座います。
とりあえず「山」の画像の処理は「ＡＲＡＩ９」さんので無事出来ました。が、
画像がこの他にいくつかあります。
その場合はどの様にしたらよろしいでしょうか？
重ね重ね申し訳御座いません。