So erstellen Sie ein reines CSS-onClick Image Zoom-Effekt

CSS hat keine Pseudoklasse für Targeting von Klickereignissen, und das ist einer der größte schmerzpunkte von Front-End-Entwicklern. Die nächstliegende Pseudoklasse ist :aktiv welche Elemente ein Element für den Zeitraum darstellt, in dem ein Benutzer die Maus darüber drückt.

Dieser Effekt ist jedoch von kurzer Dauer: Sobald der Benutzer die Maus loslässt, :aktiv funktioniert nicht mehr. Wir müssen einen anderen Weg finden emulieren Sie das Click-Ereignis in CSS.

Dieser Beitrag wurde als Antwort auf die Anfrage eines Lesers verfasst und wird erklären, wie das geht Richten Sie das Click-Ereignis mit reinem CSS aus in einem bestimmten Anwendungsfall, Bildzoom.

Das Endergebnis sehen Sie unten - eine reine CSS-Lösung für Bild vergrößern bei Klick.

Verwendung der Nur-CSS-Lösung

Bevor ich fortfahre, möchte ich sagen, dass ich für das Zoomen von Bildern die CSS-only-Methode (die die Abmessungen des Bildes ändert) nur dann empfehle, wenn Sie eine Single oder ein Gruppe von wenigen Bildern um die Zoomfunktion zu haben.

Für ein richtig In einer Galerie bietet JavaScript mehr Flexibilität und Effizienz.

Front-End-Techniken, die wir verwenden

Nun, da Sie verwarnt wurden, blicken wir schnell auf die 3 Schlüsseltechniken wir werden verwenden:

1. Das HTML-Tag das erlaubt Browsern Erstellen Sie verknüpfte Bereiche über einem Bild. Lesen Sie mehr über die Element in meinem früheren Beitrag.
2. Das usemap Attribut des Etikett, damit wird das Bild mit der Imagemap verbunden.
3. Das :Ziel CSS-Pseudoklasse Dies stellt ein Element dar, das mithilfe seines ID-Selektors angesprochen wurde.

1. Erstellen Sie die HTML-Basis

Zuerst erstellen wir die HTML-Basis. Im folgenden Code fügen wir hinzu ein Bild, das vergrößert und vergrößert werden soll & Schließen Sie die Schaltflächensymbole zum Ein- und Auszoomen.

Es ist wichtig, dass im Bild eine ID angezeigt wird, die vergrößert werden soll, und die Schaltfläche Schließen muss ein Link mit der href = "#" Attribut, werde ich später in der Post erklären.

2. Fügen Sie das CSS hinzu

Anfangs das Schließen-Symbol sollte nicht angezeigt werden. Das Position, Spanne-, links, und Unterseite Eigenschaften Platz das Erweitern und Schließen Sie die Symbole wo wir wollen, dass sie sind - in der rechten oberen Ecke des Bildes.

Das Zeigerereignisse: keine; Regel erlaubt Mausereignisse durch das Erweiterungssymbol gehen und das bild erreichen.

 .img Höhe: 150px; Breite: 200px;  .close Hintergrundbild: URL ("Close-icon.png"); Hintergrundwiederholung: keine Wiederholung; unten: 418px; Anzeige: keine; Höhe: 32px; links: 462px; Rand oben: -32px; Position: relativ; Breite: 32px;  .expand bottom: 125px; Rand links: -32px; Rand rechts: 16px; Zeigerereignisse: keine; Position: relativ;  

3. Fügen Sie die Imagemap hinzu

Auf der Imagemap die klickbarer Bereich sollte sein in der rechten oberen Ecke des Bildes direkt unter dem Erweiterungssymbol und über seine Größe. Stelle das Element vor dem ersten Tag im HTML. Wir werden das Bild im nächsten Schritt an die Karte binden.

Im obigen Codeblock steht der Tag definiert die Form, Größe und URI eines verknüpfbaren Bereichs in einer Imagemap. Für ein rechteckige Form, das gestalten Attribut nimmt die Rect Wert und die vier Werte des Koordinaten Attribut repräsentiert den Abstand in Pixeln zwischen:

1. der linke Rand des Bildes und der linke Rand des Linkbereichs
2. der obere Rand des Bildes und der obere Rand des Verknüpfungsbereichs
3. der linke Rand des Bildes und der rechte Rand des Linkbereichs
4. der obere Rand des Bildes und der untere Rand des Verknüpfungsbereichs

Der Wert von href Attribut muss das sein Hash-Kennung des Bildes (Deshalb sollte das Bild eine Ich würde).

4. Binden Sie das Bild an die Imagemap

Ergänzen Sie die usemap Attribut zum Bild, um zu binden Sie es an die Imagemap. Sein Wert muss der sein Hash-Darstellung der Name Attribut des Etikett Wir haben in Schritt 3 hinzugefügt.

Der anklickbare Bereich der Imagemap jetzt liegt hinter dem Expand-Button. Wenn der Benutzer auf die Schaltfläche "Erweitern" klickt, wird in Wirklichkeit der angeklickte Bereich angeklickt. Denken Sie daran, dass wir die Schaltfläche "Erweitern" erstellt haben “passierbar” mit dem Zeigerereignisse: keine; Regel in Schritt 2.

Auf diese Weise den Benutzer zielt auf das Bild selbst ab Wenn Sie darauf klicken, wird nach dem Klick der URI mit dem Suffix versehen "# img1" Fragmentkennung.

5. Style die :Ziel Pseudo-Klasse

Bis zum "# img1" Fragmentkennung befindet sich am Ende der URI, das gezielte Bild kann sein gestylt mit der :Ziel Pseudoklasse

Die Abmessungen des anvisierten Bildes werden größer, die Schaltfläche Schließen wird angezeigt und die Schaltfläche Erweitern wird ausgeblendet.

 .img: Ziel Höhe: 450px; Breite: 500px;  .img: target + .close display: block;  .img: target + .close + .expand display: none;  

Wie der Close-Button funktioniert

Da die Schaltfläche Schließen als Hintergrundbild hinzugefügt wurde (Schritt 2), handelt es sich tatsächlich um ein tag mit dem href = # Attribut (Schritt 1): Wenn Sie darauf klicken, wird der Fragment-Bezeichner am Ende des URI entfernt. Deshalb auch entfernt die :Ziel Pseudoklasse aus dem Bild und dem Bild geht auf seine vorherige Größe zurück.

Hintergrundinfo: Warum und nicht ?

Inzwischen wissen Sie sicherlich, dass das Wichtigste für diese CSS-only-Lösung ist zielen Sie das Bild mit der href = "# imgid" Attribut, das könnte auch mit der Tag anstelle der Imagemap.

Das Standard Wert für gestalten Attribut erstellt ein rechteckiger verknüpfbarer Bereich, der das gesamte Bild abdeckt. Wenn du verwenden würdest Stattdessen müssten Sie es so programmieren, dass es das Bild abdeckt. Möglicherweise müssen Sie auch ein Wrapper-Element für denselben Zweck verwenden.

Um IE-Browser zuvor zu unterstützen, können Sie beide verwenden anstatt , oder lassen Sie das Bild vergrößern, indem Sie auf eine beliebige Stelle klicken (in diesem Fall ist das Symbol "Erweitern" nicht erforderlich).