HTML TIPS
& TRICKS

ソース

CSS部分（メニューの定義）


#menu
{
    color:white;
    background-color:black;           /* 背景色の初期値 */
    font-weight:bold;
}

HTML部分（一部）


<BODY onmousemove="chColor();">                     <!-- カーソル移動イベントによってスクリプトを実行 -->
<DIV id="menu">Home　News　Links　About us</DIV>    <!-- メニューにIDを付けておく -->

スクリプト部分


function chColor()
{
    var cph = Math.floor((event.y/document.body.clientHeight)*100);
                                                //ブラウザの高さに対するカーソル位置の割合を整数値で求める。
    var bg = "rgb(" + cph + "%, " + cph + "%, " + cph + "%)";
                                                //背景色
    window.status = bg;                         //おま機能でステータスバーに表示
    menu.style.backgroundColor = bg;            //背景色を設定
}

トップページ