onmouseoverイベント

onmouseoverイベント(マウスオーバーイベント)とは、マウスのポインタ(カーソル)を要素の上に合わせた時のイベント。

構文

HTML

<element onmouseover="イベントハンドラ">

ボタン要素
<button onmouseover="イベントハンドラ">ボタン</button>
DIV要素
<div onmouseover="イベントハンドラ">DIV要素</div>

JavaScript

object.onmouseover = function(){ イベントハンドラ };

サンプル1

HTMLドキュメント上でイベントハンドラを登録するサンプル。

サンプル1の動作について

  1. ひまわり画像の上にマウスのポインタ(カーソル)を合わせると、ひまわり画像を「64px×64px」の大きさに拡大する。
  2. ひまわり画像の上にマウスのポインタ(カーソル)を外すと、ひまわり画像を「32px×32px」の大きさに縮小する。

サンプル1のソースコード

JavaScript

<script type="text/javascript">
function sample1enlarge() {
 var $elementReference = document.getElementById( "sample1img" );
 $elementReference.style.height = "64px";
 $elementReference.style.width = "64px";
}
function sample1reduce() {
 var $elementReference = document.getElementById( "sample1img" );
 $elementReference.style.height = "32px";
 $elementReference.style.width = "32px";
}
</script>

HTML

<img id="sample1img" onmouseover="sample1enlarge();" onmouseout="sample1reduce();" src="http://alphasis.info/wp-content/uploads/2010/11/material-icon-sunflower-101121-64x64.png" />

CSS

<style>
#sample1img {
 height: 32px;
 width: 32px;
}
</style>

サンプル2

JavaScript上で動的にイベントハンドラを登録するサンプル。

サンプル2の動作について

  1. ひまわり画像の上にマウスのポインタ(カーソル)を合わせると、ひまわり画像を「64px×64px」の大きさに拡大する。
  2. ひまわり画像の上にマウスのポインタ(カーソル)を外すと、ひまわり画像を「32px×32px」の大きさに縮小する。

サンプル2のソースコード

JavaScript

<script type="text/javascript">
window.onload = function () {
 document.getElementById( "sample2img" ).onmouseover = function(){
  sample2enlarge();
 };
 document.getElementById( "sample2img" ).onmouseout = function(){
  sample2reduce();
 };
}
function sample2enlarge() {
 var $elementReference = document.getElementById( "sample2img" );
 $elementReference.style.height = "64px";
 $elementReference.style.width = "64px";
}
function sample2reduce() {
 var $elementReference = document.getElementById( "sample2img" );
 $elementReference.style.height = "32px";
 $elementReference.style.width = "32px";
}
</script>

HTML

<img id="sample2img" src="http://alphasis.info/wp-content/uploads/2010/11/material-icon-sunflower-101121-64x64.png" />

CSS

<style>
#sample2img {
 height: 32px;
 width: 32px;
}
</style>

スポンサード リンク

カテゴリー: DOM, JavaScript, イベント, マウスイベント, リファレンス パーマリンク