画像をクリックまたはホバーすると、HTML で拡大されます
この記事では、ユーザーが特定の画像をクリックまたはホバーしたときに HTML 画像を拡大する方法を説明します。
画像ギャラリーのユーザーは、複数の画像が存在し、単一の画像にカーソルを合わせると拡大するユーザー インターフェイスを見たことがあるでしょう。 この記事では、ホバーまたはクリックして画像を拡大するさまざまな方法を学習します。
ホバー時の HTML 画像のサイズを変更する
ユーザーがその上にカーソルを置いたときに、HTML と CSS を使用して特定の画像を拡大できます。 以下の例では、src 属性の値が異なる 5つの img 要素を作成しています。
ここで、ユーザーはすべての画像が同じ行にインラインで表示されることを確認できます。
また、CSS スタイルを使用して、すべての画像要素の高さと幅を設定しました。 すべての要素に 200 ピクセルの高さと幅を割り当てました。
また、すべての img 要素に 10px のマージンを設定して、画像の周りにスペースを空けています。
CSS の : hover プロパティを使用してホバー効果を追加しました。 CSS の img: hover ブロック内で、画像要素の高さと幅を 400 ピクセルに設定しました。これは、ユーザーが画像にカーソルを合わせるたびに、画像が 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;
}
上記の出力では、ユーザーは、任意の画像にカーソルを合わせると、その画像のサイズが大きくなることがわかります。
また、transform CSS プロパティを使用して HTML 画像を拡大することもできます。 transform プロパティを使用すると、任意の HTML 要素を変換できます。画像はその 1つです。
これは、画像に対してスケーリング、回転、移動などを行うことができることを意味します。 ここでは、画像にスケーリングを適用して拡大します。
以下のコード例では、img:hover ブロック内に transform: scale(2) CSS スタイルを追加しています。 ユーザーが特定の画像にカーソルを合わせると、画像の高さと幅が 2 倍になります。
transform: scale(multifactor) は、multifactor という単一のパラメーターを取ります。 つまり、multifactor によって要素のサイズが大きくなります。
この場合、multifactor の値として 2 を使用したため、画像が 2 倍に拡大されます。
コード例:
img:hover{
transform:scale(2);
}
ユーザーが画像をクリックしたときに HTML と JavaScript を使用して画像を拡大する
HTML と JavaScript を使用して、ユーザーが画像をクリックしたときに画像を拡大できます。 この例では、5つの HTML 画像を作成し、height と width をすべての img 要素に属性として割り当てました。
JavaScript では、images 変数内に格納されているタグ名ですべての img 要素にアクセスしました。 その後、images 配列を繰り返し処理し、addEventListener メソッドをすべての画像に追加しました。
addEventListner メソッドは 2つの引数を取ります。 最初の引数はイベントのタイプで、もう 1つはコールバック関数です。 ここでは、click イベントを最初の引数として使用しているため、ユーザーが画像要素をクリックするたびにコールバック関数が実行されます。
element.style プロパティを使用して、img 要素のスタイルを変更できます。 ここでは、JavaScript で image[i].style.transfrom プロパティを使用して、CSS transform プロパティを画像要素に適用しています。
コールバック関数内で、images 配列を反復処理して、クリックされた画像を除く他の画像のサイズを変更します。 次に、クリックした要素の transform スタイルを scale(1.3) に変更します。
また、JavaScript を使用して見栄えを良くするために、クリックされた要素にマージンを追加しました。
コード例:
<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 (var 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)';
}
}
this.style.transform = 'scale(1.3)';
this.style.margin = '40px'
});
}
出力：
上記の出力では、ユーザーは、画像をクリックすると拡大し、他の画像が元のサイズにサイズ変更されることを確認できます。 また、画像にカーソルを合わせても効果はありません。
この記事では、画像を拡大する 3つの異なる方法を学びました。 最初の 2つのメソッドは CSS の : hover プロパティを使用し、3つ目は JavaScript の addEventListener メソッドを使用します。
