オンマウスで画像と文字を同時に任意の位置に表示したい

絵を閲覧するページで以下のようにしたいです。

1.リンク文字の上にマウスを置く
2.任意の位置に『画像』とその画像の下に『文章』が同時に表示される
　（何も記載されていない位置に表示されるようにしたいです）
3.マウスを離したら最後に表示したものが消えずにそのまま

画像だけ表示は一応できましたが、
文字と同時にというのはわかりませんでした。
それと何もないところに表示するのができませんでした。
以下、作ったソースです。

<SCRIPT TYPE="text/javascript">
<!--
if (document.images) {
var img0 = new Image(); img0.src = "gallery/0.png";
var img1 = new Image(); img1.src = "gallery/1.png";
var img2 = new Image(); img2.src = "gallery/2.png";
}

function On(name) {
if (document.images) {
document.images['def'].src = eval(name + '.src');
}
}
// -->
</SCRIPT>

<!--　↓ここからBODY　-->
<Table Border="0" Cellspacing="0" align="center" Width="907" style="line-height:18px;">
<Tr><Td Valign="top">

<Table Border="0" Width="300" Cellspacing="0" style="line-height:18px;">
<Tr><Td ColSpan="2"><Font Size="2">
イラスト
</Td></Tr>
<Tr><Td Width="10">　</Td><Td><Font Size="2">
<A HREF="gallery/0.png" onMouseOver="On('img0')">作品１</A><BR>
<A HREF="gallery/1.png" onMouseOver="On('img1')">作品２</A><BR>
<A HREF="gallery/2.png" onMouseOver="On('img2')">作品３</A><BR>
</Td></Tr>
</Table>

</Td>
<Td Width="500" Valign="top">
<IMG SRC="" NAME="def">
</Td></Tr>
</Table>
<!--　↑ここまでBODY　-->

作品を追加していく形式のページなので、
なるべくシンプルなソースでお願いします。

No.1 ベストアンサー 回答者： noname#39970 回答日時： 2007/05/17 15:00

ソースみてなくてごめん。

一番手抜きなやり方は
<div id="VIEW" style="display:none;position:absolute;top:0px;left:0px"></div>
という感じのブロックをbody閉じタグの直前に配置しこの中身を
document.getElementById("VIEW").innerHTML
によって書き換える。
(位置と表示は別の方法で書き換えるけどそこは調べれば比較的すぐ出ると思う)

例
document.getElementById("VIEW").innerHTML = "<img src='gallery/0.png' />作品１";

空いている空間(表示する場所)が既に決まっているならstyleのabsoluteや位置指定は必要ない。
表示する予定の場所にブロックだけ確保しておいて同様に書き換えれば良い。

この回答へのお礼

回答ありがとうございます。
あまり知識がないのでタグをどういう風にすればわかりませんでしたが、
document.getElementByIdで調べてみたら望みのページが見つかりました。
http://www001.upp.so-net.ne.jp/oka/mouse_over16. …

お礼日時：2007/05/17 18:52

No.2 回答者： vaio09 回答日時： 2007/05/17 15:01

"onMouseOut"を使っていないようですけど、これを旨く活用すれば、onMouseOverと同じように、マウスが領域から離れたとき、任意のイベントを発生させることが出来ますよね？

あるいは、表示したい「画像」と「文字」をまとめて１つの画像ファイルにしておいて、onMouseOverでそれを表示するようにしてはどうですか？この方法は事前準備が面倒ですけど、プログラムで悩むことは、まず無くなります。

この回答へのお礼

回答ありがとうございます。
前者と後者でやろうと思えばできそうですが、
自分の理想とちょっと異なるので他の方法でやってみます。

お礼日時：2007/05/17 18:54