マウスポインタによる状態遷移 / 画像切り替え JavaScript

マウスの状態によって処理させたい！『JavaScript編』

マウスポインタによる状態遷移 / 画像切り替え JavaScript

　上の「ホームページとは？」という(テキスト文字ではなく)画像にマウスのアイコンを載せてみると色が変わります。

　これは一体どのようにして行っているのでしょうか？

　これはとてもシンプルでこのようにimgタグにイベントが２つ割り当てられているだけです。

onmouseover="this.src=''"
onmouseout="this.src=''"

onmouseover
マウスが載っているかまたは、通り過ぎる時

onmouseout
マウスが離れた時

という瞬間をイベントと呼び、それぞれのタイミングで何らかの処理を実行することができるようになっていて、その仕組みは、HTML/XHTMLでイベントハンドラとして定義されており、onmouseoverやonmouseoutもイベントハンドラです。

　ここまでのJavaScriptでは、[onClick]が出てきましたが、この[onmouseover]と[onmouseout]も同様にイベントが発生するタイミングに何か処理をさせる事ができます。

　HTMLでは、イベントに割り当てられるタイミングとして他に(Windowsの場合)マウスの左ボタンが押し下げられたタイミングの[onmousedown]と(マウスの左ボタンを押してから)元に戻すタイミングの[onmouseup]、マウスが動いているというタイミングの[onmousemove]もあります。

"this.src=''"

[this]は、呼ばれた場所にあるオブジェクトでその[src]

といういずれもJavaScriptのオブジェクトです。

　ここでは、「呼ばれた場所にあるオブジェクト」というのは、イベントを設定している<img>タグの事で、[img]の[src]ですから(パス名と)画像ファイル名です。

　[onmouseover]と[onmouseout]でそれぞれ違うファイル名を指定してあるのでマウスが載っている時と離れた時で画像が入れ替わるようになっています。

　但し、JavaScriptをoffにしているブラウザでは表示されないので注意が必要です。

　これにaタグをつけたaタグとimgタグで画像を使ったリンクに、このサンプルを使うことも当然できます。

　ちなみに、この時JavaScriptがoffの場合、画像は切り替わりませんが、これも当然のことながらaタグは有効なのでリンク先に飛ぶことは可能です。