マウスイベントの紹介

タグの中にonclick="関数名()"の 記述で、クリックにより実行させたい関数を指定できますが、 実は、onclick以外にさまざまなものがあります。 例えば、そのタグ要素の上にマウスが移動して入った場合や、その上でマウスが移動し場合、 そして要素の内側から外へ出た場合に実行させる記述です。
それぞれは、onmouseover、onmousemove、onmouseoutの属性に書くことになっており、 これらはマウス イベントと呼ばれます。

マウスイベント名説明
onmouseover 指定したタグの画面領域にマウスカーソルが入った時のイベント
onmousemove 指定したタグの画面領域上マウスカーソルを動かした時のイベント
onmouseout 指定したタグの画面領域からウスカーソルを出した時のイベント

下の例ではこれらを使って、マウスをボタン画像の上に移動すると赤の画像に変更します。 そしてマウスの位置に応じて画像サイズを変更し、 画像の外へマウスを移動することで元の青画像に戻ります。また、クリックするとサイズも戻ります。

次のボタンをクリックください。

上記のようなhtmlは、次のような内容になります。

<html>
<head>
	<title>test</title>
<script type="text/javascript">
<!--
function img_click(){
  document.img7.height= 50;
  document.img7.width= 65;
  alert("click");
}
function img_mouseOver(){
  document.img7.src="img/swPopRed.png";
}
function img_mouseMove(){
  document.img7.width= event.x;//マウスの横位置(the abscissa)
  document.img7.height= event.y;//マウスの縦位置(the ordinate)
}
function img_mouseOut(){
  document.img7.src="img/swPop.png";
}
// -->
</script>
</head>
<body>
<p>
次のボタンをクリックください。<br>
<img src="img/swPop.png" name="img7" onclick="img_click()"
 onmouseover="img_mouseOver()"  onmousemove="img_mouseMove()"
  onmouseout="img_mouseOut()">
</p>
</body>
</html>

このプログラムでは、(swPop.png)と、 (swPopRed.png)の画像を使っています。 そしてマウスを移動して、マウスが画像に重なった時にonmouseoverイベントのfunctionでswPopRed.pngに変更し、 マウスが画像から外れた時のonmouseoutイベントのfunctionでswPop.pngに戻しています。 また、画像の上でマウスを動かした時のonmousemoveイベントで、画像の幅と高さを変更しています。

まず、画像タグ内の、img7 に注目ください。ここで画像タグに、img7の名前をつけています。
上記において、背景が黄色の範囲でプログラムを書いています。
この色の字は、必ず書かなければならないプログラムの範囲で示しています。
そして上記では、この中に関数（かんすう：function）と呼ばれる4つの命令を作っています。

img_clickの関数は、img7の名前を付けた画像をクリックした時に実行させるため、その画像用タグの中で
onclick="img_click()"と指定しています。
このimg_click関数の中では、 document.img7.height= 50;の指定で、 その画像の高さを変更しています。 これは=の代入演算子と呼ばれる指示で、 右にある50の数値情報を、 左に書いたdocument.img7.heighへ記憶させる命令の表現です。
同様にdocument.img7.width=65;による 変更で、初期の画面サイズに戻しています。

img_mouseOverの関数は、img7の名前を付けた画像の上にマウスを移動してきて重なった時に 実行させるため、その画像用タグの中で
onmouseover="img_mouseOver()"と指定しています。
このimg_mouseOver関数の中では、 document.img7.src="img/swPopRed.png";の指定で、 その画像のファイルを変更しています。 =の代入演算子と呼ばれる指示で、右にある "img/swPopRed.png"の文字列情報を、 左に書いた document.img7.srcへ 記憶させる命令の表現です。 この実行で、赤の画像ファイルへ変更しています。

img_mouseMoveの関数は、img7の名前を付けた画像の上でマウスを移動した時に 実行させるため、その画像用タグの中で
onmousemove="img_mouseMove()"と指定しています。
このimg_mouseMove関数の中では、 document.img7.width= event.x; の指定で、画像の幅をマウスの位置情報に設定しています。（その値は、ブラウザ左端からの位置情報です。） またevent.yに縦情報が記憶されているので、その値に画像の高さを設定しています。
マウスイベントが起きた位置の情報は、event.xに横座標(the abscissa)が記憶され、 event.yに縦座標(the ordinate)が記憶されるので、 これら情報を利用してマウスが移動した毎に画像サイズを変更しているわけです。
（これは最も古くから使える表現ですが、各社ブラウザにより扱う意味が微妙に異なるようです。
得にFireFox では、eventのキーワード自体が使えないようです。） この数値は、このページで、その他の情報も含めて確認できます。 下の実験では、event.offsetXとevent.offsetYを利用しています。この情報は画像内における座標です。 違いを確認してください。

img_mouseOutの関数は、img7の名前を付けた画像の 内側から外側へマウスを移動した時に 実行させるため、その画像用タグの中で
onmouseout="img_mouseOut()"と指定しています。
このimg_mouseOut関数の中では、 document.img7.src="img/swPop.png";の指定で、 最初の青の画像に戻しています。

なお、 onclick、 onmouseover、 onmousemove、 onmouseout はイベント名と呼ばれています。
以下で色々と実験してみましょう。

←上記を実験できます。
なお、FireFoxの場合は、img_mouseMove関数内を次ように変更すると動作できます。

e = arguments.callee.caller.arguments[0];
document.img7.width = e.clientX+10;
document.img7.height= e.clientX+10;