オンマウスでの写真表示

質問

いつも的確な回答をいただいて、非常に感謝しております。

今、HPを作成しているのですがテーブルを左右（左を大きく、右を６つくらい）に分けて
右にはいくつか写真を小さく載せてその右の写真にマウスを乗せると左に大きく表示されるようにしたいのです。

～こんなかんじ～

│￣￣│□□□
│＿＿│□□□

～～～～～～～～

検索ではビルダーを使った説明しかありません。
もし、フリーのHP作成ソフト（私が使っているのはalphaEDIT）でのやり方が乗っているサイト
無ければ、ご存知の方に教えていただきたいです。
よろしくお願いいたします。

回答No.1

is_may · ベストアンサー

一応こんなカンジでどうでしょう？
サムネイル画像は

<img src="サムネイル画像URL" onmouseover="xShow('拡大画像URL')" onmouseout="xHide()">

このような形式になっています。

<script language="javascript"><!--
function xShow(str){
document.getElementById("f").innerHTML="<img src='"+str+"'>";
}
function xHide(){
document.getElementById("f").innerHTML="&nbsp;";
}
-->
</script>
<table border="1" width="804" height="313">
<tbody>
<tr>
<td rowspan="2" width="40%" id="f" align="center">&nbsp;</td>
<td width="20%"><img src="picture1.jpg" onmouseover="xShow('picture1.jpg')" onmouseout="xHide()" width="100" height="100"></td>
<td width="20%"><img src="picture2.jpg" onmouseover="xShow('picture2.jpg')" onmouseout="xHide()" width="100" height="100"></td>
<td width="20%"><img src="picture3.jpg" onmouseover="xShow('picture3.jpg')" onmouseout="xHide()" width="100" height="100"></td>
</tr>
<tr>
<td width="20%"></td>
<td width="20%"></td>
<td width="20%"></td>
</tr>
</tbody>
</table>

お礼

回答ありがとうございます。
これはonmouseout="xHide()"には何も入れなくていいのですか？
ちなみに、何も入れなかったらできませんでした。。。

補足

お礼２

すみません。できました。
でも、onmouseout="xHide()"これは何のためにあるのですか？