L07 ポップアップメニュー

好きな場所をクリックするとポップアップメニューが現れます。別な場所をクリックするとまたそこへメニューも移動します。項目選択してクリックするとリンク先を読み込みます。ここで使っているレイヤーの機能はNN4.0から使えます。

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

Sample





好きな場所をクリックしてみてください




Source
ソース
(コピーしてお使いください)
<HTML>
<HEAD>

<SCRIPT LANGUAGE="JavaScript1.2">
<!--

var pH=16           ;//popup画像1枚の高さ
var t=2             ;//文字の上マージン
var msg=new Array() ;//Menu上に表示される文字のための配列
var li=new Array()  ;//リンク先のための配列


/*
下記タイトルと項目名、リンク先などを書き換えればオリジナルメニューになります
*/

//Menuタイトル
msg[0]="Menu1";li[0]=""

//項目名と各リンク先
msg[1]="part1";li[1]="../../../PART1/PART1.HTM"
msg[2]="part2";li[2]="../../../PART2/PART2.HTM"
msg[3]="part3";li[3]="../../../PART3/PART3.HTM"
msg[4]="part4";li[4]="../../../PART4/PART4.HTM"

/***************************************************

**Menuタイトルを変える時は*************

  msg[0]="新しいタイトル"
  という風に書き換えます。

**リンク先は*************

  msg[1]="part1";li[1]="../../../PART1/PART1.HTM"
  の../../../PART1/PART1.HTMの部分を
  書き換えてください

**項目を増やす時は*************

  msg[4]="part4";li[4]="../../../PART4/PART4.HTM"
  の部分のあとにたとえば
  msg[5]="xx5";li[5]="../../xx.HTM"
  msg[6]="xx6";li[6]="../../xx.HTM"
  msg[7]="xx7";li[7]="../../xx.HTM"
  ....
  という風に増やします。
****************************************************/


//レイヤー書き出しここから------------------

function Laymk(){
i=0
mlen=msg.length ;//項目数のカウント

Laytag = "<LAYER NAME='A0' VISIBILITY='hide'>"

//タイトル
Laytag+= "<LAYER NAME='A1' TOP="+(t+=pH)+">"
Laytag+= "<IMG SRC='POPMNB.GIF' BORDER=0>"
Laytag+= "</LAYER>"
Laytag+= "<LAYER NAME='msgA"+i+" 'TOP="+t+" LEFT=16>"
Laytag+="<FONT SIZE=2 COLOR='ffffff'><B>"+msg[i]+"</B></FONT>"
Laytag+= "</LAYER>"

//項目構築
for(i=1;i<mlen;i++){
//画像
Laytag+= "<LAYER NAME='A"+i+"' TOP="+(t+=pH)+">"
Laytag+="<A HREF='"+li[i]+"' NAME='A'+i"
Laytag+=" onMouseOver='hanten("+i+")'"
Laytag+=" onMouseOut='modoshi("+i+")'>"
Laytag+= "<IMG SRC='POPOF0.GIF' BORDER=0>"
Laytag+= "</LAYER>"
Laytag+= "</A>"
//項目名
Laytag+= "<LAYER NAME='msgA"+i+"' TOP="+t+" LEFT=40 BELOW='A"+i+"'>"
Laytag+="<FONT SIZE=2 COLOR='green'>"+msg[i]+"</FONT>"
Laytag+= "</LAYER>"
Laytag+= "</A>"
}
Laytag+= "</LAYER>"
document.write(Laytag)
document.write("</BR>")
document.close()
}
Laymk()

//レイヤー書き出しここまで------------------

//メニュー処理ここから----------------------

   //マウスが触った時と離れている時のpopup画像を読み込む
   //この画像を取り替えればオリジナルメニューになります。
Popon=new Array();Popon[0]=new Image();Popon[0].src="POPON0.GIF"
Popof=new Array();Popof[0]=new Image();Popof[0].src="POPOF0.GIF"

  //マウスボタンクリック時の座標に従ってメニューを表示
function msev(event){
  ex=event.pageX                            ; //ページ内のx座標ピクセル
  ey=event.pageY                            ; //ページ内のy座標ピクセル
  document.layers["A0"].moveTo(ex-12,ey-18) ; //位置決め
  document.layers["A0"].visibility="show"   ; //メニューA0を表示する
}
document.onMouseDown = msev;
document.onMouseUp   = msev;

  //触った画像の反転処理
function hanten(pIndex){
document.layers["A0"].document.layers["A"+pIndex].document.images[0].src=Popon[0].src
}

  //反転処理した画像をもとに戻す処理
function modoshi(pIndex){
document.layers["A0"].document.layers["A"+pIndex].document.images[0].src=Popof[0].src
}

//メニュー処理ここまで----------------------

<!---->
</SCRIPT>

</HEAD>
<BODY>

好きな場所をクリックしてみてください

</BODY>
</HTML>
使用した画像 : 
POPOF0.GIF POPON0.GIF POPMNB.GIF

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


Maintained by
tato@fureai.or.jp works1997 Toshirou Takahashi