マウスオーバーイベント
マウスはポイントする場所を選んでクリックして使うことが多いですが、クリックせずに画像や文字の上にカーソルを置いてイベントを起動する機能があります。それには’onmouseover’や’onmouseout’でイベント関数を呼び込みます。
この関数をそのまま使うと一度、マウスをかざすと1回はイベント関数を起動することができますがかざしている間、連続して動作させることは難しいです。一度は画像からカーソルを離して再度、カーソルを上に乗せることが必要です。
初期のキーボードにおいて、連続して同じコードを入力することはできませんでした。すなわち、一度、キーを離して逐一、入力しなければなりませんでした。今ではキーを長めに押しっぱなしにすれば、同じコードを入力できます。これと同じ動作にしたいと考え、あれこれ試行錯誤の末、満足を得るプログラムコードに達しましたので記録に残します。
余談ですが、マウスオーバーと同じ意味でマウスホバー(mousehover)という用語も認知されています。ホバー、ホバーリングはヘリコプターが空中で止まっているときなどに使っており、カーソルが目的物の上に乗っている様は非常に似ています。
もうひとつ、蛇足になりますが複数のブラウザで動作を試しました。インターネットエクスプローラーでの動作はカーソルがちらついて見にくいです。chrome、firefox、operaは動作が軽快でした。
動作コード
<html>
<div style="color:royalblue; font-size:20px;">マウスオーバー、マウスアウト動作例<BR></div>
<div onmouseover="tm20=setInterval(alternate, 6, 0);" onmouseout="clearInterval(tm20);" style="float:left; font-size:32px; color:red;">⇦ </div>
<div onmouseover="tm20=setInterval(alternate, 6, 1);" onmouseout="clearInterval(tm20);" style="float:left; font-size:32px; color:red;">⇨ </div>
<div style="font-size:12px; line-height:4em;"> ©TacM,2017 Ver0.02</div>
<div id="bear" style="clear:both; width:400; height:400; background-color:lightcyan; border:0px green solid;">
<img id="kuma" src="https://aidesign.lolipop.jp/wp-content/uploads/2017/10/bear-210x210.png" width="64" height="64">
</div>
<script type="text/javascript">
var w=64;
var tm20;
function alternate(diff){ //64 ～ 400
console.log("w=%d %d", w, diff);
if(diff == 0) w = (w > 64) ? --w : 64;
else w = (w < 400) ? ++w : 400;
setting(w, w);
}
function setting(w, h) {
document.getElementById( "kuma" ).width = w;
document.getElementById( "kuma" ).height = h;
}
</script>
</html>
動作例
⇨矢印の上にカーソルをかざすと熊の画像が拡大し、⇦矢印の上にカーソルをかざすと縮小します。矢印の上からカーソルを離せば、拡大・縮小は停止します。思いがけない動作になるでしょう。
ここでは64ピクセルから400ピクセルまで変化します。キーボードのオートリピーティング処理のマウス版です。参考になれば幸いです。
