オンマウスでの拡大画像の位置指定

質問

サムネイル画像にオンマウスした時の拡大画像の位置指定がよくわかりません。今の状態だとマウスを乗せた時に拡大画像がサムネイル画像とかぶってしまい、他のサムネイルが隠れてしまいます。できたら、拡大画像をサムネイル画像かぶらせず、左側に表示させたいのですがどう指定したらよいのでしょうか？ついでに拡大画像を右側、上、下に指定したい時の表示方法もあわせてアドバイスいただけたらありがたいです。
それと、サムネイル画像の下にちょっとしたコメントを記載したい時はどうしたら良いのでしょうか？どうかよろしくお願いします。

<script>
var src1="image01.jpg"
var src2="image1.jpg"
var src3="image02.jpg"
var src4="image2.jpg"
var src5="image03.jpg"
var src6="image3.jpg"
var src7="image04.jpg"
var src8="image4.jpg"
</script>

<p align="center">
<img
src="image01.jpg"
onmouseover="this.src=src2" onmouseout="this.src=src1">
<br>
<br>
<img src="image02.jpg"
onmouseover="this.src=src4" onmouseout="this.src=src3">
<br>
<br>
<img src="image03.jpg"
onmouseover="this.src=src6" onmouseout="this.src=src5">
<br>
<br>
<img src="image04.jpg"
onmouseover="this.src=src8" onmouseout="this.src=src7">
<br>

</p>

回答No.1

yambejp

>大画像がサムネイル画像とかぶってしまい、他のサムネイルが隠れてしまいます。

それはないでしょう。
かぶるのではなく下に押しらやらるだけで、きちんと表示はされてませんか？

>左側に表示させたいのですがどう指定したらよいのでしょうか？

センタリングしているので左側がたしかに空いてますが、結局大きな画像が
左側の余白を越えてくれば当然サムネイルにかぶってきますね。
あまりいい方法とは言えないと思います。

>ついでに拡大画像を右側、上、下に指定したい時の表示方法
実際にやるのであれば表示用のdivを作り、スタイルシートでdisplayを
hiddenしてやり、onmouseでblockに変更してやるのが妥当な方法だと思います。
上下左右すきなところに表示ができますが、結局サムネイルを隠さないという
部分がネックになります。
しかるに大きい画像が表示されても崩れないようなレイアウトを最初から
用意する必要があります。そのあたりから始められてはいかがでしょうか？

>サムネイル画像の下にちょっとしたコメントを記載したい時

上記のdivスタイルを調整すれば、コメント類も記載可能です

javascriptの部屋で一度過去の質問を検索してみてはいかがでしょうか？

補足

yamabejp様ご回答ありがとうございます。
ご指摘のとおり拡大画像は重なっていませんでした。エディタ上で確認すると拡大が大きすぎて、他のサムネイルを隠してしまったのかと思い込んでいましたがスクロールしたらありましたｗ。ですが、今の構成が3カラムでサムネイルをライトナビに設置しているため拡大画像の一部がサイドナビの右側にはみ出てしまいます。どうしたらコンテンツ側（中央寄り）に表示できるかよくわかりません。最低限このソース上どこを変更して追加すれば拡大がスムーズにいくのかできたらよろしくお願いします。