使用した画像 :
POPOF0.GIF
POPON0.GIF
POPMNB.GIF
好きな場所をクリックするとポップアップメニューが現れます。別な場所をクリックするとまたそこへメニューも移動します。項目選択してクリックするとリンク先を読み込みます。ここで使っているレイヤーの機能はNN4.0から使えます。
応用 :
項目を増やしたり書き換えるだけで簡単にオリジナルメニューが作れます。画像を取り替えたり、階層の深いメニュー作成にもチャレンジしてみましょう(^^)/。
参照 : バージョンJavaScript1.2, new, Array(), Image(), function, 変数, onMouseOver, onMouseOut, document.images[], layers[], visibility,
<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>
使用した画像 :
| CONTENTS
| PART1 これだけ知っていれば大丈夫
| PART2 サンプルの紹介
| PART3 JavaScript言語仕様
| PART4 JavaScriptクイック書式一覧
| PART5 JavaScriptサイト
| オンラインサポートページ(回線をつないでください)