Obwohl ich da nicht mehr aktiv bin, lese ich ab und zu noch im Blogger-Forum mit und bin immer wieder erstaunt, was für Emotionen bestimmte Themen erzeugen - Stichwort Rechtsklicksperre ... heheh. Okay, solche Klicksperren sind im Grunde sinnlos und zu dem Thema ist eigentlich alles gesagt (nur noch nicht von jedem), aber wer seine Bilder umbedingt a bisserl schützen will, warum nicht? Als Variation hier eine Skizze _ohne_ Javascript, einzig und allein mit Pseudoklassen gebaut.
Gallerie
Klickt auf ein Thumbnail und versucht das große Bild Rechtszuklicken ... es wird nicht funktionieren!Markup
Und warum funktioniert der Rechtsklick nicht? Weil es schlicht und einfach nix gibt, auf was ihr klicken könntet. Das Markup schaut so aus:<div class="grid"> <a class="a1" tabindex="1"></a> <a class="a2" tabindex="1"></a> <a class="a3" tabindex="1"></a> <a class="a4" tabindex="1"></a> <a class="a5" tabindex="1"></a> <a class="a6" tabindex="1"></a> <a class="a7" tabindex="1"></a> <a class="a8" tabindex="1"></a> <a class="a9" tabindex="1"></a> <a class="a10" tabindex="1"></a> <a class="a11" tabindex="1"></a> <a class="a12" tabindex="1"></a> <a class="a13" tabindex="1"></a> <a class="a14" tabindex="1"></a> <a class="a15" tabindex="1"></a> <a class="a16" tabindex="1"></a> <div class="frame" title="zum schließen klicken"></div> </div>That's all! Nur reine leere, pure Anker-Elemente ohne URL, sonst nichts. Das beste ist, alle schönen Tricks und Kniffe die im Internet empfohlen werden, funktionieren hier nicht. Wer euch eure Bilder mopsen will, muss den Quelltext auslesen oder Bildschirmfoto machen.
CSS
Die Bilder werden mit zwei Pseudoklassen dargestellt - sowohl die kleinen Bilder, als auch die großen Bilder durch Klick auf das Thumbnail. Die Ladezeiten von der Galerie bleiben also schön kurz, weil die Bilder wirklich erst im Augenblick des Klicks geladen werden. Der Nebeneffekt dabei ist, das durch die Pseudoklasse
:focus die Bilder quasi 'unklickbar' werden, weil jeder Klick ein Ereignis auslöst und nicht das Kontextmenü. Und dagegen kann man - anders als bei Javascript - nichts machen, weil man das CSS nicht 'ausschalten' kann. Beziehungsweise könnte man das schon, nur bringt einem das nichts, weil die Bilder nicht im Markup stecken, sondern in der CSS..grid {
width: 300px;
margin: 0 auto;
}
.grid a {
float: left;
outline: 0;
padding: 2px;
border: 1px solid #ddd;
width: 52px;
height: 60px;
margin: 2px;
text-align: center;
vertical-align: middle;
cursor: pointer;
text-decoration: none;
}
.grid a:focus ~ .frame:before {
content: "";
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #fff;
opacity: 1;
z-index: 100;
}
.grid a.a1:after {content:url("http://goo.gl/M4zP3")}
.grid a.a2:after {content:url("http://goo.gl/lNqSw")}
.grid a.a3:after {content:url("http://goo.gl/hBzbX")}
.grid a.a4:after {content:url("http://goo.gl/7z2Sm")}
.grid a.a5:after {content:url("http://goo.gl/52dtm")}
.grid a.a6:after {content:url("http://goo.gl/BcNqi")}
.grid a.a7:after {content:url("http://goo.gl/SGVAQ")}
.grid a.a8:after {content:url("http://goo.gl/NV6XJ")}
.grid a.a9:after {content:url("http://goo.gl/2wQvZ")}
.grid a.a10:after {content:url("http://goo.gl/0ZJME")}
.grid a.a11:after {content:url("http://goo.gl/a6EC9")}
.grid a.a12:after {content:url("http://goo.gl/1JGFl")}
.grid a.a13:after {content:url("http://goo.gl/iQ58n")}
.grid a.a14:after {content:url("http://goo.gl/O9WEp")}
.grid a.a15:after {content:url("http://goo.gl/khWLa")}
.grid a.a16:after {content:url("http://goo.gl/3i6b5")}
.grid a.a1:focus ~ .frame:before {content:url("http://goo.gl/fwf9y");}
.grid a.a2:focus ~ .frame:before {content:url("http://goo.gl/9iEGP");}
.grid a.a3:focus ~ .frame:before {content:url("http://goo.gl/qycuj");}
.grid a.a4:focus ~ .frame:before {content:url("http://goo.gl/67Esy");}
.grid a.a5:focus ~ .frame:before {content:url("http://goo.gl/Yxg30");}
.grid a.a6:focus ~ .frame:before {content:url("http://goo.gl/Zvwmt");}
.grid a.a7:focus ~ .frame:before {content:url("http://goo.gl/O95x4");}
.grid a.a8:focus ~ .frame:before {content:url("http://goo.gl/cBSnr");}
.grid a.a9:focus ~ .frame:before {content:url("http://goo.gl/iyzgn");}
.grid a.a10:focus ~ .frame:before {content:url("http://goo.gl/FTL6H");}
.grid a.a11:focus ~ .frame:before {content:url("http://goo.gl/MAO03");}
.grid a.a12:focus ~ .frame:before {content:url("http://goo.gl/Pg4qJ");}
.grid a.a13:focus ~ .frame:before {content:url("http://goo.gl/E39uz");}
.grid a.a14:focus ~ .frame:before {content:url("http://goo.gl/uhKmz");}
.grid a.a15:focus ~ .frame:before {content:url("http://goo.gl/CkAiD");}
.grid a.a16:focus ~ .frame:before {content:url("http://goo.gl/fhAKt");}
