Jak utworzyć czysty efekt CSS onClick Image Zoom

CSS nie ma pseudoklas dla targetowanie kliknięć, a to stanowi jedną z największe punkty bólu programistów front-end. Najbliższa pseudoklasa to :aktywny który stylizuje element przez okres, w którym użytkownik naciska na niego kursor myszy.

Efekt ten jest jednak krótkotrwały: po zwolnieniu myszy przez użytkownika, :aktywny już nie działa. Musimy znaleźć inny sposób emuluj zdarzenie click w CSS.

Ten post został napisany w odpowiedzi na prośbę czytelnika i ma wyjaśnić, jak to zrobić cel zdarzenia click za pomocą czystego CSS w konkretnym przypadku użycia, powiększenie obrazu.

Możesz zobaczyć wynik końcowy poniżej - rozwiązanie przeznaczone tylko dla CSS powiększenie obrazu po kliknięciu.

Kiedy używać rozwiązania CSS-Only

Zanim przejdę dalej, chcę powiedzieć, że dla powiększenia obrazu zalecam metodę tylko CSS (która zmienia wymiary obrazu), tylko gdy chcesz pojedynczy lub a grupa kilku zdjęć mieć funkcję powiększania.

Dla właściwy galeria, JavaScript zapewnia większą elastyczność i wydajność.

Wykorzystamy techniki front-end

Teraz, gdy zostałeś ostrzeżony, spójrzmy szybko na 3 kluczowe techniki będziemy używać:

1. The Tag HTML to pozwala przeglądarkom na utwórz łączone obszary na obrazie. Przeczytaj więcej na temat element w moim wcześniejszym poście.
2. The mapa użytkowania atrybut etykietka, który podpina obraz do mapy obrazu.
3. The :cel Pseudo-klasa CSS reprezentuje element, który został skierowany za pomocą jego selektora ID.

1. Utwórz bazę HTML

Najpierw stwórzmy bazę HTML. W poniższym kodzie dodajemy obraz do powiększenia i rozwinięcia & zamknij ikony przycisków do powiększania i pomniejszania.

Ważne jest, aby mieć obrazek na obrazie, który ma zostać powiększony, a przycisk Zamknij musi być linkiem, który ma href = "#" atrybut, wyjaśnię dlaczego później w poście.

2. Dodaj CSS

Początkowo ikona Zamknij nie powinien być wyświetlany. The pozycja, margines-, lewo, i Dolny nieruchomości miejsce Rozwiń i zamknij ikony gdzie chcemy, żeby były - w prawym górnym rogu obrazu.

The zdarzenia-wskaźniki: brak; reguła zezwala na zdarzenia myszy przejść przez ikonę Rozwiń i dotrzeć do obrazu.

 .img wysokość: 150px; szerokość: 200px;  .close background-image: url ("Close-icon.png"); powtórz tło: nie powtarzaj; dół: 418px; Nie wyświetla się; wysokość: 32px; po lewej: 462px; margin-top: -32px; pozycja: względna; szerokość: 32px;  .expand bottom: 125px; margin-left: -32px; margin-right: 16px; zdarzenia-wskaźniki: brak; pozycja: względna;  

3. Dodaj mapę obrazu

Na mapie obrazu obszar klikalny powinno być w prawym górnym rogu obrazu tuż pod ikoną Rozwiń oraz o jego rozmiarze. Umieść element przed pierwszym tag w HTML. Zwiążemy obraz z mapą w następnym kroku.

W powyższym bloku kodu tag definiuje kształt, rozmiar i URI obszaru łączonego wewnątrz mapy obrazu. Dla prostokątny kształt, kształt atrybut przyjmuje rect wartość i cztery wartości z coords atrybut reprezentuje odległość w pikselach między:

1. lewa krawędź obrazu i lewa krawędź obszaru łącza
2. górna krawędź obrazu i górna krawędź obszaru łącza
3. lewa krawędź obrazu i prawa krawędź obszaru łącza
4. górna krawędź obrazu i dolna krawędź obszaru łącza

Wartość href atrybut musi być hash identyfikator obrazu (dlatego obraz powinien mieć ID).

4. Powiąż obraz z mapą obrazu

Dodaj mapa użytkowania atrybut do obrazu, aby powiązać go z mapą obrazu. Jego wartość musi być wartością hash reprezentacja imię atrybut etykietka dodaliśmy w kroku 3.

Klikalny obszar mapy obrazu teraz leży za przyciskiem Rozwiń. Gdy użytkownik kliknie przycisk Rozwiń, klikalny obszar jest klikany w rzeczywistości - pamiętaj, że wykonaliśmy przycisk Rozwiń “zadowalający” z zdarzenia-wskaźniki: brak; zasada w kroku 2.

W ten sposób użytkownik celuje w sam obraz klikając go, a po kliknięciu identyfikator URI zostanie uzupełniony o „# img1” identyfikator fragmentu.

5. Styluj :cel Pseudo-klasa

Dopóki „# img1” Identyfikator fragmentu znajduje się na końcu URI, obrazem docelowym może być stylizowany na :cel pseudoklasa

Wymiary docelowego obrazu zwiększają się, wyświetlany jest przycisk Zamknij, a przycisk Rozwiń zostaje ukryty.

 .img: target wysokość: 450px; szerokość: 500px;  .img: target + .close display: block;  .img: target + .close + .expand display: none;  

Jak działa przycisk Zamknij

Jako, że przycisk Zamknij został dodany jako obraz tła (krok 2), jest w rzeczywistości tag z href = # atrybut (krok 1), po kliknięciu usuwa identyfikator fragmentu z końca identyfikatora URI. Dlatego też usuwa :cel pseudoklasa z obrazu i obrazu wraca do poprzedniego rozmiaru.

Informacje o tle: Dlaczego i nie ?

Teraz już na pewno rozumiesz, że najważniejszą rzeczą dla tego rozwiązania CSS jest praca skieruj obraz za pomocą href = "# imgid" atrybut, co można również zrobić za pomocą tag zamiast mapy obrazu.

The domyślna wartość dla kształt atrybut tworzy a prostokątny obszar, który może pokryć cały obraz. Jeśli miałbyś użyć zamiast tego musiałbyś go zakodować, aby pokryć obraz, i być może będziesz musiał użyć elementu opakowania w tym samym celu.

Aby wcześniej obsługiwać przeglądarki IE, możesz użyć zamiast , lub powiększ obraz, klikając w dowolnym miejscu na nim (w tym przypadku nie będzie potrzeby rozwijania ikony).