一定時間経過したら消えるポップアップメニュー

動作ブラウザ
Internet Explorer Netscape Navigator
4.0x 4.5 5.0x 5.5 6.0 4.x 6.0
Windows - × ×
Macintosh - - × ×
UNIX - - - - - × ×

解  説  ポップアップメニューはマウスがクリックされた位置をevent.x、event.yプロパティから読み出して表示するメニュー(サンプルではテーブル)の座標に入れます。一定時間経過したら消えるようにするにはタイマーを使ってメニューを消す関数を指定時間後に呼び出します。
コード <html> <head> <title>一定時間経過したら消えるポップアップメニュー</title> <style type="text/css"><!-- td { font-size:9pt; line-height:150%; background-color:#c9d9f6; } th { font-size:9pt; line-height:150%; background-color:#000000; color:#FFFFFF; } --></style> <script language="JavaScript"><!-- vType = ["hidden","visible"]; timerID = 0; function popupMenu() { clearTimeout(timerID); popMENU.style.top = event.y - 15; popMENU.style.left = event.x - 40; popMENU.style.visibility = vType[popMENU.style.visibility.indexOf("hidden") + 1]; } function autoHide() { popMENU.style.visibility = "hidden"; } // --></script> </head> <body onMousedown="popupMenu();timerID=setTimeout('autoHide()',5000);"> <table id="popMENU" style="position:absolute;top:0px;left:0px;visibility:hidden;" border="1" onMousedown="event.cancelBubble=true"> <tr><th>[[[ MENU ]]]</th></tr> <tr><td><a href="http://www.impress.co.jp/">■Impress</a></td></tr> <tr><td><a href="http://www.openspc2.org/" >■OpenSpace</a></td></tr> <tr><td><a href="http://www.yahoo.co.jp/" >■Yahoo</a></td></tr> <tr><td><a href="http://www.google.com/" >■Google</a></td></tr> </table> </body> </html>

■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!