イベントハンドラによる画像置換

イベントとは？

イベントとは，ブラウザ上で発生した出来事全般のことを表します。例えばブラウザに表示された画像をマウスをクリックしたり、テキストボックスに文字を入力するといったように，閲覧者が何か操作したときにイベントが発生します。またHTMLがブラウザに読み込まれたり、別のページに移動したという現象もイベントとして認識されます。

イベントハンドラ

イベントをJavaScriptで扱うためには，予め決められているイベントハンドラという機能を使い、イベントの処理を行います。

今回は

• onmouseover（指定した要素にマウスカーソルが乗ったとき）
• onmouseout（指定した要素からマウスカーソルが外れたと）
• onclick（指定した要素をクリックした時）

の3つを使って画像置換を行います。

今回はイベントハンドラを要素内に記述していますが、Webページを作成する際は、HTMLとスクリプトは分けて記述することが推奨されているので、今後は徐々にスクリプト部分は分けて記述するようにしていきます。

またイベントを指定したその要素自身に命令をかけたい場合と、イベントを指定した要素と違うものに命令をかけたい場合の指定方法をしっかりと覚えましょう。

指定した要素自身に命令をかけたい時は「this」
違う要素に命令したい時は「名前=ID属性」

thisの場合

<img src="img/01.png" alt="" onMouseOver="this.src='img/01_h.png'" onMouseOut="this.src='img/01.png'"></li>

ID指定の場合

<img src="img/01.png" alt="" onClick="main.src='img/01_h.png'"></li>