Ich zeige euch heute in unserem Sonntagstutorial, wie man Bilder ohne eine nervige Rechtsklicksperre und viel eleganter schützen kann. Natürlich ist auch dieser Schutz nicht zu 100% sicher, aber es hält lästige Gelegenheitsdownloader ab. Wie dieser Schutz funktioniert? Versucht mal, mein Bild herunterzuladen und schaut euch dann das Bild nochmal auf eurem PC an. Statt das Bild, das ihr downloaden wolltet, habt ihr ein kleines Bild von einem Pixel auf eurem Rechner. Somit sind meine Bilder geschützt!
Wie das geht?
1. Öffnet euren Dashboard, geht auf Vorlage und klickt auf HTML bearbeiten.
2. Sucht mit Strg+F bzw. Apfel+F nach jquery.min.js - nicht gefunden? Dann kopiert diesen Code direkt unter <head>:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>Wenn ihr mehrmals einen -JQuery-Skript findet, dann löscht auf jeden Fall die ältere Versionen (erkennbar an der Zahl, die hier grün markiert wurde)!
3. Direkt über </head> fügt ihr dann noch diesen Code ein:
<script type='text/javascript'>
//<![CDATA[
$(function() {
var pixelSource = 'http://cplove.de/static/CopyPasteLove/Transparent.gif';
var useOnAllImages = true;
// Preload the pixel
var preload = new Image();
preload.src = pixelSource;
$('img').live('mouseenter touchstart', function(e) {
// Only execute if this is not an overlay or skipped
var img = $(this);
if (img.hasClass('protectionOverlay')) return;
if (!useOnAllImages && !img.hasClass('protectMe')) return;
// Get the real image's position, add an overlay
var pos = img.offset();
var overlay = $('<img class="protectionOverlay" src="' + pixelSource + '" width="' + img.width() + '" height="' + img.height() + '" />').css({position: 'absolute', zIndex: 9999999, left: pos.left, top: pos.top}).appendTo('body').bind('mouseleave', function() {
setTimeout(function(){ overlay.remove(); }, 0, $(this));
});
if ('ontouchstart' in window) $(document).one('touchend', function(){ setTimeout(function(){ overlay.remove(); }, 0, overlay); });
});
});
//]]>
</script>
4. Ladet euch das Transparente Bild herunter, und ladet sie auf einem Hoster (Photobucket, TinyPic, Picasa) eurer Wahl hoch. Ersetzt bitte den grün markierten Link im Code mit eurer Bild-Url.
5. Speichern!
6. Löscht den Cache von eurem Browser (Googlet nach: "Cache löschen [Browsernamen]"), falls es nicht gleich funktioniert, und wartet unbedingt ab, bis eure Seite komplett fertig geladen habt - danach sollte es einwandfrei funktionieren! :)
Ich habe das letzte Mal vergessen, danach euch über das Sonntagstutorial abstimmen zu lassen, daher habe ich einfach das Thema aufgegriffen, welches bei der letzten Abstimmung auf dem zweiten Platz war. Ich hoffe, dass ist in Ordnung für euch! :)
Danke an Oasap, die mir für das Beispielbild die süßen Accessoires zur Verfügung gestellt hat. Schaut doch auch mal bei Spartoo, dort findet ihr passende Schuhe von zB. StylistClick.
PS: Man kann noch immer auf "Bild speichern" gehen, jedoch speichert man ein .gif-Bild in der Größe von 1px - das ist das Bild aus Schritt 3, welches grün markiert ist. Man sollte nicht das Bild mit einer anderen Grafik ersetzen, sonst funktioniert das ganze nicht mehr! Wenn es nicht funktioniert, löscht den Cache von eurem Browser, dann ladet die Seite neu. Dieser Schutz - sowie alle andere - funktionieren nicht, wenn jemand euren Blog auf Google Reader oder einen anderen externen RSS Reader liest.
hab das bild gespeichert. ist ein bisschen kleiner aber genauso scharf wie das original :)
AntwortenLöschenIch habe das mit dem Downloaden ausprobiert, abgespeichert, geöffnet und habe das Bild jetzt auf meinem Rechner... Das funktioniert also irgendwie nicht.
AntwortenLöschenIch muss mich leider anschließen. Das Foto ging bei mir auch zu speichern.
AntwortenLöschenJa, das ist leider das Problem mit dem jQuery-Geschichten, die funktionieren erst, wenn die Seite koomplett fertig geladen hat :(
LöschenIch konnte es speichern, aber beim öffnen war das Foto bei mir nur weiß.
AntwortenLöschenDann hats ja geklappt :)
LöschenHabe es gespeichert, aber man sieht nur ein Pixel
AntwortenLöschenDann hat es funktioniert ;)
LöschenAlso direkt von der Seite gedownloaded, funktioniert es. Ich lese aber vieles über den Google-Reader und da funktioniert es nicht.
AntwortenLöschenDas ist tausendmal schöner als diese Rechtsklickssperrtexte :D
AntwortenLöschen♥
Bei mir funktioniert es leider überhaupt nicht. Also muss doch die Rechtsklicksperre weiterhin herhalten. Schade:(
AntwortenLöschenLiebe Grüße!
ich kann das Bild auch nicht sehen, wirklich gute Idee!
AntwortenLöschenhttp://expecting-the-perfect.blogspot.de/
Ich kann das Bild auch nicht sehen, allerdings ist es ja als GIF-Datei gespeichert. Also kann es doch sein, dass man das Bild sieht, wenn man ein Programm auf dem PC hat welches GIF-Dateien erkennt, oder? Das würde auch erklären, warum es bei manchen "klappt" und bei manchen eben nicht :)
AntwortenLöschenNein :)
Löschen:D nicht das einen das davon abhalten könnte ein bild zu bekommen wenn man es haben will aber schon ganz cool :D
AntwortenLöschenBei mir funktionierts leider nicht.. :/
AntwortenLöschenich glaube mein problem ist, dass ich den Cache nicht löschen kann..
Juhu, auf dieses Tutorial habe ich schon lange gewartet! Danke :*
AntwortenLöschenAlso bei mir wird es als GIF-Datei gespeichert und dann per Explorer wieder geöffnet. Und das Bild selbst sehe ich nicht, bleibt weiß. Sollte das Ergebnis so sein? :-O
AntwortenLöschenGenau, so kann keiner deine Bilder runterladen, stattdessen kriegt man ein Bild von einem Pixel.
LöschenBei mir habe ich das jetzt auch probiert (ich hab statt diesem Pixel jedoch eine Grafik gemacht wo draufsteht "Bitte nichts abspeichern!", müsste ja genauso gehen, oder?) Jedenfalls sind dann aufeinmal ALLE Bilder auf meinem Blog beim "hovern" durch diese Grafik ersetzt worden... was mache ich falsch?
AntwortenLöschenSvea, du darfst kein anderes Bild rein setzen, weil es sonst deine Bilder überdeckt. Dieser "Pixel" ist transparent und nicht sichtbar und dient als "unsichtbarer" Schutz. Wenn du eine Grafik stattdessen einfügst, geht die Rechnung bei diesem Tutorial nicht auf!
AntwortenLöschenPer RSS-Reader kann ich das Bild immer noch wunderbar abspeichern. ;-)
AntwortenLöschenIch konnte problemlos das Bild abspeichern - allerdings nur in der email version, die ich bekomme, direkt vomm blog runter geht es nicht.
AntwortenLöschenAch ja - hab' gerade probiert es auf Pinterest zu speichern - geht problemlos....
AntwortenLöschenwow super VIELEN VIELEN lieben dank für das Tut. !!!
AntwortenLöschenJetzt fühl ich mich zumindest ein bisschen sicherer. ich danke euch für eure Tutorials. habe meinen Blog jetzt richtig aufpeppen können!
http://tonycamehl.blogspot.de/
und wenn man über ein Bild geht erscheint gleich mal eine Warnung. Super. Werde eure Tutorials noch durchforsten ob ich etwas neues finde, das ich dazulernen kann.
great job done
bei mir hat das irgendwie nicht funktioniert :/
AntwortenLöschenKlasse Tut :)
AntwortenLöschenmy blog xx
Danke für das Tutorial!
AntwortenLöschenich wollte nochmal sagen, dass eure Bilder in der Sidebar nicht mehr zu den angegeben seiten führen, sondern erscheinen nicht als links, also scheint die verlinkung nicht mehr zu gehen!
lg
Lili
Da bin ich ja beruhigt das es nicht nur bei mir das Problem ist.
LöschenEs ist doch eigentlich fast logisch, das sowas passiert, wenn man das Bild quasi durch einen Pixel ersetzt :D
LöschenIch habe alles befolgt.
AntwortenLöschenLeider funktioniert es nicht? :o
Kannst du mir weiterhelfen?
Mh, mein Kommentar scheint nicht angekommen zu sein. O,o
AntwortenLöschenWollte nur sagen, dass man das Bild ohne Probleme noch über den Feadreader abspeichern kann.
Die von dir gezeigte Möglichkeit ist die am beliebteste bei mir und Kollegen! Leider (leider) gibt es - wie du bereits geschrieben hast - keinen 100%igen Schutz vor Bilder-Klau, denn als letzte Methode bleibt immer der Screenshot :-) Wer etwas erfindet, mit dem selbst das nicht mehr möglich ist, wird reich!
AntwortenLöschenVielen Dank für dein Kompliment !
AntwortenLöschenTolle Idee und immerhin macht es den Bilderdieben das Leben etwas schwerer! :)
Ist vom Grundgedanken her ne tolle Idee. Allerdings werde ich es wieder rausnehmen, denn seit dem ich das eingebaut habe, kann ich kein verlinktes Bild mehr anklicken. Was gerade bei blogging friends & anderem völlig unpraktisch ist.
AntwortenLöschenWir arbeiten daran! :)
AntwortenLöschenjQuery funktioniert ja eh erst dann, wenn die Seite fertig geladen ist...
AntwortenLöschentrotzdem ist es sehr nice und eine schönere Alternative als dieses hässliche Pop-Up, was bei Rechtsklick erscheint... -_-" (und wirkt auch komplett unprofessionell...)
ich konnte es speichern .... !?
AntwortenLöschenTut mir leid dir das jetzt sagen zu müssen aber bei mir wurde das Bild richtig angezeigt und nicht als Pixel :(
AntwortenLöschenKiene Sorge ich downloade keine Bilder von dir;)
Aber danke für das Tutorial! Ich probiere es dann mal bei mir aus.
Oh, ich merke gerade, dass ich die Funktion auf cpl wieder heraus genommen habe :D
LöschenNaja aber die Rechtsklicksperre finde ich auch richtig nervig. Was ist wenn man einen Tag hat und andere tagt? Und sie wollen die Fragen abkopieren um sie zu beantworten? Geht ja auch nicht..
AntwortenLöschenich kann das transparente bild nicht herunterladen. wie geht das?
AntwortenLöschenKomisch bei mir wird das Bild angezeigt, also funktioniert es nur bei manchen oder manchmal oder wie?
AntwortenLöschenLG JuFax3
Also ich habs mit rechtsklick gespeichert und kann es auch ganz normal und in normaler Größe angucken!? Daher kein wirksamer Tipp :(
AntwortenLöschenHaha, ich hab ganz vergessen, dass ich den Code wieder geändert hab, deswegen geht es nicht mehr :D
LöschenSo, jetzt geht es wieder :D
AntwortenLöschenwenn man Mobil online ist kann man sich immernoch alle Bilder problemlos herunterladen..leider.
AntwortenLöschenAlso irgendwie geht das nicht bei mir.. könntet ihr vielleicht ein video dazu machen? dann könnte man ganau sehen wo man was einsetzen muss..
AntwortenLöschenAlso irgendwie geht das bei mir nicht.. Könntet ihr die stellen screenshotten und uns zeigen? oder ein Video dazu drehen?
AntwortenLöschenBei mir hatte ich ein Fehler eingeschlichen. Ich hatte den oberen Code unter /head eingefügt, nicht unter head. Vielleicht geht es ja den Anderen ähnlich?
AntwortenLöschenIch nutze Firefox und konnte das Foto abspeichern und auch beim Öffnen des Fotos ist immer noch das ganze Foto zu sehen, nix verpixelt etc.
AntwortenLöschenGrüsse ♥
Das ist seltsam. Ich nehme mal an, du hast Javascript nicht deaktivert?
LöschenDas Bild konnte ich zwar nicht per Rechtsklick anspeichern, jedoch ist es, nach wie vor möglich, einen Screenshot anzufertigen oder das Bild mit dem Snipping Tool abzuspeichern, so hätte ich es dann auch, wenn ich es denn wollte.
AntwortenLöschenAb jQuery 1.7 und höher muss man die Zeile mit dem .live ersetzen mit
AntwortenLöschen$(document).on('mouseenter touchstart', 'img', function(e) {
Das .live funktioniert ab der Version nicht mehr und die Bilder werden nicht geschützt.