リンクに触るとポップアップメニューが現れます。項目選択してクリックするとリンク先を読み込みます。NN4/IE4,5共用で使えるクロスブラウザメニューです(Mac版IE4,5は動きません。Mac版NN4はOK)。

応用 :
項目を増やしたり書き換えるだけで簡単にオリジナルメニューが作れます。更に画像を取り替えてオリジナルメニュー作成にもチャレンジしてみましょう(^^)/。
参照 : new, Array(), Image(), function, 変数, onMouseOver, onMouseOut, document.images[], layers[], visibility,

参考 : クロスブラウザDHTMLのサンプルページ(回線をつないでください)

JavaScript Links


ダミーLinks


画像Links

<!--

/*********************************************************************
 * クロスブラウザポップアップメニュ−のためのスクリプト
 * popupmenu 0.1  1999.3.14
 * (1997.5版をクロスブラウザ化したものです)
 *
 * -------------------------------------------------------------------
 * 言語 : JavaScript
 * 対象Browser : Netscape4,6/IE4,5 (MacIE4,5除く)
 *
 * -------------------------------------------------------------------
 * /popupmenutoolホルダを適当な場所にコピーしたうえで
 * <script language="JavaScript" SRC="popupmenutool/pop.js"></script>
 * で呼び出してご利用ください。
 *
 *   書式:
 *
 *   普通のリンク(Aタグ)の中に
 *   onMouseOver="pop('メニューラベル名1=>リンク先url1;メニューラベル名2=>リンク先2url;etc=>etc;...',event,幅)"
 *   を書き加えてください。
 *
 *   引数説明:
 *
 *   ・メニューラベル名=>リンク先url
 *
 *   でメニュー1行分のセットです。
 *   これを;(セミコロン)で区切って追加した行数分のメニューが現れます。
 *
 *   ・event  の文字はおまじないだと思ってそのまま書いてください。
 *   ・幅     はメニューの幅をピクセル数で指定します(150とか200など)。
 *
 * -------------------------------------------------------------------
 * Toshirou Takahshi tato@fureai.or.jp
 * Support http://www.fureai.or.jp/~tato/JS/BOOK/INDEX.HTM
 * DHTMLcross-browser Samples
 * http://www.fureai.or.jp/~tato/DHTML/simple/contents.htm
 * 改造は自由ですがバグやブラウザのバ−ジョンアップへの対応等の
 * 情報には充分注意してご利用ください。
 *
 */

-->

<script language="JavaScript" src="popupmenutool/pop.js"></script>

<a href="../tools/link.htm"
      onMouseOver="pop('JavaScriptサンプル集=>http://www.fureai.or.jp/~tato/JS/BOOK/INDEX.HTM;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="../tools/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="../tools/link.htm"
      onMouseOver="pop('発遣門=>HAKEN.GIF;牡丹=>BOTAN.GIF;かわら=>KAWARA.GIF',event,80)"
>画像Links</a>

これだけ(^^)v

使用した画像 : 

 popupmenutool/popon1.gif  popupmenutool/popon2.gif  popupmenutool/popon3.gif
 popupmenutool/popof1.gif  popupmenutool/popof2.gif  popupmenutool/popof3.gif
 popupmenutool/popmnb.gif
 popupmenutool/popof2end.gif

| CONTENTS
| PART1 これだけ知っていれば大丈夫
| PART2 サンプルの紹介
| PART3 JavaScript言語仕様
| PART4 JavaScriptクイック書式一覧
| PART5 JavaScriptサイト
| オンラインサポートページ(回線をつないでください)