JavaScriptを使って、mouseoverイベントを設定する方法などについて説明します。
実際に動くサンプルを使いつつ、以下について書いています。
・mouseoverイベントをつける方法
・mouseoverイベントでツールチップを表示する
・mouseoverイベントで画像を切り替える
mouseoverイベントとは？
mouseoverイベントは、ユーザーが要素の上にマウスを乗せたときに発生するイベントです。
例えば、画像やリンク、ボタンなどにマウスカーソルを移動させたときに、このイベントを使って特定の処理を行うことができます。
mouseoverイベントをつける方法
mouseoverイベントをHTML要素にonmouseoverでつける方法と、addEventListenerでつける方法です。
DOMにmouseoverを使ってイベントをつける
HTMLのonmouseover属性を使用して、直接イベントを設定する方法です。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>onmouseover Example</title>
</head>
<body>
<button id="myButton" onmouseover="handleMouseOver()">Hover over me</button>
<script>
function handleMouseOver() {
console.log('ボタンにマウスが乗りました');
}
</script>
</body>
</html>
HTMLの解説
buttonタグにonmouseover属性を追加しています。
これで、マウスがボタンに乗ったときに、設定した関数が実行されます。
この属性には、マウスが乗ったときに実行するようにhandleMouseOver関数を指定しています。
JavaScriptの解説
handleMouseOver関数は、ボタンにマウスが乗ったときにコンソールにメッセージを出力します。
これにより、マウスオーバーイベントが発生したことを確認できます。
動作確認
実際に動作させてみると、マウスをボタンに乗せたときに、mouseoverでhandleMouseOver関数が実行されコンソールに文字列が出力されました。
addEventListenerを使ってイベントをつける
addEventListenerメソッドを使って、イベントリスナーを設定する方法です。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>addEventListener Example</title>
</head>
<body>
<button id="myButton">Hover over me</button>
<script>
document.getElementById('myButton').addEventListener('mouseover', function() {
console.log('ボタンにマウスが乗りました');
});
</script>
</body>
</html>
HTMLの解説
buttonタグにidを設定し、要素を取得しやすくしています。
JavaScriptの解説
document.getElementById('myButton')でボタン要素を取得し、addEventListenerメソッドでmouseoverイベントを設定しています。
これで、先ほどと同様にマウスオーバーされたときに、コンソールにメッセージを出力します。
実際に確認してみると、onmouseoverを設定した時と同じように動作します。
mouseoverイベントでツールチップを表示する
mouseoverイベントを使って、マウスが要素に乗ったときにツールチップを表示する例を紹介します。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>Tooltip Example</title>
<style>
#tooltip {
display: none;
position: absolute;
background-color: #333;
color: #fff;
padding: 5px;
border-radius: 5px;
}
</style>
</head>
<body>
<button id="myButton">Hover over me</button>
<div id="tooltip">ツールチップのテキスト</div>
<script>
const button = document.getElementById('myButton');
const tooltip = document.getElementById('tooltip');
button.addEventListener('mouseover', function(event) {
tooltip.style.display = 'block';
tooltip.style.left = event.pageX + 'px';
tooltip.style.top = event.pageY + 'px';
});
button.addEventListener('mouseout', function() {
tooltip.style.display = 'none';
});
</script>
</body>
</html>
HTMLとCSSの解説
buttonタグにidを設定しています。
そして、tooltip用のdivタグを追加しています。(id="tooltip")
マウスオーバーすると、このdivタグがツールチップとして表示されます。
CSSでは、ツールチップのスタイルを設定し、初期状態では表示しないようにしています。(display: none)
JavaScriptの解説
mouseoverイベントでツールチップを表示し、マウスの位置に応じてツールチップの位置を動的に設定しています。
mouseoutイベントでツールチップを非表示にしています。
動作確認
実際に動作させてみると、ボタンにマウスを乗せるとツールチップが表示され、マウスを外すと非表示になります。
mouseoverイベントで画像を切り替える
mouseoverイベントを使って、マウスが要素に乗ったときに画像を切り替える例を紹介します。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>Image Swap Example</title>
</head>
<body>
<img id="myImage" src="image1.png" alt="Image" width="300">
<script>
const image = document.getElementById('myImage');
image.addEventListener('mouseover', function() {
image.src = 'image2.png';
});
image.addEventListener('mouseout', function() {
image.src = 'image1.png';
});
</script>
</body>
</html>
HTMLの解説
imgタグにidを設定し、初期状態の画像(image1.png)を設定しています。
JavaScriptの解説
mouseoverイベントで画像をimage1.pngからimage2.pngに変更し、mouseoutイベントで元の画像に戻しています。
動作確認
実際に動作させてみると、画像にマウスを乗せると画像が切り替わり、マウスを外すと元の画像に戻ります。
JavaScriptでmouseoverイベントを設定する方法まとめ
JavaScriptでmouseoverイベントを設定する方法について解説しました。
以下のポイントをまとめます。
・HTMLの`onmouseover`属性やJavaScriptの`addEventListener`メソッドを使って、`mouseover`イベントを設定できます。
・`mouseover`イベントを使って、ツールチップを表示したり、画像を切り替えたりすることができることをサンプルを使用して紹介しました。
コメント