onmouseoverで文章を入れ替える

質問

サムネイルにマウスを移動させると画像が拡大表示されるようにウェブをデザインしました。
テーブルで作りました。

拡大画像の下に文章を入れたいのですが、どのように書けばいいですか？

現在、下記のようにつくっています
拡大写真の表示
<IMG src="images/album1.jpg" width="400" height="400" name="myBigImage">
拡大写真の説明
？？

マウスオーバーさせるサムネイル
<A href="javascript:void(0)" onmouseover="myChgPic('images/album1.jpg')">
<IMG src="images/salbum1.jpg" width="100" height="100">

回答No.1

kuzumiHK · ベストアンサー

こんな感じでしょうか。

<script language="JavaScript" type="text/javascript">
<!--
function myChgPic(pic,tx){
document.getElementById('hogepic').src = pic;
document.getElementById('hogetext').innerHTML = tx;
}
//-->
</script>

<IMG src="images/album1.jpg" width="400" height="400" id="hogepic">
<p id="hogetext">写真の説明(1)</p>

<a href="javascript:void(0)" onmouseover="myChgPic('images/album1.jpg','写真の説明(1)');">
<IMG src="images/salbum1.jpg" width="100" height="100">
</a>

<a href="javascript:void(0)" onmouseover="myChgPic('images/album2.jpg','写真の説明(2)');">
<IMG src="images/salbum2.jpg" width="100" height="100">
</a>

お礼

お返事遅くなりごめんなさい。
上記でできました。大変ありがとうございます。
ひとつひとつ理解しないと、今後使えないですから、勉強します。

回答No.2

ORUKA1951

スタイルシートで、:afterとattr(alt)がスマートかも、スタイルシートで行うなら、せっかくなのでtableを使った配置も見直したほうがよいかも

お礼

お返事遅くなりました。
テーブルも活用するほうがいいんですね。
ありがとうございます。