pop()
リンクにマウスカーソルが触れるとメニューが現れるサンプルファンクションです。
スクリプトと画像一式はpopupmenutool/ホルダに収めて外部からSCRIPT SRCタグで呼び出して使います。あとは、使いたいAタグの
onmouseoverイベント内へpop()を記入し、引数としてとしてメニューラベル名、リンク先のリストとメニューの幅を指定します。
詳しくはソース内のコメントをご参照ください。
*このファンクションをコピーして<script>と</script>の間にペーストしておくだけでこの機能をクロスブラウザに利用できるようになります。
Cross-Browser のための Sample Function
Syntax :
onMouseOver="pop( ' メニューラベル名1 => リンク先url1'
[ + ';メニューラベル名2 => リンク先2url' ]
[ + ';メニューラベル名3 => リンク先3url' ]
[ + '; etc... => etc... ' ],event,幅)"
<script type="text/javascript" src="./popupmenutool/pop.js"></script>
onMouseOver="pop( ' メニューラベル名1 => リンク先url1'
+ '; メニューラベル名2 => リンク先2url'
+ '; メニューラベル名3 => リンク先3url'
+ '; etc... => etc... ',event,幅)"
Example
/*********************************************************************
* クロスブラウザポップアップメニュ−のためのスクリプト
* update 2002.4.14
* popupmenu 0.1 1999.3.14
* (1997.5版をクロスブラウザ化したものです)
*
* -------------------------------------------------------------------
* 言語 : JavaScript
* 対象Browser : Netscape4,6/e4,5,6
*
* -------------------------------------------------------------------
下記変数をscriptタグ内で指定し、
<script type="text/javascript">
<!--
var pW=128 ; //popup画像1枚の幅
var pH=16 ; //popup画像1枚の高さ
var t=2 ; //文字の上マージン
var menuStoff=20 ; //メニューラベル位置xオフセット
var toolurl='popup1/popupmenutool/' //.jsファイル等へのパス
//-->
</script>
/popupmenutoolホルダ を適当な場所にコピーしたうえで
<script type="text/javascript" src="./popupmenutool/pop.js"></script>
で呼び出してご利用ください。
書式:
普通のリンク(Aタグ)の中に
onMouseOver="pop( ' メニューラベル名1 => リンク先url1'
+ '; メニューラベル名2 => リンク先2url'
+ '; メニューラベル名3 => リンク先3url'
+ '; etc... => etc... ',event,幅)"
* を書き加えてください。
*
* 引数説明:
*
* ・メニューラベル名=>リンク先url
*
* でメニュー1行分のセットです。
* これを;(セミコロン)で区切って追加した行数分のメニューが現れます。
*
* ・event の文字はおまじないだと思ってそのまま書いてください。
* ・幅 はメニューの幅をピクセル数で指定します(150とか200など)。
*
*
* -------------------------------------------------------------------
* Toshirou Takahshi tato@fureai.or.jp
* Support http://game.gr.jp/js/
* 改造は自由ですがバグやブラウザのバ−ジョンアップへの対応等の
* 情報には充分注意してご利用ください。
*
*/
<script type="text/javascript">
<!--
var pW=128 ; //popup画像1枚の幅
var pH=16 ; //popup画像1枚の高さ
var t=2 ; //文字の上マージン
var menuStoff=20 ; //メニューラベル位置xオフセット
var toolurl='popup1/popupmenutool/' //.jsファイル等へのパス
//-->
</script>
<script type="text/javascript" src="popup1/popupmenutool/pop.js"></script>
<a href="./link.htm"
onmouseover="pop( ' JavaScriptサンプル集 => http://game.gr.jp/js/ '
+ ';DHTMLサンプル集 => http://www.fureai.or.jp/~tato/DHTML/simple/contents.htm '
+ ';NewGameWeb => http://game.gr.jp '
+ ';JavaScript実験室 => http://web01.fureai.or.jp/~tato/work/indexM.htm ',event,200)"
>JavaScript Links</a>
<br><br><br>
<a href="./link.htm"
onmouseover="pop( ' part1 => link.htm '
+ ';part2 => link.htm '
+ ';part3 => link.htm '
+ ';part4 => link.htm '
+ ';part5 => link.htm '
+ ';part6 => link.htm '
+ ';part7 => link.htm ',event,128)"
>ダミーLinks</a>
<br><br><br>
<a href="./link.htm"
onmouseover="pop( ' 発遣門 => HAKEN.GIF '
+ '; 牡丹 => BOTAN.GIF '
+ '; かわら => KAWARA.GIF ',event,80)"
>画像Links</a>