純粋なCSS onClick画像ズーム効果を作成する方法

CSSには擬似クラスがありません クリックイベントのターゲティング, そしてこれは 最大の問題点 フロントエンド開発者最も近い疑似クラスは ：アクティブ これは、ユーザーがマウスをその上に置いている間の要素のスタイルを設定します。.

ただし、この効果は短命です。ユーザーがマウスを放すと, ：アクティブ もう動作しません。他の方法を見つける必要があります。 CSSでクリックイベントをエミュレートする.

この記事は読者の要望に応えて執筆されたものです。 純粋なCSSでクリックイベントをターゲットにする 特定のユースケースでは, 画像ズーム.

あなたは以下の最終結果を見ることができます - のためのCSSだけの解決策 クリックで画像拡大.

CSSのみのソリューションを使用する場合

先に進む前に、イメージズームにはCSSのみの方法（イメージの寸法を変更する方法）をお勧めします。 シングル または いくつかの画像のグループ ズーム機能を使う.

のために ふさわしい ギャラリー、JavaScriptはより高い柔軟性と効率を提供します.

使用するフロントエンドのテクニック

あなたは注意を払ったので、早速見てみましょう。 3つの主なテクニック 使用します：

1. の HTMLタグ それはブラウザがすることを可能にします 画像上にリンク可能領域を作成する. もっと読む 私の以前の記事の要素.
2. の usemap の属性 タグ, 画像を画像マップに接続する.
3. の ：ターゲット CSS疑似クラス IDセレクターを使用してターゲットにされた要素を表します.

1. HTMLベースを作成する

まず、HTMLベースを作成しましょう。以下のコードで、我々は追加します ズームおよび拡大する画像 ＆ 閉じるボタンのアイコン ズームイン/ズームアウト.

ズームする画像にIDを付けることが重要です。閉じるボタンは、リンクを持つリンクにする必要があります。 href = "＃" 属性、私はポストの後半で理由を説明します.

2. CSSを追加する

最初は閉じるアイコン 表示されるべきではありません. の ポジション, マージン-, 左, そして 底 プロパティ 場所 の 展開アイコンと閉じるアイコン 画像の右上隅に配置します。.

の ポインタイベント：なし。 ルールはマウスイベントを許可します 展開アイコンを通過する そして 画像に達する.

 .img 高さ：150ピクセル;幅：200ピクセル。 background-image：url（ "Close-icon.png"）;。 background-repeat：繰り返しなし。下：418ピクセル。表示：なし。高さ：32ピクセル。左：462ピクセル。マージントップ：-32px。位置：相対;幅：32ピクセル。 bottom：125px;左余白：-32px。右マージン：16px。ポインタイベント：なし。位置：相対;  

3.画像マップを追加する

イメージマップ上で クリック可能領域 あるべき 右上隅に 拡大アイコンのすぐ下の画像のサイズとそのサイズについて。置きます 最初の要素 HTMLのタグ。次のステップで画像を地図にバインドします.

上記のコードブロックでは、 タグは リンク可能領域の形状、サイズ、およびURI イメージマップの中のために 長方形, の 形状 属性は 四角い 値、そして 4つの値 の 座標 属性は、ピクセル間の距離を表します。

1. 画像の左端とリンク領域の左端
2. 画像の上端とリンク領域の上端
3. 画像の左端とリンク領域の右端
4. 画像の上端とリンク領域の下端

の値 href 属性は 画像のハッシュ識別子 （これが画像が id）.

4.画像を画像マップにバインドします

を追加 usemap ように画像に属性 画像マップにバインドする. その価値は のハッシュ表現 名 の属性 タグ ステップ3で追加しました.

イメージマップのクリック可能領域 Expandボタンの後ろにあります. ユーザーが「拡張」ボタンをクリックすると、実際にクリックされるのはクリック可能な領域です。「拡張」ボタンを作成したことを忘れないでください。 “可哀想” とともに ポインタイベント：なし。 ステップ2のルール.

このようにしてユーザー 画像自体をターゲットにします それをクリックすることによって、そしてクリックの後にURIには接尾辞が付きます。 "＃img1" フラグメント識別子.

5.スタイル ：ターゲット 疑似クラス

まで "＃img1" フラグメントIDはURIの最後にあり、ターゲットのイメージは次のようになります。 とスタイル ：ターゲット 疑似クラス

ターゲット画像の寸法が大きくなり、閉じるボタンが表示され、拡大ボタンが非表示になります.

 .img：target height：450px;幅：500ピクセル。  .img：target + .close display：block;;  .img：target + .close + .expand display：none;  

閉じるボタンのしくみ

背景画像として[閉じる]ボタンが追加されたので（手順2）、実際には でタグ付けする href =＃ 属性（ステップ1）をクリックすると、URIの末尾からフラグメント識別子が削除されます。だからそれも を削除します ：ターゲット 疑似クラス 画像から、そして画像から 前のサイズに戻る.

背景情報：なぜ ではなく ?

これまでのところ、このCSS専用ソリューションが機能するための最も重要なことは、 を使用して画像をターゲティングする href = "＃imgid" 属性, これは、 イメージマップの代わりにタグ.

の デフォルト の値 形状 属性は 画像全体をカバーする矩形のリンク可能領域. あなたが使用した場合 代わりに、画像を覆うためにそれをコーディングしなければならないでしょう、そして同じ目的のためにwrapper要素を使う必要があるかもしれません.

それ以前のIEブラウザをサポートするには、どちらかを使用します。 の代わりに , または画像上の任意の場所をクリックして画像を拡大します（この場合、[展開]アイコンは必要ありません）。.