プログラミング学習
当サイト使用テーマ・サーバー
＼ SWELL【WordPressテーマ】 ／
＼ レンタルサーバー【ConoHa WING】 ／
美容・脱毛
ホームページ制作
【JavaScript】ホバーで切り替わる画像
この記事では、JavaScriptでマウスホバー又はスマホの画面タップで画像が切り替わるプログラミングコードを解説します。
目次
完成形
まずは完成形を見ていきます。
メインの画像とサブの画像が３枚あります。
サブの画像をマウスでホバー又はスマホの画面をタップすると写真が切り替わります。
See the Pen js-08 by aqua (@aqua-programdiary) on CodePen.
HTMLコーディング
最初にHTMLのコーディングをしていきます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="main-container">
<img src="https://aqua-programdiary.com/wp-content/uploads/2023/08/image1.jpg" class="main">
</div>
<div class="sub-container">
<img src="https://aqua-programdiary.com/wp-content/uploads/2023/08/image1.jpg" class="sub">
<img src="https://aqua-programdiary.com/wp-content/uploads/2023/08/image2.jpg" class="sub">
<img src="https://aqua-programdiary.com/wp-content/uploads/2023/08/image3.jpg" class="sub">
</div>
</div>
<script src="main.js"></script>
</body>
</html>
<div class="container">
ページ全体のコンテナを表します。このコンテナ内にメインコンテンツとサブコンテンツが配置されます。<div class="main-container">
メインコンテンツのコンテナです。このコンテナ内にメイン画像が配置されます。<img src="https://aqua-programdiary.com/wp-content/uploads/2023/08/image1.jpg" class="main">
メインコンテンツ内に表示されるメイン画像を表します。mainクラスが指定されているため、CSSスタイルを適用する際に使用される可能性があります。<div class="sub-container">
サブコンテンツのコンテナです。このコンテナ内に複数のサブ画像が配置されます。<img src="https://aqua-programdiary.com/wp-content/uploads/2023/08/image1.jpg" class="sub">
サブコンテンツ内に表示される1つ目のサブ画像を表します。subクラスが指定されているため、CSSスタイルを適用する際に使用される可能性があります。- 同様に、2番目と3番目のサブ画像も
<img>タグで表現されています。 <script src="main.js"></script>:main.jsというJavaScriptファイルが読み込まれるスクリプト要素です。このファイルに記述されたJavaScriptコードが実行されます。
CSSコーディング
次にCSSでスタイルを設定していきます。
@charset "utf-8";
img {
max-width: 100%;
}
.container {
width: 500px;
margin: 0 auto;
}
/* 500px以下の場合のスタイル */
@media screen and (max-width: 500px) {
.container {
width: 100%;
}
}
.main-container {
display: grid;
grid-template-columns: 1fr;
margin-bottom: 5px;
}
.sub-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 5px;
}
img { max-width: 100%; }
このスタイルは、すべての<img>要素の幅を最大100%に設定して、画像が親要素に収まるようにしています。.container.containerクラスを持つ要素のスタイルです。このクラスはページ全体のコンテナを表します。幅は500pxで、marginプロパティを使って水平方向に自動的に中央に配置されます。@media screen and (max-width: 500px) { ... }
このメディアクエリは、画面の幅が500px以下の場合に適用されるスタイルです。.containerの幅を100%に変更し、コンテナを画面幅に合わせてフル幅に表示します。.main-container.main-containerクラスを持つ要素のスタイルです。このクラスはメインコンテンツのコンテナを表します。display: gridを使用して、コンテンツをグリッドとして配置しています。grid-template-columns: 1fr;は、1つの列を作成し、その幅をフラクションで指定しています。margin-bottom: 5px;は下部に5pxのマージンを追加します。.sub-container.sub-containerクラスを持つ要素のスタイルです。このクラスはサブコンテンツのコンテナを表します。display: gridを使用して、コンテンツをグリッドとして配置しています。grid-template-columns: 1fr 1fr 1fr;は、3つの列を作成し、それぞれの幅を均等に分割しています。gap: 5px;はコンテンツ間の間隔を5pxに設定しています。
JavaScriptコーディング
最後にJavaScriptをコーディングして完成です。
const images=document.querySelectorAll('.sub');
const main=document.querySelector('.main');
for(let image of images){
image.addEventListener('mouseover',function(){
main.src=image.src;
});
}
const images = document.querySelectorAll('.sub');.subクラスを持つすべての要素を取得し、imagesという変数に格納します。これはサブ画像要素のリストです。const main = document.querySelector('.main');.mainクラスを持つ要素（メイン画像要素）を取得し、mainという変数に格納します。for (let image of images) { ... }imagesリスト内の各サブ画像要素に対して繰り返し処理を行います。image.addEventListener('mouseover', function() { ... });
各サブ画像要素にマウスオーバーイベントが発生したときの処理を設定します。main.src = image.src;
メイン画像のsrc属性をサブ画像のsrc属性に変更することで、メイン画像がサブ画像に切り替わります。つまり、サブ画像にマウスが乗ると、その画像がメイン画像として表示されるようになります。
リンク
リンク
リンク