Pure CSS onClick Image Zoom Effect Nasıl Oluşturulur

CSS’de sahte sınıf yok tıklama olaylarını hedefleme, ve bu birini en büyük ağrı noktaları ön-geliştiricilerin En yakın sözde sınıf :aktif bir kullanıcının faresini üzerine bastığı süre boyunca bir öğeye stil veren.

Ancak bu etki kısa sürelidir: kullanıcı fareyi serbest bıraktığında, :aktif artık çalışmıyor. Başka bir yol bulmalıyız. CSS'de click olayına öykünmek.

Bu gönderi, okuyucunun isteğine yanıt olarak yazıldı ve nasıl yazılacağını açıklayacak. click olayını saf CSS ile hedefleyin belirli bir kullanım durumunda, görüntü yakınlaştırma.

Nihai sonucu aşağıda görebilirsiniz - yalnızca CSS çözümü görüntü üzerine tıklayın.

Yalnızca CSS Çözümünü Ne Zaman Kullanmalı?

Devam etmeden önce şunu söylemek isterim ki, görüntü yakınlaştırma için yalnızca görüntünün istediğiniz tek veya bir birkaç görüntü grubu yakınlaştırma özelliğine sahip olmak.

Bir için uygun galeri, JavaScript daha fazla esneklik ve verimlilik sağlar.

Kullanacağımız Ön Uç Teknikleri

Artık uyarıldığına göre, hadi çabucak 3 anahtar teknik kullanacağız:

1. HTML etiketi tarayıcılara izin verir görüntü üzerinde bağlanabilir alanlar oluşturun. Daha fazlası için önceki yazımdaki öğe.
2. IS usemap özniteliği etiket, görüntüyü resim haritasına bağlayan.
3. :hedef CSS sözde sınıfı ID seçicisi kullanılarak hedeflenen bir öğeyi temsil eder..

1. HTML Tabanını oluşturun

İlk önce, HTML tabanını oluşturalım. Aşağıdaki kodda ekledik yakınlaştırılacak ve genişletilecek bir resim & düğme simgeleri kapatın yakınlaştırmak ve uzaklaştırmak için.

Yakınlaştırılacak görüntünün bir kimliğinin olması önemlidir ve Kapat düğmesinin bir bağlantıya sahip olması gerekir. href = "#" öznitelik, neden daha sonra yazıda açıklayacağım.

2. CSS'yi ekleyin

Başlangıçta, Kapat simgesi gösterilmemeli. pozisyon, kenar-, ayrıldı, ve alt özellikleri yer Simgeleri Genişlet ve Kapat onların olmasını istediğimiz yer - görüntünün sağ üst köşesinde.

pointer-events: yok; kural, fare olaylarının yapılmasına izin verir Genişlet simgesinden geçmek ve görüntüye ulaşmak.

 .img yükseklik: 150 piksel; genişlik: 200px;  .close background-image: url ("Close-icon.png"); arka plan tekrarı: no-tekrarı; alt: 418 piksel; görüntü yok; yükseklik: 32px; sol: 462 piksel; kenar boşluğu: -32px; pozisyon: göreceli; genişlik: 32px;  .expand bottom: 125px; sol kenar boşluğu: -32px; kenar boşluğu: 16 piksel; pointer-events: yok; pozisyon: göreceli;  

3. Görüntü Haritasını Ekleyin

Resim haritasında tıklanabilir alan olmalı sağ üst köşede Genişlet simgesinin altındaki görüntünün boyutu ve boyutu. Yerleştirin ilk önce eleman HTML'deki etiketi. Görüntüyü bir sonraki adımda haritaya bağlayacağız.

Yukarıdaki kod bloğunda etiketi bağlanabilir bir alanın şekli, boyutu ve URI'si Bir resim haritasının içinde. Bir için dikdörtgen şekil, şekil öznitelik alır rect değer ve dört değer arasında coords öznitelik, pikseller arasındaki mesafeyi temsil eder:

1. görüntünün sol kenarı ve bağlantı alanının sol kenarı
2. görüntünün üst kenarı ve bağlantı alanının üst kenarı
3. Resmin sol kenarı ve bağlantı alanının sağ kenarı
4. görüntünün üst kenarı ve bağlantı alanının alt kenarı

Değeri href öznitelik olması gerekir görüntünün karma tanımlayıcısı (bu yüzden görüntünün İD).

4. Görüntüyü Görüntü Haritasına bağlayın

Ekle IS usemap görüntünün özniteliği onu resim haritasına bağlayın. Değeri olması gerekiyor karma gösterimi isim özniteliği etiket 3. Adımda ekledik.

Resim haritasının tıklanabilir alanı şimdi Genişlet düğmesinin arkasında yatıyor. Kullanıcı Genişlet düğmesini tıkladığında, gerçekte tıklanan tıklanabilir alandır - Genişlet düğmesini yaptığımızı unutmayın “geçilebilir” ile pointer-events: yok; 2. Adımda kural.

Bu şekilde kullanıcı görüntünün kendisini hedefler tıkladığınızda ve tıklamadan sonra URI ile sonlandırılır "# İmg1" parça tanımlayıcısı.

5. Stil :hedef Sözde Sınıf

E kadar "# İmg1" parça tanımlayıcısı URI'nin sonunda, hedeflenen resim olabilir ile tarz :hedef Sözde sınıf

Hedeflenen görüntünün boyutları artar, Kapat düğmesi gösterilir ve Genişlet düğmesi gizlenir.

 .img: hedef yükseklik: 450 piksel; genişlik: 500px;  .img: target + .close display: block;  .img: hedef + .close + .expand görüntüleme: yok;  

Kapat Düğmesi Nasıl Çalışır?

Kapat düğmesi arka plan görüntüsü olarak eklendiğinden (2. Adım) ve aslında bir ile etiketle href = # özniteliği (Adım 1), tıklandığında, parça tanımlayıcısını URI'nın sonundan kaldırır. Bu nedenle de kaldırır :hedef Sözde sınıf görüntüden ve görüntüden önceki boyutuna geri gider.

Arka Plan Bilgisi: Neden ve yok ?

Şimdiye dek, kesinlikle bu CSS-tek çözümünün çalışması için en önemli şeyin çalışmak olduğunu kesinlikle anlıyorsunuzdur. kullanarak görüntüyü hedefleyin. href = "# imgid" nitelik, hangi kullanılarak da yapılabilir resim eşlemi yerine etiket.

varsayılan değeri şekil öznitelik oluşturur Resmin tamamını kapsayan dikdörtgen bağlantılı bağlantı alanı. Eğer kullanacak olsaydın bunun yerine, görüntüyü örtmek için kodlamanız gerekecek ve aynı amaçla bir sarmalayıcı elemanı kullanmanız gerekebilir..

Bundan önce IE tarayıcılarını desteklemek için, her ikisini de kullanmak isteyebilirsiniz. yerine , veya resmin üzerinde herhangi bir yeri tıklatarak yakınlaştırılmasını sağlayın (bu durumda Genişlet simgesine gerek kalmaz).