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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• JavaScript
• JavaScript文法
• JavaScript設定方法
• META要素設定【JavaScript設定方法】
• BODY内に直接記述する場合【JavaScript設定方法】
• HEAD内に直接記述する場合【JavaScript設定方法】
• 外部ファイルを設定する場合【JavaScript設定方法】
• JavaScriptイベント
• JavaScript関数
• JavaScript制御構文
• escape(エスケープ)【JavaScript】
• unescape(アンエスケープ)【JavaScript】
• JavaScriptコメント方法
• JavaScript動向

• 【JavaScript】セレクトボックスでメニューを表示して選択したページへ飛びたい！
• 【JavaScript】文章をスクロールさせたい！
• 【JavaScript】アニメーションを作りたい！
• 【JavaScript】現在の時間を表示させたい！
• 【JavaScript】タイマーを使いたい！
• 【JavaScript】JavaScriptをふんだんに使ったページを作ってみる
• 【JavaScript】escape/unescape変換フォームを作りたい！
• 【JavaScript】計算フォームを作りたい！
• 【JavaScript】n進数変換フォームを作りたい！
• 【JavaScript】マウスの状態によって処理したい！

• 正引きIT用語で選んでみるメニュー
• 逆引き一覧メニュー
• ホームページ作成レベル別メニュー
• ウェブ開発レベル別メニュー