Kako ustvariti čisti CSS onClick učinek povečave slike

CSS nima psevdoklasa za ciljanje dogodkov klikanja, in to predstavlja eno od največje bolečine razvijalcev. Najbližji psevdo-razred je : aktivno ki stili element za čas, ko uporabnik pritisne miško nad njim.

Ta učinek pa je kratkotrajen: ko uporabnik spusti miško, : aktivno ne deluje več. Najti moramo drug način posnemajte dogodek klikov v CSS.

Ta objava je bila napisana kot odgovor na zahtevo bralca in razložila bo, kako ciljanje dogodka klikov s čistim CSS v posebnih primerih uporabe, povečava slike.

Končni rezultat si lahko ogledate spodaj - rešitev za samo CSS povečava slike na klik.

Kdaj uporabiti rešitev s samo CSS

Preden nadaljujem, želim povedati, da za povečavo slike priporočam samo metodo CSS (ki spreminja dimenzije slike), samo če želite samski ali a skupina nekaj slik funkcijo povečave.

Za pravilno galerija, JavaScript omogoča večjo prilagodljivost in učinkovitost.

Tehnike front-end bomo uporabili

Zdaj, ko ste bili opozorjeni, hitro poglejmo 3 ključne tehnike uporabljali bomo:

1. The Oznaka HTML ki omogoča brskalnikom ustvarite povezljiva območja nad sliko. Več o tem element v moji prejšnji objavi.
2. The usemap atribut. \ t oznaka, , ki poveže sliko s slikovnim zemljevidom.
3. The : target CSS psevdo-razred ki predstavlja element, ki je bil ciljan z uporabo njegovega izbirnika ID.

1. Ustvarite bazo HTML

Najprej ustvarimo bazo HTML. V spodnjo kodo dodamo sliko, ki jo želite povečati in razširiti & Zaprite ikone gumbov za povečavo in pomanjšavo.

Pomembno je, da imate na sliki, ki jo želite povečati, ID, gumb Zapri pa mora biti povezava s sliko href = "#" atribut, bom razložil zakaj kasneje v pošti.

2. Dodajte CSS

Sprva ikona Zapri se ne sme prikazati. The položaj, marže-, levo, in spodaj lastnosti kraj Razširi in zapri ikone kjer želimo, da so - v zgornjem desnem kotu slike.

The kazalci dogodkov: nič; pravilo omogoča dogodke miške v skozi ikono Expand in dosežete sliko.

 .img višina: 150px; širina: 200px;  .close background-image: url ("Zapri-icon.png"); ponovitev v ozadju: brez ponovitve; spodaj: 418px; prikaz: nič; višina: 32px; levo: 462px; rob-top: -32px; položaj: relativna; širina: 32px;  .expand bottom: 125px; margin-left: -32px; margin-right: 16px; kazalci dogodkov: nič; položaj: relativna;  

3. Dodajte zemljevid slik

Na slikovnem zemljevidu območje, ki ga je mogoče klikniti moral bi biti v zgornjem desnem kotu slike pod ikono Expand in njene velikosti. Postavite element pred prvim v HTML-ju. Sliko povežemo z zemljevidom v naslednjem koraku.

V kodnem bloku zgoraj je oznaka določa obliko, velikost in URI območja, ki ga je mogoče povezati znotraj slikovnega zemljevida. Za pravokotne oblike, obliko atribut prevzame rect vrednost, in štiri vrednosti od vrvice atribut predstavlja razdaljo v slikovnih pikah med:

1. levi rob slike in levi rob območja povezave
2. zgornji rob slike in zgornji rob območja povezave
3. levi rob slike in desni rob območja povezave
4. zgornji rob slike in spodnji rob območja povezave

Vrednost href atribut mora biti hash identifikator slike (zato mora slika imeti id).

4. Povežite sliko s slikovnim zemljevidom

Dodajte usemap atribut slike tako, da povežite s slikovnim zemljevidom. Njegova vrednost mora biti predstavitev hash ime atribut. \ t oznaka smo dodali v 3. koraku.

Sedaj lahko kliknete območje slikovnega zemljevida stoji za gumb Expand. Ko uporabnik klikne gumb Razširi, je območje, ki ga je mogoče klikniti, ki ga je dejansko kliknilo - ne pozabite, da smo naredili gumb Razširi “prehodna” z kazalci dogodkov: nič; pravilo v 2. koraku.

Na ta način uporabnik cilje na sliko s klikom nanj in po kliku se URI doda "# img1" identifikator fragmenta.

5. Oblikujte : target Psevdo-razred

Do "# img1" identifikator fragmenta je na koncu URI-ja, ciljna slika je lahko oblikovan z : target psevdo-razred

Dimenzije ciljne slike se povečajo, prikaže se gumb Zapri in gumb Razširi se skrije.

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

Kako deluje gumb za zapiranje

Ker je bil gumb za zaprtje dodan kot slika v ozadju (korak 2), in je dejansko z oznako href = # atribut (1. korak), ko klikne, odstrani identifikator fragmenta s konca URI-ja. Zato tudi odstrani : target psevdo-razred sliko in sliko se vrne na prejšnjo velikost.

Osnovne informacije: Zakaj in ne ?

Do sedaj ste zagotovo razumeli, da je najpomembnejša stvar za to rešitev CSS-a le delo ciljno sliko z uporabo href = "# imgid" atribut, ki se lahko izvede tudi z uporabo namesto zemljevida slike.

The privzeto vrednost za obliko atribut ustvarja a pravokotno povezovalno območje, ki pokriva celotno sliko. Če bi uporabili namesto tega bi jo morali kodirati, da pokrije sliko, zato boste morda morali uporabiti tudi ovojni element za isti namen.

Za podporo brskalnikom IE pred tem boste morda želeli uporabiti namesto , ali pa povečajte sliko tako, da kliknete kjerkoli na njej (v tem primeru ikona za razširitev ni potrebna).