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

何かをクリックしたら、何かの処理が起こる、という手法は、様々な場面で使われます。多くの場合、そのクリックする対象は、ボタンですが、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は様々な応用が利くので、是非使ってみましょう。

JAVAscriptは色々な事ができます。ネット上には、色々なサンプルもありますが、カレンダーを作ったり、文字の色を変化させたり、ポップアップを示したり、WEB上で電卓を作成したり色々出来ます。

もちろん、ツリーメニューやラジオボタン、プルダウンメニュー、リンクを作るなどのHTMLでも出きるような事も、スクリプトを使えば出来てしまいます。