イベントパンドラ：マウスを重なると画像が変化する
簡単なJavaScriptで、ウェブサイト内に表示している画像にマウスポインタが重なったときに別の画像が表示されるように、（画像が変化するように）設定することができます。
↑画像にポインタを重ねてください。画像が変化します。
このソースは次のようになります。
<script language="JavaScript">
<!--
function changeImages(inputData) {
if ( inputData=='0' ) { document.sample.src = 'sample/flower_orange.jpg' ; }
if ( inputData=='1' ) { document.sample.src = 'sample/flower_violet.jpg' ; }
}
-->
</script>
<a href="javascript:void(0)" onMouseOver="changeImages('0')" onMouseOut="changeImages('1')">
<img src="sample/flower_violet.jpg" width="180" height="120" border="0" name="sample"></a>
<br>↑画像にポインタを重ねてください。画像が変化します。
<!--
function changeImages(inputData) {
if ( inputData=='0' ) { document.sample.src = 'sample/flower_orange.jpg' ; }
if ( inputData=='1' ) { document.sample.src = 'sample/flower_violet.jpg' ; }
}
-->
</script>
<a href="javascript:void(0)" onMouseOver="changeImages('0')" onMouseOut="changeImages('1')">
<img src="sample/flower_violet.jpg" width="180" height="120" border="0" name="sample"></a>
<br>↑画像にポインタを重ねてください。画像が変化します。
このソース中に出現するonMouseOverや、onMouseOutといった、JavaScriptを呼び出すためのユーザーの行動をイベントパンドラと呼びます。イベントパンドラには上記を含め次のようなものがあります。
- onMouseDown ：対象の上でマウスボタンを押す
- onMouseClick ：対象の上でマウスボタンをクリックする
- onMouseOver ：対象の上にマウスカーソルが重なる
- onMouseOut ：対象の上からマウスカーソルが外れる
- onChange ：対象のフォーム項目の内容が変更される
- onLoad ：対象のドキュメント・フレームが読み込み終わる
本サンプルでは、onMouseDown や、onMouseClick も使えます。
ランキングに参加中です! お役に立てたらクリックをお願いします→
コンピュータとインターネット > データ形式 > HTML > リファレンス