Częściowo, ponieważ obsługa tyczy się tylko elementu <a> i innego wybranego elementu z określonym atrybutem id. Jest to możliwe dzięki selektorowi :target, który odwołuje się do elementu, którego identyfikator jest identyczny z wartością umieszczoną po hash'u na pasku adresu, np. #element odnosi się do elementu id="element".
Wykorzystując linki do wartości zadanych po znaku # możemy manipulować wyświetlaniem różnych elementów.
<a href="#img1">Pokaż zdjęcie</a> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnsr1UiUtFhyqUmuc0Wy5RWwJhbSS48_tt24T9DwYYwzOhb-Y2G0Y2yhKf64i7IM0zjx0xBE6mq6Ge8z-0uft5q-rEX447JHkGCe8K1PjKXCwLCBr2STSKZ2974uIBkJA_8qECpDXL-7fm/s912/IMG_4188.jpg" id="img1" />Domyślnie ukryjemy zdjęcie, zaś po kliknięciu w link zostanie ono pokazane.
img[id] {display:none;}
img[id]:target {display:block;}
A oto działający przykład:Pokaż zdjęcie
Dodatkowo można pobawić się jeszcze animacjami (transitions lub animations) dla polepszenia efektu. Niestety skok do miejsca, w którym pojawia się element docelowy jest wbudowany w mechanizm przeglądarki, więc w celu usprawnienia obsługi (np. płynnego przesuwania scrollbara) należy posłużyć się już JavaScript'em.
Polecam przyglądnięcie się także dużo dalej idącym przykładom zastosowania tej metody - jak na przykład przygotowana przez Roberto Breve CSS'owa wersja Lightbox'a.
Jak widać w CSS'ach siła.
2 komentarze:
Po kliknięciu obrazek się pokazuje, a jak zrobić, żeby po ponownym kliknięciu obrazek został jeszcze raz ukryty? Bo raczej nie ma czegoś takiego jak podwójny target.
Najłatwiej zrobić na wyskakującym obrazku link do nieistniejącego targetu, lub do id np. głównego diva - np. #main. Wówczas zmieni się zależność :target i obrazek zniknie
Prześlij komentarz