【jQuery】リンクホバー(マウスオーバー)で複数の画像を切替え表示

投稿者: | 2021年4月24日
0件のコメント
JQueryアイキャッチ画像

今回はマウスオーバー時にリンクにマウスカーソルを重ねる（hover）と画像が自動で切り替わる処理を実施してみたいと思います。

まずは下記のサンプル1～サンプル5のリンクにマウスカーソルを重ねてみてください。

 

【完成後】

サンプルリンクにマウスカーソルを重ねると画像が自動で切り替わります。

（スマホの場合はタップしかできないので不可です）

画像が表示されない場合はCtrl + F5 キー押してみてください。

 

 

 

 

 

 

それでは行ってみましょう！

 

手順

作成手順

HTMLにタグを挿入します（prependToとafter）

画像パスの配列を作成

リンクの配列を作成

hoverイベントでリンクにマウスが重なったら処理

大まかにこんな流れで完成します。

 

HTMLにタグを挿入（jQuery）

1
2
3
4
5
6
7
8
<body>
    <div class="sample">
        <div class="imgSample">
            <!--➀ここにimg srcが追加されます-->
        </div>
        <!--➁ここにリンクのlink ul liが追加されます-->
    </div>
</body>

➀後程、img srcに画像パスを挿入させるために、img src（空の）タグをimgSampleの子の先頭に挿入しておきます。（prependTo）

1
$('<img src="">').prependTo('.imgSample');

 

➁後程、liタグのリンクを挿入させるために、imgSampleの兄弟要素のすぐ後ろに.link ulタグを挿入しておきます。（after）

1
$(".imgSample").after('<div class = "link" ><ul></ul></div>');

 

このようにたったの1行でjQueryを使用すると簡単に自動でHTMLに要素を追加挿入できます。

 

画像パスの配列を作成

画像パスを5個作成して配列に格納します。

1
2
3
4
5
6
7
8
9
//画像パスを変数に格納
let png1 = "111.png";
let png2 = "222.png";
let png3 = "333.png";
let png4 = "444.png";
let png5 = "555.png";
 
//画像パスの変数を配列に格納
let srcAry = [png1, png2, png3, png4, png5];

 

リンクの配列を作成

リンクを5個作成して配列に格納します。

1
2
3
4
5
6
7
8
9
//リンクを変数に格納
let link1 = '<a href="">サンプル1</a>';
let link2 = '<a href="">サンプル2</a>';
let link3 = '<a href="">サンプル3</a>';
let link4 = '<a href="">サンプル4</a>';
let link5 = '<a href="">サンプル5</a>';
 
//リンクの変数を配列に格納
let linkAry = [link1, link2, link3, link4, link5];

 

ページロード時の表示

ページのロード時にattrメソッドを使用してimgのsrc属性に画像配列（srcAry）の画像を1つなんでもいいので表示させておきます。

1
2
//最初に画像を1個だけ表示させる
$('.imgSample > img').attr('src', srcAry[0]);

 

.link > ulの子の最後尾にappendで、linkAry（リンクの配列）をeachメソッドで繰り返し配列分、追加していきます。

1
2
3
4
5
6
//link ulの子の最後尾にリンクを追加
let i = 0;
$.each(linkAry, function() {
    $('.link > ul').append('<li>' + linkAry[i] + '</li>');
    i = i + 1;
});こ

 

まずは上記の2つの処理で、ページのロード時に画像1枚とリンクが表示されるようにしておきます。

 

ホバーイベントで画像切換え

最後にマウスがリンクの上に乗ったら画像を切り替える処理を加えていきます。

1
2
3
4
5
6
7
8
9
10
11
//link liのリンクにマウスが重なったらhoverイベント発動
$(".link li").hover(function() {
    //①ホバーしたHTMLを取得する。
    let LinkHtml = $(this).html();
 
    //②indexOf関数で配列のインデックスを取得
    let index = linkAry.indexOf(LinkHtml);
 
    //③imgSample imgのsrc属性に画像配列(srcAry)の要素（リンクのHTML）を挿入
    $('.imgSample > img').attr('src', srcAry[index]);
});

①.link liをホバーしたリンクのHTMLを取得します。

②➀で取得したhtmlを、indexOfメソッドで一致したリンクの配列（linkAry）の中から、インデックスを取得します。

③imgSample imgのsrc属性にattrメソッドで、➁で取得したインデックスを、画像パスの配列（srcAry）に設定するとリンクの画像が表示されて完成です＼(^^)／

 

全サンプルコード

コピペで即試せます(*ﾟ▽ﾟ)ﾉ

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!DOCTYPE html>
<html lang="jn">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://code.jquery.com/jquery-1.8.3.js"></script>
    <title>ホバーで画像切り替え</title>
    <style>
        .imgSample {
            float: left;
        }
 
        .link {
            float: left;
        }
 
        .link ul {
            padding-left: 0px;
            margin-top: 0px;
        }
 
        .link ul li {
            list-style: none;
            margin-left: 10px;
            display: block;
            line-height: 33px;
        }
 
        .link ul li :hover {
            color: red;
        }
    </style>
 
</head>
 
<body>
    <div class="sample">
        <div class="imgSample">
            <!--ここにimg srcが追加されます-->
        </div>
        <!--ここにリンクのlink ul liが追加されます-->
    </div>
    <script>
        //
        $(function() {
            //➀imgSampleの子の先頭のimgのsrc属性を追加
            $('<img src="">').prependTo('.imgSample');
 
            //imgSampleの子の最後尾にdiv linkを追加
            $(".imgSample").after('<div class = "link" ><ul></ul></div>');
 
            //画像パスを変数に格納
            let png1 = "111.png";
            let png2 = "222.png";
            let png3 = "333.png";
            let png4 = "444.png";
            let png5 = "555.png";
 
            //画像パスの変数を配列に格納
            let srcAry = [png1, png2, png3, png4, png5];
 
            //リンクを変数に格納
            let link1 = '<a href="">サンプル1</a>';
            let link2 = '<a href="">サンプル2</a>';
            let link3 = '<a href="">サンプル3</a>';
            let link4 = '<a href="">サンプル4</a>';
            let link5 = '<a href="">サンプル5</a>';
            //リンクの変数を配列に格納
            let linkAry = [link1, link2, link3, link4, link5];
 
            //最初に画像を1個だけ表示させる
            $('.imgSample > img').attr('src', srcAry[0]);
 
            //link ulの子の最後尾にリンクを追加
            let i = 0;
            $.each(linkAry, function() {
                $('.link > ul').append('<li>' + linkAry[i] + '</li>');
                i = i + 1;
            });
 
            //link liのリンクにマウスが重なったらhoverイベント発動
            $(".link li").hover(function() {
                //➀ホバーしたHTMLを取得する。
                let LinkHtml = $(this).html();
                //➁indexOf関数で配列のインデックスを取得
                let index = linkAry.indexOf(LinkHtml);
                //➂imgSample imgのsrc属性に画像配列(srcAry)の要素（リンクのHTML）を挿入
                $('.imgSample > img').attr('src', srcAry[index]);
            });
        });
    </script>
</body>
 
</html>

 

今回使用した画像5枚

111 222 333 444 555

【完成】

リンクにマウスを重ねると画像が切り替わります＼(^^)／

 

 

 

 

 

ブラウザでデバッグして確認すると、マウスがリンクの上に乗ったsrc属性の画像パスが自動で切り替わるのが確認できます。

src属性自動追加

まとめ

さあこれであなたなら何を作成しますか？というようなイメージをすることが大切です。

以上です。

画像切り換え関連

複数の画像を一定の時間で昇順で切り替え表示させる

複数画像を一定の秒数で重複させずにランダム切り替え表示

リンクホバーで複数の画像を切り替える

左右ボタンクリックで画像を横にスライドさせて表示

JavaScript/jQuery

JavaScript/jQuery目次