イヌでもわかるJavaScript講座
|
イヌでもわかるJavaScript講座
|
|
Step.33 - カーソルが触れるとアイコンを変化させる
|
リンクアイコンの上にマウスカーソルを持っていくと画像を変えます。 |
| Step テーマ ● document.<NAME>.src (画像変更) |
実行例
|
リスト<a href="image.htm" onmouseover="document.myImg.src='bikkuri.gif'" onmouseout="document.myImg.src='bikkuri1.gif'"> <img border="0" name="myImg" src="bikkuri1.gif"> </a> |
| サンプルだけの HTMLは こちらへ |
説明マウスカーソルがアイコンに触れるとその画像を変更します。 ルーチンは Step.27 と同じ系統です。 <a href="image.htm" onmouseover="document.myImg.src='bikkuri.gif'" onmouseout="document.myImg.src='bikkuri1.gif'"> <img border="0" name="myImg" src="bikkuri1.gif"> </a> onmouseover は、マウスカーソルが画像の上にきたときに、指定の関数や処理を実行します。 onmouseout は、マウスカーソルが画像から離れたときに、指定の関数や処理を実行します。 <img border="0" name="myImg" src="bikkuri1.gif"> onmouseover、onmouseout イベント発生時に、<IMG>タグのNAME属性で付けた名前の画像を変更しています。 document.myImg.src = 'bikkuri.gif' document.myImg.src = 'bikkuri1.gif' <A>タグですので画像をクリックすればリンク先へ飛びます。 とくにリンクする必要が無ければ、 <img border="0" name="myImg" src="bikkuri1.gif" onMouseOver="document.myImg.src='bikkuri.gif'" onMouseOut="document.myImg.src='bikkuri1.gif'"> のように<IMG>タグだけで仕上げることができます。 ※ 古臭いブラウザ NS4 は onmouseover や onmouseout などのイベントは <IMG>タグでは使えません。 参考ステップ Step.27 ステータスバーに補足説明を表示しましょう ※ onmouseover、onmouseout Step.67 マウスカーソルが触れたら画像を変えてみましょう その２ Step.98 サムネイル画像にカーソルを合わせて拡大画像を表示してみましょう その２ Step.99 マウスカーソルが触れたら画像を変えてみましょう その3 Step.100 サムネイル画像にカーソルを合わせて拡大画像を表示してみましょう その3
"bikkuri.gif" Copyright (C) K.K. All rights reserved. Intermezzo http://www1.linkclub.or.jp/~medaka34/ | ||||||
 |
