マウスポインタが要素の領域内に入ったとき、領域から出た時にJavaScirptを実行するコードを紹介します。
概要
マウスポインタがHTML要素の領域に重なったとき(領域に入ったとき)、HTML要素の領域からマウスポインタが出たときにJavaScriptを実行したい場合があります。
要素の領域にマウスポインタが重なったときは、
onmouseover 属性を利用してJavaScirptを実行できます。
また、要素の領域からマウスポインタが出た場合は、
onmouseout 属性を利用してJavaScriptを実行できます。
書式
OnMouseOverの書式
<タグ onmouseover="(実行するJavaScript)" ...>
OnMouseOutの書式
<タグ onmouseout="(実行するJavaScript)" ...>
プログラム
コード
以下のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="Style.css" />
<script type="text/javascript">
function FrameOver() {
var elem = document.getElementById("TextFrame");
elem.innerHTML = "マウスポインタが枠内に入っています。";
}
function FrameOut() {
var elem = document.getElementById("TextFrame");
elem.innerHTML = "マウスポインタが枠内から出ました。";
}
</script>
</head>
<body>
<h2>OnMouseOver, OnMouseOutのデモ</h2>
<div class="Frame" onmouseover="FrameOver();" onmouseout="FrameOut();">
枠です。
</div>
<hr/>
<div id="TextFrame"></div>
</body>
</html>
.Frame {
border:1px solid #ff6a00;
width:240px;
height:64px;
}
解説
div枠にonmouseover 属性と onmouseout 属性を記述して、このdiv枠にマウスポインタが入った場合と、抜け出た場合にJavaScirptを実行します。
マウスポインタが要素の領域に入った場合には、
FrameOver()関数を呼び出します。マウスポインタが要素の領域から出た場合は
FrameOut() 関数を呼び出します。
<div class="Frame" onmouseover="FrameOver();" onmouseout="FrameOut();">
枠です。
</div>
FrameOver関数では、idが"TextFrame" の要素を取得し、要素の内部のテキストに「マウスポインタが枠内に入っています。」のメッセージを表示します。
function FrameOver() {
var elem = document.getElementById("TextFrame");
elem.innerHTML = "マウスポインタが枠内に入っています。";
}
FrameOut関数では、idが"TextFrame" の要素を取得し、要素の内部のテキストに「マウスポインタが枠内から出ました。」のメッセージを表示します。
function FrameOut() {
var elem = document.getElementById("TextFrame");
elem.innerHTML = "マウスポインタが枠から出ました。";
}
実行結果
上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
マウスポインタを移動し、オレンジ色の枠の内部に移動します。
マウスポインタが枠内に入ると、ページの下部に「マウスポインタが枠内に入っています。」のメッセージ文字列が表示されます。
枠内にマウスポインタがある間は「マウスポインタが枠内に入っています。」のメッセージ文字列が表示され続けます。
マウスポインタをオレンジの枠の外に移動すると、ページの下部の表示が「マウスポインタが枠から出ました。」の文字列に変わります。
動画での実行結果です。
マウスポインタがHTML要素の領域内に入ったときと、領域から出たときにJavaScirptを実行することができました。
このページのキーワード
- マウスポインタが要素の領域に重なったとき、領域から出た時にJSを実行する OnMouseOver, OnMouseOut イベントの利用
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
最終更新日: 2024-04-30
作成日: 2023-02-15
