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