背景をメニューとして利用する

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

解  説  背景をメニューとして利用するには背景画像にメニュー項目をグラフィックで作成しておきます。項目の高さと幅を同じにしておくと処理が楽になります。マウスがクリックされたら、メニュー内の座標かどうか調べます。メニュー内の画像であれば「Math.floor(クリックされたY座標 / メニュー項目の高さ)」として何番目のメニュー項目がクリックされたかを求めます。あとは指定ページに飛ばすなり関数を呼び出すなりすればできあがりです。
コード <html> <head> <title>背景をメニューとして利用する</title> <script language="JavaScript"><!-- menuNum = 4; // メニュー項目数 menuWidth = 120; // メニュー項目1つ分の横幅 menuHeight = 16; // メニュー項目1つ分の縦幅 jpURL = ["http://www.impress.co.jp","http://www.openspc2.org/", "http://www.yahoo.co.jp/","http://www.google.com/"]; function checkMenu() { x = event.x; y = event.y; if ((x > menuWidth) || (y > (menuNum*menuHeight))) return; location.href = jpURL[Math.floor(y/menuHeight)]; } // --></script> </head> <body bgproperties="fixed" background="bg.gif" leftmargin="0" topmargin="0" style="background-repeat:no-repeat" onClick="checkMenu()">      背景をメニューとして利用します。<br>     上に文字があっても問題なく利用できますし、<br>     背景画像を固定しておけば常に同じ位置に<br>     表示されるメニューとして利用できます。<br> <table border="1" width="100" height="1000"> <tr><td>.</td></tr> </table> </body> </html>

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