※この例では、クリックしたらYahooにジャンプするようになっています。
画像にマウスカーソルが接触した時に、別の画像が表示されるように設定してください。
ファイル名は js2-4.html としてください。
※この例では、クリックしたらYahooにジャンプするようになっています。
： 省略
1: <script language="JavaScript">
2: <!--
3:
4: ImgOut = new Image();
5: ImgOut.src = "button_out.gif";
6: ImgOver = new Image();
7: ImgOver.src = "button_over.gif";
8:
9: function MouseOutImg(){
10: document.Image1.src = ImgOut.src;
11: }
12:
13: function MouseOverImg(){
14: document.Image1.src = ImgOver.src;
15: }
16:
17: // -->
18: </script>： 省略
20: <a href="http://www.yahoo.co.jp/" onMouseOver="<省略>" onMouseOut="<省略>">
21: <img border="0" name="Image1" src="button_out.gif">
22: </a>
： 省略この問題では、以下の画像を使用します。
[ 右クリック ] → [ 画像を名前を付けて保存 ] などで各自保存してください。
※別の画像を使用しても構いません。
button_out.gif button_over.gif
タグにイベントハンドラ onMouseOver を追加しておくと、
そのタグの範囲にマウスカーソルが重なった時、任意のJavascriptを実行することができます。
(例)
<table onMouseOver="window.alert('何らかのメッセージ');" > ・・・・</table>
テーブル（表）にマウスが重なった時、メッセージが表示される。また、タグにイベントハンドラ onMouseOut を追加しておくと
そのタグの範囲からマウスカーソルが離れた時に、任意のJavascriptを実行することができます。
(例)
<p onMouseOut="window.alert('何らかのメッセージ');" > ・・・・</p>
段落からマウスカーソルが離れた時、メッセージが表示される。
画像タグはIMGタグ（<img src="画像ファイル名">）で表示しますが、
name 属性で名前をつけておけば、 Javascriptから画像を別のものに入れ替えることができます。
たとえば、
画像に Image1 という名前をつけた場合
<img src="画像ファイルの名前" name="Image1">
画像につけた名前の後ろに .src をつけて
document.Image1.src = "置き換えたい画像ファイルの名前";
とすると画像を入れ替えられます。
4〜7行目：
4: ImgOut = new Image();
5: ImgOut.src = "button_out.gif";
6: ImgOver = new Image();
7: ImgOver.src = "button_over.gif";
マウスカーソルが画像に触れたときや離れたときに、瞬時に表示を変えるために、あらかじめ画像をメモリに読みこんでおきます。
この処理を行わないと、最初にマウスカーソルが画像に触れた時に画像の読み込みが始まるので、
画像の切り替えが少し遅れたり、ちらついたりして、見栄えが悪くなります。
ImgOut = new Image(); で ImgOut 変数は、画像用の変数として準備されます。
そして、 ImgOut.src = "button_out.gif"; で ImgOut 変数に、実際に画像を読み込んでいます。マウスが重なった時と、離れた時用に、２つの画像をそれぞれ ImgOver と ImgOut に読み込んでいます。
9行目:
9: function MouseOutImg(){
マウスが離れた時用の関数 MouseOutImg を定義しています。13行目：
13: function MouseOverImg(){
マウスが重なった時用の関数 MouseOverImg を定義しています。
このスクリプトを使うと、
メニューにマウスカーソルが触れると 色が変わったり、
画像に触れると 拡大画像が表示されたり、
文字やアイコンに触れると ヘルプメッセージが表示される、
といった処理ができるでしょう。
