webサイト制作の勉強|2018月2月クラスブログ

webサイト制作の勉強に関する解説ブログです。

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

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


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

今回は

  • onmouseover(ページ上の部品にマウスカーソルが乗ったとき)
  • onmouseout(ページ上の部品からマウスカーソルが外れたと)

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


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


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