Hur man skapar ren CSS onClick Image Zoom Effect

CSS har inte en pseudoklass för inriktade på klickhändelser, och detta utgör en av största smärtpunkterna av front-end utvecklare. Den närmaste pseudoklassen är :aktiva vilken utformar ett element för den tidsperiod som en användare trycker på musen över den.

Denna effekt är dock kortvarig: när användaren släpper ut musen, :aktiva fungerar inte längre. Vi måste hitta något annat sätt att emulera klickhändelsen i CSS.

Detta inlägg har skrivits som svar på en läsarens begäran, och det kommer att förklara hur man ska rikta klickhändelsen med ren CSS i ett specifikt användningsfall, bildzoom.

Du kan se det slutliga resultatet nedan - en CSS-only-lösning för bildzoom på klick.

När ska du använda CSS-Only Solution

Innan jag fortsätter vill jag säga att för bildzoom rekommenderar jag CSS-only-metoden (som ändrar bildens dimensioner), bara när du vill ha en enda eller a grupp av få bilder att ha zoomfunktionen.

För en rätt galleri ger JavaScript mer flexibilitet och effektivitet.

Front-End Techniques Vi ska använda

Nu när du har blivit varnad, låt oss snabbt titta över 3 viktiga tekniker vi ska använda:

1. De HTML-tagg som tillåter webbläsare att skapa länkbara områden över en bild. Läs mer på element i mitt tidigare inlägg.
2. De usemap attribut av märka, som krokar upp bilden till bildkartan.
3. De :mål CSS pseudoklass som representerar ett element som har riktats med hjälp av dess ID-väljare.

1. Skapa HTML-basen

Låt oss först skapa HTML-basen. I koden nedan lägger vi till en bild som ska zooms och expanderas & stänga knapp ikoner för att zooma in och ut.

Det är viktigt att ha ett ID på bilden som ska zooms, och knappen Stäng måste vara en länk som har href = "#" attribut, jag förklarar varför senare i posten.

2. Lägg till CSS

Ursprungligen ikonen Stäng ska inte visas. De placera, marginal-, vänster, och botten egenskaper plats de Expandera och stäng ikoner där vi vill att dom ska vara - längst upp till höger på bilden.

De pekare-händelser: ingen; regel tillåter mushändelser att gå igenom ikonen Expand och nå bilden.

 .img höjd: 150px; bredd: 200px;  .close background-image: url ("Close-icon.png"); bakgrundsrepetition: nej-repetera; botten: 418px; display: none; höjd: 32px; vänster: 462px; margin-top: -32px; position: relativ; bredd: 32px;  .expand botten: 125px; marginal-vänster: -32px; marginal-höger: 16px; pekare-händelser: ingen; position: relativ;  

3. Lägg till bildkartan

På bildkartan klickbart område borde vara i övre högra hörnet av bilden direkt under ikonen Expand och om dess storlek. Placera element före det första tagg i HTML. Vi binder bilden till kartan i nästa steg.

I kodblocket ovan är taggen definierar form, storlek och URI för ett länkbart område inuti en bildkarta. För en rektangulär form, de form attributet tar rect värde och fyra värden av coords attributet representerar avståndet i pixlar mellan:

1. den vänstra kanten på bilden och den vänstra kanten på länkområdet
2. överkanten på bilden och den övre kanten av länkområdet
3. den vänstra kanten på bilden och den högra kanten på länkområdet
4. den övre kanten av bilden och den nedre kanten av länkområdet

Värdet av href attribut måste vara hashidentifierare av bilden (det är därför bilden ska ha en id).

4. Binda bilden till bildkartan

Lägg till usemap attribut till bilden så att binda den till bildkartan. Dess värde måste vara hash representation av namn attribut av märka vi lade till i steg 3.

Det klickbara området för bildkartan nu ligger bakom Expand-knappen. När användaren klickar på Expand-knappen är det det klickbara området som klickas i verkligheten - kom ihåg att vi gjorde Expand-knappen “framkomlig” med pekare-händelser: ingen; regel i steg 2.

På så sätt användaren riktar sig mot själva bilden genom att klicka på den och efter klicket blir URI suffixed med "# Img1" fragmentidentifierare.

5. Stil in :mål Pseudo-klass

Tills "# Img1" fragmentidentifierare är i slutet av URI kan den inriktade bilden vara stilad med :mål pseudo-klass

Dimensionerna för den riktade bilden ökar, knappen Stäng visas och Expand-knappen döljs.

 .img: mål höjd: 450px; bredd: 500px;  .img: target + .close display: block;  .img: target + .close + .expand display: none;  

Hur den snabba knappen fungerar

Eftersom knappen Stäng var tillagd som en bakgrundsbild (Steg 2), och är faktiskt en tagga med href = # attribut (steg 1), när det klickas, tar det bort fragmentidentifieraren från slutet av URI. Därför är det också tar bort :mål pseudo-klass från bilden och bilden går tillbaka till sin tidigare storlek.

Bakgrundsinformation: Varför och inte ?

Nu förstår du säkert att det viktigaste för den här CSS-only-lösningen på jobbet är att rikta in bilden med hjälp av href = "# imgid" attribut, vilket också kunde göras med hjälp av tagg istället för bildkartan.

De standard värde för form attribut skapar a rektangulärt länkbart område som täcker hela bilden. Om du skulle använda i stället måste du koda det för att täcka bilden, och du kan också behöva använda ett omslagsperspektiv för samma ändamål.

För att stödja IE-webbläsare före det kan du antingen använda istället för , eller ha bilden zoomd på genom att klicka någonstans på den (i det här fallet behöver du inte ikonen Expand).