純粋なCSS onClick画像ズーム効果を作成する方法
CSSには擬似クラスがありません クリックイベントのターゲティング, そしてこれは 最大の問題点 フロントエンド開発者最も近い疑似クラスは :アクティブ
これは、ユーザーがマウスをその上に置いている間の要素のスタイルを設定します。.
ただし、この効果は短命です。ユーザーがマウスを放すと, :アクティブ
もう動作しません。他の方法を見つける必要があります。 CSSでクリックイベントをエミュレートする.
この記事は読者の要望に応えて執筆されたものです。 純粋なCSSでクリックイベントをターゲットにする 特定のユースケースでは, 画像ズーム.
あなたは以下の最終結果を見ることができます - のためのCSSだけの解決策 クリックで画像拡大.
CSSのみのソリューションを使用する場合
先に進む前に、イメージズームにはCSSのみの方法(イメージの寸法を変更する方法)をお勧めします。 シングル または いくつかの画像のグループ ズーム機能を使う.
のために ふさわしい ギャラリー、JavaScriptはより高い柔軟性と効率を提供します.
使用するフロントエンドのテクニック
あなたは注意を払ったので、早速見てみましょう。 3つの主なテクニック 使用します:
- の
HTMLタグ それはブラウザがすることを可能にします 画像上にリンク可能領域を作成する. もっと読む
私の以前の記事の要素.
- の
usemap
の属性タグ, 画像を画像マップに接続する.
- の
:ターゲット
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つの値 の 座標
属性は、ピクセル間の距離を表します。
- 画像の左端とリンク領域の左端
- 画像の上端とリンク領域の上端
- 画像の左端とリンク領域の右端
- 画像の上端とリンク領域の下端
の値 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のみのズームオンクリック効果を実行するか、下のデモをチェックするか、イメージマップの背後にある理論をもう少し読んでください。.
背景情報:なぜ
ではなく
?
これまでのところ、このCSS専用ソリューションが機能するための最も重要なことは、 を使用して画像をターゲティングする href = "#imgid"
属性, これは、 イメージマップの代わりにタグ.
これは本当かもしれませんが、画像に関しては、 要素がより適切です。あなたがズームしたいときにそれはさらに重要です 画像のより大きな領域をクリックすると起こります 展開アイコンだけでなく,
あなたに簡単な解決策を与えます.
の デフォルト
の値 形状
属性は 画像全体をカバーする矩形のリンク可能領域. あなたが使用した場合 代わりに、画像を覆うためにそれをコーディングしなければならないでしょう、そして同じ目的のためにwrapper要素を使う必要があるかもしれません.
このソリューションの警告についても話すために、 ポインタイベント
CSSプロパティ(手順2で使用)はInternet Explorerでサポートされています バージョン11からのみ.
それ以前のIEブラウザをサポートするには、どちらかを使用します。 の代わりに
, または画像上の任意の場所をクリックして画像を拡大します(この場合、[展開]アイコンは必要ありません)。.