TOPページ >  クリックやマウスオーバーで表示が変化(イベントパンドラ) > イベントパンドラ:マウスを重なると画像が変化する

イベントパンドラ:マウスを重なると画像が変化する

簡単な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>↑画像にポインタを重ねてください。画像が変化します。

このソース中に出現するonMouseOverや、onMouseOutといった、JavaScriptを呼び出すためのユーザーの行動をイベントパンドラと呼びます。イベントパンドラには上記を含め次のようなものがあります。

  • onMouseDown :対象の上でマウスボタンを押す
  • onMouseClick :対象の上でマウスボタンをクリックする
  • onMouseOver :対象の上にマウスカーソルが重なる
  • onMouseOut :対象の上からマウスカーソルが外れる
  • onChange :対象のフォーム項目の内容が変更される
  • onLoad :対象のドキュメント・フレームが読み込み終わる

本サンプルでは、onMouseDown や、onMouseClick も使えます。

ランキングに参加中です! お役に立てたらクリックをお願いします→

同一カテゴリ内一覧
イベントパンドラ:マウスを重ねると説明が表示される
イベントパンドラ:マウスを重なると画像が変化する
レイヤーを使って折りたたみメニューを表示する
IEの方はこちらから当サイト ブックマークできます。
ランキング参加中!お役に立てたら クリックをお願いします。
当サイト掲載カテゴリは
Yahoo! JAPAN コンピュータとインターネット > データ形式 > HTML > リファレンス