Nie kradnij mojego obrazka!
29 czerwca 2005
Ostatnio Vendro założył sobie fotoblog. Wszedłem z ciekawości. Cóż, layout jak layout, ale zdenerwował mnie dziecinny skrypt "blokujący" prawy klawisz myszy. Nie to, żebym od razu chciał ukraść jego obrazy. Po prostu mam w zwyczaju używać kliknięcia myszrolką, aby uaktywnić tryb przewijania samymi jej ruchami, góra-dół.
Kolega, po moim zwróceniu uwagi, skrypt zdjął. Lecz co z przyczyną, która spowodowała umieszczenie takiego "zabezpieczenia"? Obiecałem, że na coś wpadnę. No i wpadłem. Rozwiązanie proste i niedenerwujące. To znaczy troszkę denerwujące nadal może być - ponieważ sprawiamy, że klik prawym na zdjęciu nie jest naprawdę klikiem na nim samym. ;) No, ale zobaczycie o co chodzi dalej.
Każdy koder domyśli się prosto, że można oszukać użytkownika, nie umieszczając obrazka za pomocą tagu <img/>. Wykorzystamy do tego zwykły <div/>. Aby spełniał funkcje obrazka, należy nadać mu tło. Tło wypozycjonowane do górnej lewej krawędzi i bez powtarzania.
<div style="background: url(photo.jpg) left top no-repeat;"></div>
No dobrze, powiecie. Ale przecież żadna przeglądarka nie wyświetli pustego <div/>. Zgadza się. Należy więc przepisać kod, dodając do środka pojemnika jakiś element. Ja wybrałem element <a/>. Dlaczego - o tym za chwilę.
<div style="background: url(photo.jpg) left top no-repeat;"><a> </a></div>
Tak, popełniłem grzech. Umieściłem encję twardej spacji nie w tekście. Wymusiłem w ten sposób pokazanie się div'a. Pomińmy to proszę. Można użyć też przezroczystego obrazka 1px na 1px, ale to też grzech, a do tego jeszcze gorzej się to kojarzy. Więc pomińmy już ten cholerny enbeespe i zajmijmy się dalszymi problemami.
Otóż teraz pojemnik jest malutki. Widać tylko jego część - część zdjęcia - zawartą pod znakiem twardej spacji. Więc należy zmienić zachowanie elementu <a/>
<div style="background: url(photo.jpg) left top no-repeat;"><a style="display: block; width: 151px; height: 137px;"> </a></div>
Teraz obrazek wreszcie jest obrazkiem. Klikamy prawym. No i nie działa. Nie ma opcji zapisania obrazka, ale możemy wybrać opcję pokazania tła pojemnika. Czas się z tym uporać. :]
<div style="background: url(photo.jpg) left top no-repeat;"><a href="#" style="display: block; width: 151px; height: 137px;"> </a></div>
No i jest okej. No dobrze... prawie okej. Teraz klikając prawym na "obrazek" odwołujemy się do linka a nie do pojemnika. Lecz co z kursorem? Lecz co z linkiem, który mimo wszystko tam jest? Oto ostateczny kod, naprawiający wszystko. To znaczy obchodzący pewne niedogodności.
<div style="background: url(photo.jpg) left top no-repeat;"><a href="#" onclick="return false;" style="cursor: default; display: block; width: 151px; height: 137px;"> </a></div>
Zdarzenie onclick likwiduje dodanie znaczka "#" do paska adresu dokumentu i jego skrolowania do góry. Styl cursor: default likwiduje kursor łapki nad linkiem. Parszywy workaround, ale działa. Sprawdźcie sami:
Zanim odezwą się (słuszne) głosy o likwidowanie linka JavaScriptem, zmianę kursora i ogólnie głupotę bijącą z tego pomysłu, coś powiem. No bo jak można ukrywać obrazek, skoro po coś go tam umieszczamy? Otóż powodów może być parę. Ten sposób nie obroni nas przed przejęciem obrazka - to oczywiste mam nadzieję. Ale umieszczając zdjęcie w necie, uchronimy się przed pokemonami chcącymi sobie porysować po nim. Tymi mniej sprytniejszymi. Albo przed leniami - którzy nie ruszą PrntScrn albo podglądu źródła. Tak czy inaczej efekt czasem bywa szokujący, zwłaszcza dla początkującego - i można go wykorzystać raz czy dwa. Zresztą... ja tu tylko sprzątam. :-)
Jeśli już wiesz o co chodzi, to możesz rozważyć lżejszy (thx dla nbw za zwrócenie uwagi) i również poprawny kod:
<a href="#" onclick="return false;" style="cursor: default; display: block; width: 151px; height: 137px; background: url(photo.jpg) left top no-repeat;"> </a>


