ホームページ » コーディング » 純粋なCSS onClick画像ズーム効果を作成する方法

    純粋な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のみのズームオンクリック効果を実行するか、下のデモをチェックするか、イメージマップの背後にある理論をもう少し読んでください。.

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

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

    これは本当かもしれませんが、画像に関しては、 要素がより適切です。あなたがズームしたいときにそれはさらに重要です 画像のより大きな領域をクリックすると起こります 展開アイコンだけでなく, あなたに簡単な解決策を与えます.

      

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

    このソリューションの警告についても話すために、 ポインタイベント CSSプロパティ(手順2で使用)はInternet Explorerでサポートされています バージョン11からのみ.

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