onmouseout属性 onmouseover属性

Updated 2013.09.30 / Published 2005.10.02

onmouseout属性, onmouseover属性はどちらもポインティングデバイス（pointing device）の動作によりイベントが発生するイベント属性（イベントハンドラ）です。onmouseover属性は当該要素にカーソル（ポインタ）が合わさったときに、onmouseout属性は当該要素内に入っていたカーソルが外れたときに起動するスクリプトを指定します。onmouseout属性, onmouseover属性ともにポインティングデバイスが操作できない環境では、無効なので注意してください。

onmouseover属性, onmouseout属性を組み合わせて img要素にカーソルが合わさると、それまで表示されていた画像と切り替わり、img要素からカーソルが外れると元の画像に戻るといったロールオーバー（Rollover）と呼ばれる仕組みによく利用されています。その他にもフォームのコントロール部品にマウスが合わさると背景色を変えるなど一時的にその部分を目立たせたりするのにも役立ちます。

また、onmouseover属性, onmouseout属性のように当該要素の上でのカーソル（ポインタ）の動作によりイベントを発生させる属性に、onmousemove属性があります。これらの属性をひとつの同じ要素に併せて指定している場合、イベントは onmouseover→onmousemove→onmouseout の順に発生します。なお、onmouseover属性と onmousemove属性のイベントが発生する動作は異なり、onmouseover属性は当該要素内にカーソルが入ったときに一度だけ発生し、その後要素内で動かしているだけではイベントは起こらず、要素内にカーソルを出入りさせると再びイベントが発生します。これに対して、onmousemove属性は要素内でカーソルを少しでも動かすと、その度にイベントが発生します。

バージョン

HTML4.01(S,T,F)
XHTML1.0(S,T,F)
XHTML1.1

必須

非推奨

属性値

スクリプト

onmouseout属性 onmouseover属性を指定できる要素型

A

B

C

D

E

F

H

h1-h6
hr

I

K

L

M

N

O

P

Q

R

S

T

U

V

onmouseout属性 onmouseover属性のサンプル

次のスクリプトは画像にカーソルが合わさると表示されていた画像と切り替わり、画像からカーソルが外れると元の画像に戻るロールオーバーです。

<img src="元になる画像の URI" alt="代替テキスト"
onmouseover="this .src='変更する画像の URI'"
onmouseout="this .src='元の画像の URI'">