CSSとイベント

  1. イベント


    1. イベントとは

      　イベントとはマウスの移動やクリック、キーボード入力、一定時間の経過、などで起こる「出来事」のことです。先の例で利用した、「計算ボタン」を押したときの ｏｎＣｌｉｃｋ、メニューの選択で起こる onChange もこのイベントの一種です。
      　ここでは、マウスが移動したとき（onmousemove）、マウスが特定のオブジェクトの領域に入ったとき（onMouseover）、指定時間が経過したら特定の関数を呼び出す関数（setTimeout（ ））を紹介します。

    2. ＣＳＳ

      　ＣＳＳ は html で指定される コンテンツ（中身）の表示形式を決定します。そのため、多くの属性が設定されており、これをJavaスクリプトで変化させることで、動的な表示が可能になります。
      　たとえば、画像の位置情報を変化すれば、画像を動かすことができます。テキストの文字列を変化させれば、スクロール型の文字表示ができます。また、オブジェクトの（不）透明度を変化させると、背景に溶け込んだ画像を明瞭な画像に変化させることができます。
      　これらの変化を、イベントという「きっかけ」で行います。

  2. マウスの位置と透明度


    1. マウスイベント

      　HTML の記述は <DIV>タグで分割することができます。DIV タグにスタイルシートを設定することで、DIVごとに表示方法を設定することができます。以下は、lay1 のスタイルを設定しています。DIV タグは、文字と画像 を含んでいます。
      <DIV  ID="lay1"  >
<BR>
　この不透明度は変化しません。<BR>
   <IMG SRC="usagi.gif">
</DIV>

      スタイルシートは、背景を白、文字色を #606090（青みがあるくらい色）、枠からの余白を10画素、とし、先頭で不透明度を50に設定します。これは背景色を40%、DIV の内容を60%で表示します。
      <STYLE TYPE="text/css">
<!--
#lay1  { filter:alpha(opacity=60);
        background-color:white;
        color:#606090;
        width:320px;
        padding:10px;
      }
-->
</STYLE>

    2. スクリプト

      　DIVに対し、次のようなイベントを付加します。これは、マウスがこのオブジェクトの上にあるとき、setTransparent(this,100) を実行し、外れたとき setTransparent(this,50) を実行します。
       onMouseover="setTransparent(this,100)"
 onMouseout ="setTransparent(this,50)"

      　setTransparent（theLay,n） は、ヘッダ部で定義された関数で、指定されたオブジェクト（theLay）の不透明度（opacity）を n に設定します。したがって、マウスが上にあるとき、100%オブジェクトの色で、ないとき、オブジェクト60%、背景色40% で表示を行います。以下の記述では二つのオブジェクトがあり、前者はマウスにより不透明度が変化し、後者はイベントの指定がないため変化しません。
      <HTML>
<HEAD>
<TITLE>半透明処理</TITLE>

<STYLE TYPE="text/css">
<!--
#lay1  { filter:alpha(opacity=60);
        background-color:white;
        color:#606090;
        width:320px;
        padding:10px;
      }
-->
</STYLE>

<SCRIPT Language="JavaScript">
<!--
function setTransparent(theLay,n)
{
   theLay.filters["alpha"].opacity = n;
}
// -->
</SCRIPT>
</HEAD>

<BODY  BACKGROUND="bg.jpg">
<DIV ID="lay1" onMouseover="setTransparent(this,100)"
              onMouseout ="setTransparent(this,60)" >
   ■半透明処理<BR><BR>
   ここのオブジェクト上にマウスを乗せると半透明だったレイヤーが
    くっきり表示されます。<BR>
   <IMG SRC="usagi.gif">
</DIV>
<BR><BR>
<DIV  ID="lay1"  >
<BR>
　この不透明度は変化しません。<BR>
   <IMG SRC="usagi.gif">
</DIV>

</BODY>
</HTML>

      このイベントはこちらから実行できます。

  3. タイムイベントによるスクロール表示


    1. タイムイベント

      　setTimeout("<関数>",delay);　関数は実行すると delay 時間後、<関数>を呼び出すことができます。時刻に関するイベントを生成すると考えることができます。< 関数> の中で、再び、setTimeout（ ）を呼び出せば、一定時間間隔で、イベントを継続して生成できます。

    2. スタイルシート

      　#seq のIDをもつスタイルシーツは、表示する文字のスタイルを設定しています。表示フォントとそのサイズ（２０）、背景色、余白（padding）を指定しています。seq は html の記述では実体がありませんが、スクリプトでこのオブジェクトの文字列（ seq.innerText ）に文字列を設定します。

    3. スクリプト

      　関数 out1Char() は文字列処理が中心です。str.charAt(count); は文字列 str のcount 番目の文字をとりだします。
          pStr += str.charAt(count++);
      　で、取り出した文字列を pStr に追加し、count の値を１加えます。str.length は str の文字の長さを示す属性です。最後の文字を表示したら、初期化を行い、1000ミリ秒お休みします。
      　最初に、この関数を呼び出すのは、BODY部の先頭にある、onLoad イベントです。このイベントで指定した関数は、html がロードされると1回実行されます。
       <BODY onLoad="out1Char()">

      　全体のスクリプトは以下のようになります。
      <HTML>
 <HEAD>
  <TITLE>順次表示</TITLE>
  <STYLE TYPE="text/css">
   <!--
    #seq {width:250px; font-family: 'ＭＳ ゴシック'; font-size:20pt;padding:10px; background-color:#FFFFDF;}
    -->
  </STYLE>
  <SCRIPT Language="JavaScript">
    <!--
    str = "もうすぐ夏休み ";
    pStr = ""; 
    count = 0;
    
    function out1Char()  { 
     if(count < str.length ){
      pStr += str.charAt(count++);
      seq.innerText = pStr;
      delay=300;

      if(count==str.length) {//初期化
       count=0;
       seq.innerText="";
       pStr="";
       delay=1000;
      }

      setTimeout("out1Char()",delay);
     }
   }
  // -->
  </SCRIPT>
</HEAD>

 <BODY onLoad="out1Char()">
    1文字づつ文章を表示します<BR><BR>
    <DIV ID = "seq"></DIV>
  </BODY>
</HTML>

      このスクリプトは　こちら から実行できます。

  4. マウス移動イベントと画像移動


    1. マウス移動イベント

      　ウインドウの全領域でマウスが移動したとき発生するイベントは document.onmousemove で指定できます。マウスが移動したとき、 moveChar() 関数を実行するには
       document.onmousemove = moveChar;
      とします。

    2. 画像の移動

      　画像 usagi.gif に myChar のIDをつけてスタイルを定義します。スタイルで指定した、top とleft が画像の左上の位置になります。
      #myChar { position:absolute; top:100px; left:100px; }
<IMG SRC="usagi.gif" ID="myChar" >
      スクリプトで、次のように posLeft を変更すると、画像の左の座標は cx に移動します。 
      　myChar.style.posLeft= cx;

    3. マウスに近ずくキャラクタ

      　画像のスタイルを利用して画像の位置を変更することで、マウスが動くと一定距離までキャラクタが近ずくスクリプトを実験しましょう。　本体<BODY>では、スタイルを設定した画像を配置しています。ヘッダ部のスクリプトの最後で　document.onmousemove = moveChar;　により、ページ上でマウスが移動したら　movChar　を実行するよう指定しています。
      　JavaScriptの関数：moveChar()　が今回の主役です。myChar の属性を取り出し、(x,y)座標を変数　cx,cy　に保存します。次に、dist()　関数で、キャラクタとマウスの距離を計算します。3平方の定理の利用ですが、平方根の計算は省略しています。dist() の値が100のとき、実際の距離は１０になります。
      　距離が一定（ここでは10）以上のとき、キャラクタの座標を　2%　だけ、マウスの座標方向に移動します。これで、マウスの移動を検知すると、2%だけキャラクタがマウスの方に近づきます。　P * a + Q * (1-a) はPとQを　a　:　(1-a)　の割合で比例配分した値になることを思い出して下さい。

      <HTML>
<HEAD>
<TITLE>マウスに近づくキャラクタ</TITLE>
<STYLE TYPE="text/css">
<!--
#myChar { position:absolute; top:100px; left:100px; }
--></STYLE>

<SCRIPT Language="JavaScript">
<!--
function moveChar()
{
        var cx = myChar.style.posLeft;
        var cy = myChar.style.posTop;
        var dt = dist(cx,cy,event.x,event.y);
        if(dt > 100){
          cx = cx*0.98 + event.x*0.02;
          cy = cy*0.98 + event.y*0.02;
        };
        myChar.style.posLeft= cx;
        myChar.style.posTop = cy;
}

function dist(ax,ay,bx,by)//距離を計算
{
        return (ax-bx)*(ax-bx)+(ay-by)*(ay-by);
}

 document.onmousemove = moveChar;//マウス移動イベント

// -->
</SCRIPT>
</HEAD>

<BODY BGCOLOR="white">
  マウスに近づくキャラクタ<BR>
  <IMG SRC="usagi.gif" ID="myChar" >
</BODY>
</HTML>
      このスクリプトの動作は、ここから確認できます。マウスを移動したときのみ、キャラが移動しますから、マウスを急に移動すると、キャラをついてきません。

  5. 課題


    1. タイマーイベントを利用して、透明度をゆっくり変化させてください。

    2. 電光掲示板のようなスクロール表示をして下さい。

    3. マウスから逃げるキャラにしてください