マウスが重なったら画像を変更してみる

javascript 入門 サンプル

JavaScriptには「イベントハンドラ」というものがあります。
イベントハンドラは指定したイベント（行動）が発生したときに呼び出されるます。
たいてい「on〜〜」で始まりその後にイベント名を記述します。
まずは吟じてみたいと思います。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-31j">
<title>Insert title here</title>
</head>
<body>
マウスが重なったら画像を変更してみる<br>
<img src="Sunset.jpg" width="50%" height="50%"
	onmouseover="this.src='Winter.jpg'"
	onmouseout="this.src='Sunset.jpg'">
</body>
</html>

結果は以下です。
まず以下画面が表示されます。
20090601192846
そして、マウスをのせると
20090601192844
マウスを離します。
20090601192846

今回のキーワードは以下２点です。

  1. onmouseover・・・マウスが重なった時の処理
  2. onmouseout・・・マウスが離れた時にの処理

上記のイベントに対して
「this.src」に画像を指定します。
dame流解釈では
「this.src」＝「このsrc属性に対して」
と解釈しています。
あると思います。