| 解 説 |
プルダウンメニューでマウスが乗ったらメニューを表示させる場合も基本的にはプルダウンメニュー（クリックタイプ）と同じです。ただし、マウスイベントを記述する部分は異なり最初から表示されている部分にはonMouseover、プルダウンで表示される部分にonMouseoutイベントを記述します。このように記述することで正しく動作させることができます。
|
| コード |
<![CDATA[
<html>
<head>
<title>プルダウンメニュー（マウスオーバータイプ）</title>
<script language="JavaScript"><!--
vType = ["hidden","visible"];
function pdMenu(mName)
{
Menu = document.all[mName].style;
Menu.visibility = vType[Menu.visibility.indexOf("hidden") + 1];
}
// --></script>
</head>
<body>
<img src="menu.gif" onMouseover="pdMenu('Menu1')"><br>
<div id="Menu1" style="visibility:hidden" onMouseout="pdMenu('Menu1')">
<a href="http://www.openspc2.org/" ><img src="sub1.gif" border="0"></a><br>
<a href="http://www.impress.co.jp/"><img src="sub2.gif" border="0"></a><br>
<a href="http://game.gr.jp/" ><img src="sub3.gif" border="0"></a><br>
</div>
</body>
</html>
]]>
|
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View! |
プルダウンメニュー（マウスオーバータイプ）