かんたん作成【HTML CSS JavaScript PHP CGI Perl Ruby Python .htaccess】

マウスオーバー時にメニューリストを表示(onMouseover, onMouseout, style.display)

<html>
<head>
<title>マウスオーバー時にメニューリストを表示</title>
    <script language="JavaScript">
    <!--
    function openMenu(n) {            //リストを開く
        closeMenu()            //表示中のリストを閉じる
        if(n == 1) {            //リスト1を開く
            li1.style.display = "block";
        }
        else if(n == 2) {        //リスト2を開く
            li2.style.display = "block";
        }
        else if(n == 3) {        //リスト3を開く
            li3.style.display = "block";
        }
    }
    function closeMenu() {            //リストを閉じる
        li1.style.display = "none";
        li2.style.display = "none";
        li3.style.display = "none";
    }
    //-->
    </script>
    <style type="text/css">
    <!--
    #menu    {
        margin:        10px;
        padding:    0px;
        position:    relative;
    }
    #menu1    {
        width:        600px;        /* メニュー全体の幅 */
        height:        30px;        /* メニューの高さ */
        background:    #fcc;        /* 背景色 */
        text-align:    center;        /* センタリング */
        cursor:        hand;        /* カーソルの形 */
    }
    #li1, #li2, #li3    {
        position:    absolute;
        width:        200px;        /* リストの幅 */
        background:    #fff;        /* 背景色 */
        display:    none;
    }
    #li1    {
        top:        29;        /* 表示位置 */
        left:        0;
    }
    #li2    {
        top:        29;        /* 表示位置 */
        left:        200;
    }
    #li3    {
        top:        29;        /* 表示位置 */
        left:        400;
    }
    a    {
        padding:    2px;
        width:        100%;
        height:        100%;
        text-decoration:none;        /* アンダーライン非表示 */
    }
    a:hover    {
        background:    #fc9;        /* 背景色(マウスオーバー時) */
    }
    //-->
    </style>
</head>
<body>
マウスオーバー時にメニューリストを表示<br>
<br>
<p id="menu">
<table id="menu1" border="1" bordercolor="#ff6666" cellspacing="0">
    <tr>
    <td onMouseover="openMenu(1)" onMouseout="closeMenu()">メニューリスト1</td>
    <td onMouseover="openMenu(2)" onMouseout="closeMenu()">メニューリスト2</td>
    <td onMouseover="openMenu(3)" onMouseout="closeMenu()">メニューリスト3</td>
    </tr>
</table>
<table id="li1" border="1" bordercolor="#ff6666" onMouseover="openMenu(1)" onMouseout="closeMenu()">
    <tr><td><a href="../../sample/sample1.html">リスト1-1</a></td></tr>
    <tr><td><a href="../../sample/sample2.html">リスト1-2</a></td></tr>
    <tr><td><a href="../../sample/sample3.html">リスト1-3</a></td></tr>
    <tr><td><a href="../../sample/sample1.html">リスト1-4</a></td></tr>
    <tr><td><a href="../../sample/sample2.html">リスト1-5</a></td></tr>
</table>
<table id="li2" border="1" bordercolor="#ff6666" onMouseover="openMenu(2)" onMouseout="closeMenu()">
    <tr><td><a href="../../sample/sample1.html">リスト2-1</a></td></tr>
    <tr><td><a href="../../sample/sample2.html">リスト2-2</a></td></tr>
    <tr><td><a href="../../sample/sample3.html">リスト2-3</a></td></tr>
</table>
<table id="li3" border="1" bordercolor="#ff6666" onMouseover="openMenu(3)" onMouseout="closeMenu()">
    <tr><td><a href="../../sample/sample3.html">リスト3-1</a></td></tr>
    <tr><td><a href="../../sample/sample2.html">リスト3-2</a></td></tr>
    <tr><td><a href="../../sample/sample1.html">リスト3-3</a></td></tr>
    <tr><td><a href="../../sample/sample2.html">リスト3-4</a></td></tr>
    <tr><td><a href="../../sample/sample3.html">リスト3-5</a></td></tr>
    <tr><td><a href="../../sample/sample1.html">リスト3-6</a></td></tr>
    <tr><td><a href="../../sample/sample2.html">リスト3-7</a></td></tr>
</table>
</p>
マウスカーソルが上に来るとメニューが開きます。<br>
</body>
</html>
JavaScript
Hello world ! ユーザーエージェントを表示(navigator.userAgent)
ブラウザ情報をすべて表示(navigator) 画面の解像度を表示(screen.width, screen.height)
画面の色数を表示(screen.colorDepth) リンク元URLを表示(document.referrer)
ドキュメント情報をすべて表示(document) ウインドウ情報をすべて表示(window)
ロケーション情報をすべて表示(location) 警告ダイアログにメッセージ(alert)
ステータスバーにメッセージ(status) 新しいウインドウにメッセージ(window.open)
マウスクリック時にメッセージ(onClick) マウスダウン時にメッセージ(onMousedown)
マウスアップ時にメッセージ(onMouseup) マウスオーバー時にメッセージ(onMouseover)
マウスアウト時にメッセージ(onMouseout) フォーカス移動時にメッセージ(onFocus)
フォーカスが離れた時にメッセージ(onBlur) 選択項目変更時にメッセージ(onChange)
入力欄の文字列選択時にメッセージ(onSelect) フォーム送信時にメッセージ(onSubmit)
フォームリセット時にメッセージ(onReset) 貼り付け禁止のフォーム(コピペ禁止 onPaste)
画像読み込み失敗時にメッセージ(onError) 右クリック時にメッセージ(oncontextmenu)
右クリック時にメッセージ(event.button) 別ウインドウに指定のページを開く(window.open)
ウインドウを開く(サイズ・位置・各バーの表示設定 width,height, top,left) ウインドウを指定位置に移動(moveTo)
ウインドウを上下左右に移動(moveBy) 前に表示したページに戻る(history.back, history.go, history.forward)
リダイレクト(window.location) 一定時間後に指定のページに移動(setTimeout)
一定時間ごとに再読み込み(setInterval, location.reload) アドレス統一(location.href, match, replace)
アドレス統一(複数アドレス統一) フレーム内のページへの直接アクセス時にフレームページへ転送(top.frames.length)
フレームページ内に読み込まれた場合にフレームを解除(top.location) 一定時間ごとに背景色を変える(setInterval, document.bgColor)
一定時間ごとに背景色を変える(setInterval, document.bgColor, charAt) 見るたびに背景色を変える(Math.random,document.bgColor)
背景色を選択(onChange, document.bgColor) 一定時間ごとに背景画像を変える(document.body.background)
見るたびに背景画像を変える(Math.random, document.body.background) クリックで文字サイズを変更(style.fontSize)
文字スタイル変更(color, fontWeight, fontStyle, textDecoration, fontFamily) マウスを追いかける文字(pixelLeft, pixelTop, event.x, event.y)
クリックで拡大・縮小できる画像(pixelWidth, pixelHeight) 画像の重ね合わせ順序変更(zIndex)
フェードイン画像(filters,opacity, finishOpacity) 指定範囲内を動き続ける画像(setInterval, pixelLeft, pixelTop)
ランダムに動く画像(Math.random, pixelLeft, pixelTop) キーボードの矢印キーで移動できる画像(event.keyCode)
マウスを追いかける画像(onMousemove) マウスを回りながら追いかける画像(Math.cos, Math.sin)
カーソルを自動的にフォーム入力欄に移動(focus) クリックするとテキストエリア内をすべて選択(select)
入力時にテキストエリア内の初期文字列を削除(defaultValue) テキストエリア内をクリップボードにコピー(execCommand, Copy)
テキストエリア内にクリップボードデータを貼り付け(execCommand, paste) フォーム送信時に空欄を確認(警告ダイアログ alert)
フォーム送信時に空欄を確認(確認ダイアログ confirm) フォーム送信時に空欄を確認(文字入力ダイアログ prompt)
フォームリセット時に確認メッセージ(onReset, confirm) フォーム送信時に空欄を確認・空欄の色を変更(elements, borderColor, background)
日付を表示(new Date, getFullYear, getMonth, getDate, getDay) 時刻によってメッセージを変える(getHours)
ステータスバーに時刻を表示(getHours, getMinutes, getSeconds) ステータスバーに時刻を表示(スクロール substring)
時刻を画像表示(new Image) 年月日から曜日を調べる(setFullYear, setMonth, setDate)
指定した日までの日数を表示(Date.parse) ページ滞在時間を計算(onLoad, onUnload, getTime)
カレンダー カレンダー(前月・次月へのリンク付)
JavaScriptの有効・無効を表示(noscript) クッキーの有効・無効を調べる(navigator.cookieEnabled)
訪問回数(クッキー document.cookie) フォーム入力内容をクッキーに保存(document.cookie, escape, unescape)
お気に入りに追加(window.external.AddFavorite) 小数点以下四捨五入・切り捨て・切り上げ(Math.round, Math.floor, Math.ceil)
文字列エンコード・デコード(escape, unescape) 10進数に変換(parseInt)
2進数・8進数・16進数に変換(toString) 文字列置き換え(replace)
フェードイン(setInterval, document.bgColor) イメージマップの指定箇所で説明を表示(onMouseover)
マウスオーバー時にメニューリストを表示(onMouseover, onMouseout, style.display) ステータスバーに電光掲示板風メッセージ(status, setInterval, length, substring)
電光掲示板風メーセージ表示(setInterval, length, substring) おみくじ(Math.random)
九九の勉強 ストップウォッチ
電卓 スロット
かんたん作成【HTML CSS JavaScript PHP CGI Perl Ruby Python .htaccess】