onmouseover/JavaScript

onmouseoverの使い方

　onmouseoverは、要素内にマウスカーソルが移動した時に処理を実行出来ます。

　以下は、例です。

<div onmouseover="alert('テストです');">
ここにマウスを移動します。
</div>

　実行例は、以下の通りです。尚、分かり易いように枠を付け、広くならないよう幅も指定しています。

　要素内にマウスを移動すると、アラートが表示されます。

画像での利用例

　onmouseoverは<img>でも使えます。

<script>
function func1() {
    var x = document.getElementById("test-img");
    x.src = "11.png";
}
function func2() {
    var x = document.getElementById("test-img");
    x.src = "199.png";
}
</script>
<img src="199.png" alt="トランプ" onmouseover="func1();" onmouseout="func2();" id="test-img" />

　11.pngはスペードAの画像で、199.pngはトランプ裏の画像とします。

　最初は、トランプ裏の画像が表示されますが、赤字部分により画像内にマウスが移動した時、スペードのAに入れ替わります。青字部分は画像の外にマウスが移動した時、トランプ裏の画像に戻しています。onmouseoutは、マウスが要素外に出た時をイベントとします。

　実行例は、以下の通りです。

　画像内にマウスカーソルがある間だけ、トランプが表になってスペードのAである事が確認出来ます。

子要素との関係

　onmouseoverは、外側からマウスが移動しても子要素から移動してもイベントになります。

<script>
function func3() {
    var x = document.getElementById("test-over");
    x.style.color = "red";
}
function func4() {
    var x = document.getElementById("test-over");
    x.style.color = "black";
}
</script>

<div onmouseover="func3();" id="test-over">

1)枠内にマウスを移動させると赤になります。<br>
2)トランプ画像にマウスを移動させると黒になります。
<img src="11.png" alt="スペードA" onmouseenter="func4();">
3)再度画像の外にマウスを移動させると赤になります。

</div>

　赤字部分でマウスカーソルが枠内に移動すると、赤色に変わるようにしています。青字部分は、マウスカーソルが画像内に移動した時の処理で、黒字になるようにしています。

　上記を表示させると、以下になります。

1)枠内にマウスを移動させると赤になります。
2)トランプ画像にマウスを移動させると黒になります。 3)再度画像の外にマウスを移動させると赤になります。

　外側から枠内に移動させても赤になりますが、子要素である画像から外に移動させても赤になります。このため、外側から内側だけでなく、内側から外側への移動もイベントに出来ます。

サポート

・サポートするブラウザ

　以下は、最新バージョンでのサポート状況を示していますが、Internet ExplorerはOSによって使えるバージョンが異なるため、使えるバージョンを示しています。WindowsXPで使えるInternet Explorer8以降、全てのバージョンで使える場合は〇とします。

・サポートするタグ

　<br>や<iframe>等を除いた多くのタグでサポートされています。

「イベントハンドラ一覧」に戻る

「onmouseenterとonmouseoverの違い」