今回は、画像にマウスポインターを置くと画像が切り替わり、その後さらに数秒間ポインターを置き続けるとMP4動画やGIFアニメーションが表示されるような動的なコンテンツ表示方法について解説します。このようなインタラクティブな体験を作るために必要なHTMLとCSS、JavaScriptを使用したサンプルコードを紹介します。
1. 基本のHTML構造
まず、基本となるHTML構造を作成します。画像を表示し、その後に表示する動画やGIFアニメーションを設定します。HTMLでの基本的な構造を以下に示します。
<html>
<body>
<div class="image-container">
<img id="main-image" src="image1.jpg" alt="main image" />
<video id="video-content" width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<img id="gif-content" src="animation.gif" alt="gif animation" style="display:none;" />
</div>
</body>
</html>このHTMLコードでは、最初に表示する画像、動画、そしてGIFアニメーションを含む`div`コンテナを作成しています。動画とGIFは、初めてマウスがポインターを置いたときに表示されます。
2. CSSでのスタイリング
次に、CSSを使って基本的なスタイリングを施します。動画やGIFアニメーションは最初は非表示にしておき、後でJavaScriptを使って表示されるようにします。
.image-container {
position: relative;
display: inline-block;
}
#main-image {
width: 100%;
}
#video-content,
#gif-content {
position: absolute;
top: 0;
left: 0;
display: none;
}このCSSでは、画像が表示されるコンテナに対して`relative`な位置を設定し、動画とGIFが画像の上に重なるように`absolute`位置を設定します。最初は両方とも非表示にしています。
3. JavaScriptでのインタラクションの設定
次に、JavaScriptでマウスポインターの動作を制御します。画像にマウスポインターを置いたときに、画像を切り替え、さらにポインターを一定時間置いておくと動画またはGIFが表示されるようにします。
document.getElementById("main-image").addEventListener("mouseenter", function() {
document.getElementById("main-image").src = "image2.jpg";
});
let timer;
document.getElementById("main-image").addEventListener("mouseleave", function() {
clearTimeout(timer);
document.getElementById("video-content").style.display = "none";
document.getElementById("gif-content").style.display = "none";
});
document.getElementById("main-image").addEventListener("mouseenter", function() {
timer = setTimeout(function() {
document.getElementById("gif-content").style.display = "block";
document.getElementById("video-content").style.display = "block";
}, 3000);
});このJavaScriptコードでは、画像にマウスポインターが乗ったときに画像が切り替わり、その後さらに3秒間ポインターを置き続けると、動画とGIFが表示されるように設定しています。`mouseenter`イベントで画像を切り替え、`mouseleave`イベントで非表示にする処理を行っています。
4. まとめ
このサンプルコードを使用すれば、画像の上にマウスポインターを置くことで画像が切り替わり、その後さらにポインターを数秒置くと動画やGIFアニメーションが表示されるインタラクティブなコンテンツを作成できます。HTML、CSS、JavaScriptを組み合わせることで、シンプルに実現できるこの機能は、ウェブサイトやアプリケーションでのユーザー体験を向上させる素晴らしい方法です。
コメント