Kako stvoriti Čisti CSS onClick Image Zoom Effect

CSS nema pseudoclass za događaji klika na ciljanje, i to je jedan od najveće bolne točke naprednih razvojnih programera. Najbliža pseudo-klasa je :aktivan koja stilizira element za razdoblje tijekom kojeg korisnik pritisne miš.

Taj je učinak, međutim, kratkotrajan: kada korisnik oslobodi miša, :aktivan više ne radi. Moramo pronaći neki drugi način oponašajte događaj klikova u CSS-u.

Ovaj post je napisan kao odgovor na zahtjev čitatelja i objašnjava kako ciljajte događaj klikova čistim CSS-om u određenom slučaju uporabe, zumiranje slike.

Konačni rezultat možete vidjeti ispod - CSS-samo rješenje za zumiranje slike na klik.

Kada koristiti rješenje samo za CSS

Prije nego što nastavim, želim reći da za zumiranje slike preporučujem metodu samo za CSS (koja mijenja dimenzije slike), samo kada želite singl ili a skupina od nekoliko slika da biste dobili značajku zumiranja.

Za ispravan galerija, JavaScript pruža veću fleksibilnost i učinkovitost.

Front-End tehnike koje ćemo koristiti

Sada kada ste upozoreni, brzo ćemo pregledati 3 ključne tehnike koristit ćemo:

1. HTML oznaka koji omogućuje preglednicima stvoriti područja koja se mogu povezati preko slike. Pročitajte više na element u mom ranijem postu.
2. usemap atribut označiti, koja povezuje sliku s mapom slike.
3. :cilj CSS pseudo-klasa koji predstavlja element koji je ciljan pomoću njegovog ID selektora.

1. Stvorite HTML bazu

Prvo stvorimo HTML bazu. U donjem kodu dodamo sliku koju želite zumirati i proširiti & ikone gumba za zatvaranje za zumiranje i smanjivanje.

Važno je imati ID na slici za zumiranje, a gumb Zatvori mora biti veza s oznakom href = "#" atribut, objasnit ću zašto kasnije u postu.

2. Dodajte CSS

U početku, ikona Zatvori ne bi trebalo prikazivati. položaj, margina-, lijevo, i dno nekretnine mjesto Proširi i zatvori ikone gdje želimo da budu - u gornjem desnom kutu slike.

pointer-događaji: nema; Pravilo dopušta događaje u mišu proći kroz ikonu Proširi i doći do slike.

 .img visina: 150px; širina: 200px;  .close background-image: url ("Zatvori-icon.png"); pozadina-ponavljanje: nema ponavljanja; dno: 418px; prikaz: nema; visina: 32px; lijevo: 462px; margina-vrh: -32px; pozicija: relativna; širina: 32px;  .expand bottom: 125px; margina lijevo: -32px; margin-right: 16px; pointer-događaji: nema; pozicija: relativna;  

3. Dodajte Mapu slika

Na mapi sa slikama, područje koje se može kliknuti trebalo bi u gornjem desnom kutu slike odmah ispod ikone Proširi i o njenoj veličini. Postaviti element prije prvog u HTML-u. Vezat ćemo sliku na kartu u sljedećem koraku.

U gornjem kodnom kodu iznad oznaka definira oblik, veličinu i URI područja povezivanja unutar karte slike. Za pravokutnog oblika, oblik atribut uzima Direktivom vrijednost, i četiri vrijednosti od coords atribut predstavlja udaljenost u pikselima između:

1. lijevi rub slike i lijevi rub područja veze
2. gornji rub slike i gornji rub područja veze
3. lijevi rub slike i desni rub područja veze
4. gornji rub slike i donji rub područja veze

Vrijednost href atribut mora biti hash identifikator slike (zato bi slika trebala imati iskaznica).

4. Povežite sliku s mapom slike

Dodajte usemap atribut za sliku tako da vežite ga na kartu slike. Njegova vrijednost mora biti hash prikazivanje Ime atribut označiti smo dodali u 3. koraku.

Područje slike slike koje je moguće kliknuti nalazi se iza gumba Proširi. Kada korisnik klikne gumb Proširi, to je područje koje se može kliknuti i kojega se u stvarnosti klikne - zapamtite da smo napravili gumb Proširi “prolazan” s pointer-događaji: nema; pravilo u koraku 2.

Na taj način korisnik cilja na samu sliku klikom na njega, a nakon klika URI dobiva dodatak "# Img1" identifikator fragmenta.

5. Podesite stil :cilj Pseudo-klasa

Do "# Img1" identifikator fragmenta je na kraju URI-ja, ciljana slika može biti stilizirano s :cilj pseudo-klase

Povećavaju se dimenzije ciljane slike, prikazuje se gumb Zatvori, a gumb Proširi se skriva.

 .img: target visina: 450px; širina: 500px;  .img: target + .close display: block;  .img: target + .close + .expand display: none;  

Kako radi gumb Zatvori

Kako je gumb Zatvori dodan kao pozadinska slika (korak 2), i zapravo je s oznakom href = # atribut (korak 1), kada se klikne, uklanja identifikator fragmenta s kraja URI-ja. Stoga i ona uklanja :cilj pseudo-klase iz slike i slike vraća se na prethodnu veličinu.

Osnovne informacije: Zašto i ne ?

Do sada ste sigurno shvatili da je najvažnija stvar za ovo CSS-jedino rješenje za posao ciljajte sliku pomoću href = "# imgid" atribut, koji se također može obaviti pomoću umjesto mape slika.

zadano vrijednost za oblik atribut stvara a pravokutno povezivo područje koje pokriva cijelu sliku. Ako želite koristiti umjesto toga, morat ćete ga kodirati da biste pokrili sliku, a možda ćete morati koristiti i element omotača za istu svrhu.

Da biste podržali IE preglednike prije toga, možda želite koristiti bilo koji od njih umjesto , ili povećajte sliku tako što ćete kliknuti bilo gdje na njoj (u ovom slučaju neće trebati ikona Proširi).