DHTML -2-

　それでは、マウスイベントを理解するという意味で、簡単なプログラムの紹介ということで、一般的に認知されている「OnMouseOver」「OnMouseOut」を用いたプログラムを見てみましょう。

<Html>
<Head>
  <Script Language = "Javascript">

  var img = new Array();
    img[01] = new Image();img[01].src="cg/on.gif";
    img[02] = new Image();img[02].src="cg/off.gif";

    function mouseover(){
      document.images["pwr"].src = img[1].src;
    }

    function mouseout(){
      document.images["pwr"].src = img[2].src;
    }

  </Script>
</Head>
<Body>
  <a href=# OnMouseOver="mouseover()" OnMouseOut="mouseout()">
  <Img Src="cg/off.gif" name="pwr" width=200 height=40 border=0>
  </a>

</Body>
</Html>

■動作例

OnMouseOver と OnMouseOut
　上記の例では、マウスイベントをハイパーリンクである 「 <A> ～ </A> 」で指定しています。　ここで、OnMouseOver と指定した場合、　マウスがハイパーリンク内に掛かったとき、そこに記述されている Javascript 命令が発動します。　ここでは、「 OnMouseOver = "mouseover()" 」としていますから、マウスがハイパーリンクに掛かったら、ファンクションの mouseover() が発動することになります。
　OnMouseOutは、OnMouseOverと通常セットで用いられますが、どちらか片方を用いて、１度の操作のみ画面が変わるような設計にすることも可能です。

　尚、あまり推奨する書き方ではありませんが、今回のスクリプトの場合、
　「 OnMouseOver = "document.images["pwr"].src = img[1].src;" 」
と、スクリプトをダイレクトに記入しても、Javascriptですので動作します。
　ただ、スクリプトが複数行に及ぶ場合は記述が煩雑になりますし、ハイパーリンクを複数持っていて、それらを動的に管理しようとすると、この書き方の場合は無駄が多くなります。
　function を指定することで、スクリプトそのものを内包できますし、見た目もスマートにすることが可能です。

ページの最上段へ移動します