JavaScript 画像の説明をポップアップで表示する

画像の上にマウスカーソルを合わせてください。

<!-- 宣言 -->
<script language="Javascript">
<!--
function init(){
    for(i = 0; i < PopMenu.length; i++){
        PopMenu[i].style.position = "absolute";
    }
}

function showPopup(id){
    PopMenu[id].style.visibility = "visible";
    PopMenu[id].style.left = window.event.clientX + document.documentElement.scrollLeft;
    PopMenu[id].style.top = window.event.clientY + document.documentElement.scrollTop;
}

function hidePopup(id)
{
    PopMenu[id].style.visibility = "hidden";
}
// -->
</script>

<!-- 呼び出し -->
<img src="./img/o_nenga_013.jpg"" id="0"
    onMouseOver="showPopup(id);" onMouseOut="hidePopup(id);">
<div id="PopMenu" class="info" style="visibility:hidden;">
独楽（こま）<br>紐でまわして遊びます。
</div>

<img src="./img/o_nenga_015.jpg"" id="1"
    onMouseOver="showPopup(id);" onMouseOut="hidePopup(id);">
<div id="PopMenu" class="info" style="visibility:hidden;">
鬼（おに）<br>悪い子を怒りにきます。
</div>

<img src="./img/o_nenga_016.jpg"" id="2"
    onMouseOver="showPopup(id);" onMouseOut="hidePopup(id);">
<div id="PopMenu" class="info" style="visibility:hidden;">
招き猫（まねきねこ）<br>福を招くと言われています。
</div>

初期化
各イメージのposition属性をabsoluteに設定しています。座標を絶対値で指定できるようになります。各divブロックはstyle属性でvisibility:hiddenとなっているため、画面上では隠されています。

ロールオーバー
まず、指定されたdivブロックのstyle属性をvisibility:visibleに設定します。これでdivブロックの隠し属性が解除されます。続いてdivブロックのstyle.leftとstyle.top属性にマウスカーソルの座標を設定します。これでマウスポインタの位置にポップアップのようにdivブロックを表示することができます。

ロールアウト
指定されたdivブロックのstyle属性をvisibility:hiddenに設定します。これで再びdiv属性が画面から隠されます。

メモ
ポップアップを常にマウスカーソルの位置に表示させたい場合はonMouseMove()メソッドを使用します。