気の向くままに辿るIT/ICT/IoT
JavaScript

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

ホーム前へ次へ
マウスの状態によって処理させたい!『JavaScript編』

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

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

ホームページとは

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

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


<img src="img1" onmouseover="this.src='img2'" onmouseout="this.src='img1'" alt="">

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


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タグは有効なのでリンク先に飛ぶことは可能です。

ECMAScript ECMA-262 第5.1版ベースのJavaScript

【ECMAScript / ECMA-262 Edition 5.1 訳】

 尚、下記リンクは、多くの場合、ページ情報量の過多を回避する為、場合によって更に章、節、句ごとに、任意に細分化し、ネストしている部分があります。

旧来掲載のJavaScript

ホーム前へ次へ