画像をクリックまたはホバーすると、HTML で拡大されます

この記事では、ユーザーが特定の画像をクリックしたりホバーしたりしたときに、HTML 画像を拡大する方法を説明します。

画像ギャラリーのユーザーであれば、複数の画像が並び、1 つの画像にホバーするとそれが拡大されるインターフェースを見たことがあるでしょう。この記事では、ホバーまたはクリックで画像を拡大するさまざまな方法を学びます。

ホバー時に HTML 画像のサイズを変更する

ユーザーが画像にホバーしたときに、HTML と CSS を使って特定の画像を拡大できます。以下の例では、src 属性の値が異なる 5 つの img 要素を作成しています。すべての画像が同じ行にインラインで表示されます。

また、CSS スタイリングを使って各画像要素の高さと幅を設定しています：各要素に高さと幅 200px を割り当て、画像の周囲に余白を残すために各 img 要素に 10px のマージンを設定しています。

ホバー効果を追加するために CSS の :hover 疑似クラスを使用します。img:hover ブロック内では画像要素の高さと幅を 400px に設定しています。つまり、ユーザーが画像にホバーするたびに、画像は 2 倍に拡大されます。

サンプルコード：

<img src="https://pbs.twimg.com/profile_images/959568688654553089/PuZWi9tj_400x400.jpg"/>
<img src="/img/DelftStack/logo.png"/>
<img src="https://pbs.twimg.com/profile_images/959568688654553089/PuZWi9tj_400x400.jpg"/>
<img src="/img/DelftStack/logo.png"/>
<img src="/img/DelftStack/logo.png"/>

img {
    height: 200px;
    width: 200px;
    margin: 10px;
}
img:hover{
    height: 400px;
    width: 400px;
}

上記の出力では、任意の画像にホバーすると、その画像のサイズが大きくなることがわかります。

CSS の transform プロパティを使って HTML 画像を拡大することもできます。transform プロパティを使うと、拡大縮小、回転、移動など、あらゆる HTML 要素を変形でき、画像もその 1 つです。ここでは拡大縮小を適用して画像を拡大します。

以下のサンプルコードでは、img:hover ブロック内に transform: scale(2) の CSS スタイルを追加しています。これは、ユーザーが画像にホバーしたときに画像の高さと幅を 2 倍にします。transform: scale(factor) 関数は 1 つのパラメーター（倍率）を取ります：要素はその倍率で大きくなります。したがって、値 2 は画像を 2 倍に拡大します。

サンプルコード：

img:hover{
    transform:scale(2);
}

HTML と JavaScript を使って、ユーザーが画像をクリックしたときに拡大する

HTML と JavaScript を使って、ユーザーが画像をクリックしたときに画像を拡大できます。この例では、5 つの HTML 画像を作成し、各 img 要素の height と width を属性として設定しています。

JavaScript では、タグ名で全ての img 要素にアクセスし、images 変数に格納します。次に画像をループし、addEventListener メソッドで各画像にクリックハンドラーを取り付けます。このメソッドは、イベントの種類（ここでは click）と、ユーザーがその画像をクリックするたびに実行されるコールバック関数の 2 つの引数を取ります。

コールバック内では、images 配列を再びループし、クリックされた画像以外のすべての画像をリセットします — transform を scale(1) に戻し、追加のマージンを取り除きます — これにより、一度に拡大される画像は 1 つだけになります。次に、クリックされた画像の transform スタイルを this.style.transform で scale(1.3) に設定し、見栄えを良くするために 40px のマージンを与えます。

ループ変数が let で宣言されている点に注意してください：var を使うと、すべてのハンドラーがループの最終インデックス値を共有してしまい、リセットがクリックされた画像を対象外にできなくなります。

サンプルコード：

<img src="https://pbs.twimg.com/profile_images/959568688654553089/PuZWi9tj_400x400.jpg" height="200px" width="200px"/>
<img src="/img/DelftStack/logo.png" height="200px" width="200px"/>
<img src="https://pbs.twimg.com/profile_images/959568688654553089/PuZWi9tj_400x400.jpg" height="200px" width="200px"/>
<img src="/img/DelftStack/logo.png" height="200px" width="200px"/>
<img src="/img/DelftStack/logo.png" height="200px" width="200px"/>

var images = document.getElementsByTagName('img');
for (let i = 0; i < images.length; i++) {
  images[i].addEventListener('click', function() {
    for (var j = 0; j < images.length; j++) {
      if (i != j) {
        images[j].style.transform = 'scale(1)';
        images[j].style.margin = '';
      }
    }
    this.style.transform = 'scale(1.3)';
    this.style.margin = '40px';
  });
}

出力：

上記の出力では、画像をクリックするとそれが拡大し、他の画像は元のサイズに戻ることがわかります。画像にホバーしても何も起こりません。

結論

この記事では、画像を拡大する 3 つの異なる方法を学びました。最初の 2 つの方法は CSS の :hover 疑似クラスを使用します — ホバーでのクイックプレビューで十分なギャラリーに適しています — 3 つ目の方法は JavaScript の addEventListener メソッドを使用し、一度に 1 つの画像だけが拡大された状態を保つ、意図的なクリック拡大の操作に適しています。