onmouseoverイベント（マウスオーバーイベント）とは、マウスのポインタ（カーソル）を要素の上に合わせた時のイベント。
構文
HTML
<element onmouseover="イベントハンドラ">
例
ボタン要素
<button onmouseover="イベントハンドラ">ボタン</button>
DIV要素
<div onmouseover="イベントハンドラ">DIV要素</div>
JavaScript
object.onmouseover = function(){ イベントハンドラ };
サンプル１
HTMLドキュメント上でイベントハンドラを登録するサンプル。
サンプル１の動作について
- ひまわり画像の上にマウスのポインタ（カーソル）を合わせると、ひまわり画像を「64px×64px」の大きさに拡大する。
- ひまわり画像の上にマウスのポインタ（カーソル）を外すと、ひまわり画像を「32px×32px」の大きさに縮小する。
サンプル１のソースコード
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>
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>
#sample1img {
height: 32px;
width: 32px;
}
</style>
サンプル２
JavaScript上で動的にイベントハンドラを登録するサンプル。
サンプル２の動作について
- ひまわり画像の上にマウスのポインタ（カーソル）を合わせると、ひまわり画像を「64px×64px」の大きさに拡大する。
- ひまわり画像の上にマウスのポインタ（カーソル）を外すと、ひまわり画像を「32px×32px」の大きさに縮小する。
サンプル２のソースコード
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>
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>
#sample2img {
height: 32px;
width: 32px;
}
</style>