クリックで画像を切り替える

2022年7月6日

みなさんこんにちは。
ケミストのWeb担当みやのです。

「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。

今回は「クリックすると切り替わる画像」を作ってみます。

参考：ONE NOTES | jQuery | animate()でフェードアウトとフェードインを繋げて動作させる方法

クリックで切り替える

まずは画像を2つ配置し、それぞれにIDを割り振ります。

<div id="one"><img src="img/dog.jpg"></div>
<div id="two"><img src="img/cat.jpg"></div>

CSSで2番目を非表示にします。

#two {
  display: none;
  opacity: 0;
}

スクリプトを記述します。

$(function() {
  $('#one').click(function() {
    $('#one').animate({
      opacity: 0
    }, 500, function() {
      $('#one').css('display', 'none');
      $('#two').css('display', 'block');
      $('#two').animate({
        opacity: 1
      }, 500);
    });
  });

  $('#two').click(function() {
    $('#two').animate({
      opacity: 0
    }, 500, function() {
      $('#two').css('display', 'none');
      $('#one').css('display', 'block');
      $('#one').animate({
        opacity: 1
      }, 500);
    });
  });

});

ラジオボタンで切り替える

先程と同様に画像を2つ用意し、IDを設定し、2番目を非表示にします。

<div id="three"><img src="img/dog.jpg"></div>
<div id="four"><img src="img/cat.jpg"></div>

#four {
  display: none;
  opacity: 0;
}

ラジオボタンを設置し、nameとIDを設定します。

<input name="animal" type="radio" id="dog" checked>犬
<input name="animal" type="radio" id="cat">猫

スクリプトを記述します。

$(function() {
  $('[name="animal"]:radio').change(function() {
    if ($('[id="dog"]').prop('checked')) {
      $('#four').animate({
        opacity: 0
      }, 500, function() {
        $('#four').css('display', 'none');
        $('#three').css('display', 'block');
        $('#three').animate({
          opacity: 1
        }, 500);
      });
    } else if ($('[id="cat"]').prop('checked')) {
      $('#three').animate({
        opacity: 0
      }, 500, function() {
        $('#three').css('display', 'none');
        $('#four').css('display', 'block');
        $('#four').animate({
          opacity: 1
        }, 500);
      });
    }
  });
});

マウスホバーで切り替える

今回の趣旨からは少し逸れますが、画像にマウスを乗せると切り替わる方法もついでに載せます。

まずは画像を2つ用意し、その2つをstackimg（名前は何でもいいです）で囲います。

2番目にactiveというクラスを付与しておきます。

<div class="stackimg">
  <img src="img/dog.jpg">
  <img src="img/cat.jpg" class="active">
</div>

CSSを設定します。

.stackimg {
  position: relative;
  cursor: pointer;
}

.stackimg .active {
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transition: .4s ease-in-out;
  transition: .4s ease-in-out;
  opacity: 0;
}

.stackimg:hover .active {
  opacity: 1;
}

まとめ

画像だけでなく、文章とか表の切り替えにも使えると思います！

3つ以上の画像を切り替えたい時はどうすればいいんだろう。