Hoe maak je Pure CSS onClick Image Zoom Effect
CSS heeft geen pseudoclass voor richten op klikgebeurtenissen, en dit vormt een van de grootste pijnpunten van front-end ontwikkelaars. De dichtstbijzijnde pseudo-klasse is :actief
die een element opmaakt voor de periode dat een gebruiker met de muis eroverheen drukt.
Dit effect is echter van korte duur: zodra de gebruiker de muis loslaat, :actief
werkt niet meer. We moeten een andere manier vinden om emuleer de klikgebeurtenis in CSS.
Dit bericht is geschreven als antwoord op het verzoek van een lezer en het zal uitleggen hoe target de klikgebeurtenis met pure CSS in een specifieke use-case, afbeelding zoom.
U kunt het eindresultaat hieronder bekijken - een oplossing met alleen CSS voor afbeelding zoom in klik.
Wanneer de CSS-only oplossing gebruiken
Voordat ik verder ga, wil ik wel zeggen dat ik voor het vergroten van de zoom de CSS-only-methode (die de afmetingen van de afbeelding verandert) alleen aanbeveelt als je een single of a groep van enkele afbeeldingen om de zoomfunctie te hebben.
Voor een gepast galerij, JavaScript biedt meer flexibiliteit en efficiëntie.
Front-end technieken die we zullen gebruiken
Nu je bent gewaarschuwd, laten we snel kijken naar de 3 belangrijke technieken we zullen gebruiken:
- De
HTML-tag waarmee browsers kunnen maak koppelbare gebieden over een afbeelding. Lees meer op de
element in mijn eerdere bericht.
- De
usemap
attribuut van delabel, die de afbeelding aan de beeldkaart koppelt.
- De
:doelwit
CSS pseudo-klasse dat staat voor een element dat is getarget met zijn ID-selector.
1. Maak de HTML-basis
Laten we eerst de HTML-basis maken. In de onderstaande code voegen we toe een afbeelding om in te zoomen en uit te vouwen & knoppictogrammen sluiten om in en uit te zoomen.
Het is belangrijk om een ID op de afbeelding te hebben waarop moet worden ingezoomd en de knop Sluiten moet een koppeling zijn met de href = "#"
attribuut, ik zal later in de post uitleggen waarom.
2. Voeg de CSS toe
Aanvankelijk het pictogram Sluiten zou niet moeten worden weergegeven. De positie
, marge-
, links
, en bodem
eigenschappen plaats de Pictogrammen uitvouwen en sluiten waar we willen dat ze zijn - in de rechterbovenhoek van het beeld.
De pointer-events: geen;
regel staat muisgebeurtenissen toe aan passeer het pictogram Expand en bereik de afbeelding.
.img height: 150px; breedte: 200 px; .close background-image: url ("Close-icon.png"); achtergrondherhaling: geen herhaling; onderaan: 418 px; Geen weergeven; hoogte: 32 px; links: 462px; margin-top: -32px; positie: relatief; breedte: 32px; .expand bottom: 125px; marge links: -32 px; margin-right: 16px; pointer-events: geen; positie: relatief;
3. Voeg de Image Map toe
Op de imagemap, de klikbaar gebied zou moeten zijn in de rechterbovenhoek van de afbeelding direct onder het pictogram Uitvouwen en over de grootte ervan. Plaats de element vóór de eerste
tag in de HTML. We binden de afbeelding in de volgende stap aan de kaart.
In het codeblok hierboven, de tag definieert de vorm, grootte en URI van een koppelbaar gebied in een afbeelding. Voor een rechthoekige vorm, de
vorm
attribuut neemt de rect
waarde, en de vier waarden van de coords
attribuut geeft de afstand in pixels weer tussen:
- de linkerrand van de afbeelding en de linkerrand van het koppelingsgebied
- de bovenrand van de afbeelding en de bovenrand van het koppelingsgebied
- de linkerrand van de afbeelding en de rechterrand van het koppelingsgebied
- de bovenrand van de afbeelding & de onderkant van het koppelingsgebied
De waarde van de href
attribuut moet de hash-ID van de afbeelding (dit is de reden waarom de afbeelding een ID kaart
).
4. Bind de afbeelding aan de Image Map
Voeg de usemap
attribuut aan de afbeelding om bind het aan de afbeelding map. De waarde ervan moet de hash representatie van de naam
attribuut van de label we hebben toegevoegd in stap 3.
Het klikbare gebied van de imagemap nu ligt achter de knop Uitvouwen. Wanneer de gebruiker op de knop Uitvouwen klikt, wordt het klikbare gebied in werkelijkheid aangeklikt. Vergeet niet dat we de knop Uitvouwen hebben gemaakt “begaanbaar” met de pointer-events: geen;
regel in stap 2.
Op deze manier de gebruiker richt zich op de afbeelding zelf door erop te klikken, en na de klik krijgt de URI een suffix met de "# Img1"
fragment-ID.
5. Style de :doelwit
Pseudo-Klasse
Tot de "# Img1"
fragment-ID staat aan het einde van URI, de doelafbeelding kan zijn gestyled met de :doelwit
pseudo-class
De afmetingen van het doelbeeld nemen toe, de knop Sluiten wordt weergegeven en de knop Uitvouwen wordt verborgen.
.img: target height: 450px; breedte: 500 px; .img: target + .close display: block; .img: target + .close + .expand display: none;
Hoe de knop Sluiten werkt
Omdat de knop Sluiten als achtergrondafbeelding is toegevoegd (stap 2) en eigenlijk een tag met de
href = #
kenmerk (stap 1), wanneer erop wordt geklikt, wordt de fragment-ID verwijderd aan het einde van de URI. Daarom ook verwijdert de :doelwit
pseudo-class van de afbeelding en de afbeelding gaat terug naar de vorige grootte.
Nu is het CSS-only zoom-on-click effect gedaan, bekijk de onderstaande demo, of lees een beetje meer over de theorie achter image maps in de volgende sectie.
Achtergrondinformatie: waarom
en niet
?
Inmiddels begrijp je zeker dat het belangrijkste voor deze CSS-only oplossing om te werken is om te werken richt de afbeelding met behulp van de href = "# imgid"
attribuut, wat ook zou kunnen worden gedaan met behulp van de tag in plaats van de imagemap.
Dit kan waar zijn, maar als het om afbeeldingen gaat, gebruik dan de element is meer geschikt. Het is zelfs nog belangrijker dat wanneer u de zoomfunctie wilt gebruiken gebeurt door te klikken op een groter gebied op de afbeelding in plaats van alleen op het pictogram Expand,
geeft u een eenvoudige oplossing.
De standaard
waarde voor vorm
attribuut maakt een rechthoekig koppelbaar gebied dat het hele beeld bestrijkt. Als je zou gebruiken in plaats daarvan zou je het moeten coderen om de afbeelding te dekken, en misschien moet je ook een wrapper-element gebruiken voor hetzelfde doel.
Om ook te spreken over de kanttekeningen van deze oplossing, de pointer-events
CSS-eigenschap (die we in stap 2 hebben gebruikt) wordt ondersteund door Internet Explorer alleen vanaf versie 11.
Om eerder IE-browsers te ondersteunen, wilt u misschien wel gebruiken in plaats van
, of laat de afbeelding inzoomen door ergens op te klikken (in dit geval is het pictogram Uitbreiden niet nodig).