onmousemove/JavaScript

onmousemoveの使い方

　onmousemoveは、マウスカーソルが移動する度に処理を実行出来ます。

　以下は、例です。

<script>
function func1() {
    var x = document.getElementById("test-p");
    if(x.innerHTML == "★★★★★★★★★★") {
        x.innerHTML = "★";
    }
    x.innerHTML = x.innerHTML + "★";
}
</script>

<p id="test-p">★</p>
<div onmousemove="func1();">
ここでマウスを動かすと★の数が変わります。
</div>

　赤字部分は、test-pをオブジェクトとしてxから参照しています。青字部分は、test-pに★を追加しています。このため、マウスが移動するとonmousemoveにより関数func1が呼び出され、★が追加されていきます。

　緑部分は、増えすぎないように★が10個になると1個に減らしています。

　実行例は、以下の通りです。尚、分かり易いように枠を付けています。

★

　枠内でマウスを移動する度に★が増え、10個になると1個に戻ります。

画像での利用例

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

<script>
function func2() {
    var x = document.getElementById("test-img1");
    var y = document.getElementById("test-img2");
    if ( x.style.display ==  "none" ) {
        x.style.display =  "block";
        y.style.display =  "none";
    } else {
        x.style.display =  "none";
        y.style.display =  "block";
    }
}
</script>
<img src="11.png" alt="スペードA" onmousemove="func2();" id="test-img1" />
<img src="39.png" alt="ハート9" onmousemove="func2();" id="test-img2" style="display:none;" />

　11.pngはスペードAの画像で、39.pngはハート9の画像とします。

　赤字部分は、style="display:none;"のため、最初はハートの9が表示されません。onmousemoveにより、画像上でマウスが動作する度に関数test2が呼び出されます。test2の青字部分は、display:noneとblockを入れ替えています。

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

　画像上でマウスを動かす度に、スペードAとハート9の画像が入れ替わります。

サポート

・サポートするブラウザ

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

・サポートするタグ

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

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