マウスクリックで画像を変えてみる:JAVAスプリクト初心者入門講座


JavaScript初心者さんの入門書です

マウスクリックで画像を変えてみる

何かをクリックしたら、何かの処理が起こる、という手法は、様々な場面で使われます。多くの場合、そのクリックする対象は、ボタンですが、JAVAスプリクトでは、画像もそのクリック対象にすることが出来ます。そして、クリックしたら、その画像を違う画像にする、というマジックのようなことも可能です。

それが、今回のサンプルです。いきなりですがまずはコードを書いてみましょう。

<script type = "text/javascript">
<!--
ImgOne = new Image();
ImgOne.src = "http://www.google.co.jp/logos/Logo_60wht.gif";
ImgTwo = new Image();
ImgTwo.src = "http://www.goo.ne.jp/img2/logo/gh_logo2.gif";
function MouseOut(){
document.ShowImg.src = ImgOne.src;
}
function MouseOn(){
document.ShowImg.src = ImgTwo.src;
}
//-->
</script>
<a href="#" onMouseOver="MouseOn()" onMouseOut="MouseOut()">
<img border="0" name="ShowImg" src="http://www.google.co.jp/logos/Logo_60wht.gif"></a>

さてこのプログラムを実行してみましょう。どうでしょうか。最初画面にはGoogleのロゴが表示され、マウスカーソルを載せるとgooのロゴに変わったと思います。

詳しく説明すると、ImgOneにはマウスカーソルが離れている時、ImgTwoにはマウスカーソルが載っているときの画像が読み込まれ、<a href>のonMouseOver、onMouseOutイベントにより、 それぞれにあった表示を行う関数を呼び出して処理をしています。

画像の変更だけではなく、onMouseOverやonMouseOutは様々な応用が利くので、是非使ってみましょう。

カテゴリー:応用編

「マウスクリックで画像を変えてみる」は参考になりましたか?

マウスクリックで画像を変えてみる:関連記事

簡単な電卓を作ってみる
JAVAスプリクトでは、なんと電卓も作ることが出来ます。その気になれば、皆さんがよく目にする数字の...

お気に入りに追加する機能を作る
皆さんは、Webページを巡回しているときに、ふと「お気に入りに追加」などというボタンをみかけたこと...

ページの移動時にメッセージを表示してみる
普通、というかほとんどのページではそうですが、ページを移動するときには、リンクをクリックすればすぐ...

おみくじを作ってみる
さて、JAVAスプリクトでおみくじを作ってみましょう。ビジターは、ページを訪れる度に、大吉から大凶...

簡単なパスワード認証
会員制サイトや、HPやブログの管理者ページでは、パスワード認証をして初めて見られるようになるという...

外部ファイルの読み込み
例えばC言語においては、関数の定義などを、外部ファイルに定義して、それをプログラム中の#inclu...

ちょっとした視覚効果
JAVAスプリクトを使って本当にちょっとした視覚効果をやってみましょう。視覚効果といっても、たいし...

プルダウンメニューの表示
リンクの多いページによっては、そのリンク先をプルダウンメニューなどを使って選ばせて、そうしてリンク...

右クリックの禁止
右クリックの禁止の設定は、画像を載せていたり、MIDIを流すようなサイト等に多いですが、そういった...

文字の解説を表示
Webサイトを見ていたときに、ふと気になった単語にマウスカーソルを当てると、その言葉の注釈のような...

時間のカウント
アップローダーからファイルをダウンロードするとき、残り何秒お待ち下さい、などという表示がでて、その...

モニタの大きさを取得
モニタの大きさを取得することは、Webページを作る上では重要なことです。たとえば、ある画像を表示さ...

ブラウザ別にメッセージを表示
InternetExplorerやFirefoxなど、皆さんが使っているブラウザのほとんどは、OS...

アラートを使った簡単なクイズ
JAVAスプリクトは、応用次第ではゲームも作ることが出来ます。今回は、ボタンとアラートを使って簡単...

ボタンを押してアラートを表示させる
皆さんは既に、ブラウザのソースに記述して、ページを開いたらそれが実行されるタイプのJAVAスクリプ...