ホームページに戻る

ホームページの素 ホームページ リファレンス HTML & Script Tips KANAYA440.COM

カーソルの動きに合わせて動く目/サンプル

区切り

ダウンロード

ダウンロードmove_eye.lzhダウンロードmove_eye.lzh
上記いずれかをダウンロードし解凍すると、以下のファイルが出来ます。

  • index.html
  • images/body.gif
  • images/eyeball.gif
  • images/blackeye.gif
  • js/eye.js
・・・サンプルページ
・・・画像(体)
・・・画像(目)
・・・画像(目玉)
・・・スクリプト本体

設定

<head> と </head> の間に以下を書いてデータを設定して下さい。
また <body> タグに onLoad="iniEyeMove();" を記入して下さい。
    <script language="JavaScript" type="text/JavaScript">
    <!--
    /*******************************************************
     * 画像を指定
     *======================================================
     * 画像ファイルは絶対/相対パスどちらでも可
     * 左右の目の画像は別でも可、但しサイズは同じであること
     *******************************************************/
    var iBody      = "images/body.gif";        // 体画像
    var wBody      = 75;                       // 体の幅
    var hBody      = 75;                       // 体の高さ
    var iRBlackEye = "images/blackeye.gif";    // 右黒目画像
    var iLBlackEye = "images/blackeye.gif";    // 左黒目画像
    var wBlackEye  = 7;                        // 黒目の幅
    var hBlackEye  = 7;                        // 黒目の高さ
    var iREyeBall  = "images/eyeball.gif";     // 右白目画像
    var iLEyeBall  = "images/eyeball.gif";     // 左白目画像
    var wEyeBall   = 29;                       // 白目の幅
    var hEyeBall   = 33;                       // 白目の高さ
    
    /*******************************************************
     * 位置フラグ
     *======================================================
     * 0:ブラウザ内側の中央
     * 1:ブラウザ内側左上から数値指定
     * 2:ブラウザ内側右下からの数値指定
     *******************************************************/
    var flgTop    =   0;   // 0:中央、1:上から、2:下から
    var flgLeft   =   0;   // 0:中央、1:左から、2:右から
    
    /*******************************************************
     * 体の位置指定
     *======================================================
     * ブラウザの内側からの距離をピクセルで指定
     * 位置フラグで 0 選択時はこの数値は無視されます
     *******************************************************/
    var tBody     = 10;    // 縦位置
    var lBody     = 10;    // 横位置
    
    /*******************************************************
     * 目の位置指定
     *======================================================
     * 体の画像内の位置
     *******************************************************/
    var tREyeBall =  18;   // 右白目の縦位置
    var tLEyeBall =  18;   // 左白目の縦位置
    var lREyeBall =   8;   // 右白目の横位置
    var lLEyeBall =  38;   // 左白目の横位置
    </script>
    <script language="JavaScript" src="./js/eye.js"></script>
        
スポンサード リンク
区切り