Bilder schützen (mit jQuery) ♥


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.

55 Kommentare

  1. hab das bild gespeichert. ist ein bisschen kleiner aber genauso scharf wie das original :)

    AntwortenLöschen
  2. Ich habe das mit dem Downloaden ausprobiert, abgespeichert, geöffnet und habe das Bild jetzt auf meinem Rechner... Das funktioniert also irgendwie nicht.

    AntwortenLöschen
  3. Ich muss mich leider anschließen. Das Foto ging bei mir auch zu speichern.

    AntwortenLöschen
    Antworten
    1. Ja, das ist leider das Problem mit dem jQuery-Geschichten, die funktionieren erst, wenn die Seite koomplett fertig geladen hat :(

      Löschen
  4. Ich konnte es speichern, aber beim öffnen war das Foto bei mir nur weiß.

    AntwortenLöschen
  5. Habe es gespeichert, aber man sieht nur ein Pixel

    AntwortenLöschen
  6. Also direkt von der Seite gedownloaded, funktioniert es. Ich lese aber vieles über den Google-Reader und da funktioniert es nicht.

    AntwortenLöschen
  7. Das ist tausendmal schöner als diese Rechtsklickssperrtexte :D

    AntwortenLöschen
  8. Bei mir funktioniert es leider überhaupt nicht. Also muss doch die Rechtsklicksperre weiterhin herhalten. Schade:(
    Liebe Grüße!

    AntwortenLöschen
  9. ich kann das Bild auch nicht sehen, wirklich gute Idee!
    http://expecting-the-perfect.blogspot.de/

    AntwortenLöschen
  10. 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öschen
  11. :D nicht das einen das davon abhalten könnte ein bild zu bekommen wenn man es haben will aber schon ganz cool :D

    AntwortenLöschen
  12. ♥ Toller Tipp! Danke. Es funktioniert! Aber gleichzeitig lässt sich ein Bild-Url nicht öffnen... Also beispielsweise ein Gadget-Image mit hinterlegtem Url... und dieser geht jetzt nicht mehr...
    Lässt sich das nachträglich noch einbauen bzw. verändern?

    AntwortenLöschen
  13. Bei mir funktionierts leider nicht.. :/
    ich glaube mein problem ist, dass ich den Cache nicht löschen kann..

    AntwortenLöschen
  14. Juhu, auf dieses Tutorial habe ich schon lange gewartet! Danke :*

    AntwortenLöschen
  15. Also 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öschen
    Antworten
    1. Genau, so kann keiner deine Bilder runterladen, stattdessen kriegt man ein Bild von einem Pixel.

      Löschen
  16. Bei 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öschen
  17. Svea, 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öschen
  18. Per RSS-Reader kann ich das Bild immer noch wunderbar abspeichern. ;-)

    AntwortenLöschen
  19. Ich konnte problemlos das Bild abspeichern - allerdings nur in der email version, die ich bekomme, direkt vomm blog runter geht es nicht.

    AntwortenLöschen
  20. Ach ja - hab' gerade probiert es auf Pinterest zu speichern - geht problemlos....

    AntwortenLöschen
  21. wow super VIELEN VIELEN lieben dank für das Tut. !!!

    Jetzt 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

    AntwortenLöschen
  22. bei mir hat das irgendwie nicht funktioniert :/

    AntwortenLöschen
  23. Danke für das Tutorial!
    ich 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

    AntwortenLöschen
    Antworten
    1. Da bin ich ja beruhigt das es nicht nur bei mir das Problem ist.

      Löschen
    2. Es ist doch eigentlich fast logisch, das sowas passiert, wenn man das Bild quasi durch einen Pixel ersetzt :D

      Löschen
  24. Ich habe alles befolgt.
    Leider funktioniert es nicht? :o
    Kannst du mir weiterhelfen?

    AntwortenLöschen
  25. Mh, mein Kommentar scheint nicht angekommen zu sein. O,o
    Wollte nur sagen, dass man das Bild ohne Probleme noch über den Feadreader abspeichern kann.

    AntwortenLöschen
  26. 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öschen
  27. Vielen Dank für dein Kompliment !
    Tolle Idee und immerhin macht es den Bilderdieben das Leben etwas schwerer! :)

    AntwortenLöschen
  28. 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öschen
  29. jQuery funktioniert ja eh erst dann, wenn die Seite fertig geladen ist...
    trotzdem ist es sehr nice und eine schönere Alternative als dieses hässliche Pop-Up, was bei Rechtsklick erscheint... -_-" (und wirkt auch komplett unprofessionell...)

    AntwortenLöschen
  30. Tut mir leid dir das jetzt sagen zu müssen aber bei mir wurde das Bild richtig angezeigt und nicht als Pixel :(
    Kiene Sorge ich downloade keine Bilder von dir;)
    Aber danke für das Tutorial! Ich probiere es dann mal bei mir aus.

    AntwortenLöschen
    Antworten
    1. Oh, ich merke gerade, dass ich die Funktion auf cpl wieder heraus genommen habe :D

      Löschen
  31. Naja 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öschen
  32. ich kann das transparente bild nicht herunterladen. wie geht das?

    AntwortenLöschen
  33. Komisch bei mir wird das Bild angezeigt, also funktioniert es nur bei manchen oder manchmal oder wie?

    LG JuFax3

    AntwortenLöschen
  34. Also ich habs mit rechtsklick gespeichert und kann es auch ganz normal und in normaler Größe angucken!? Daher kein wirksamer Tipp :(

    AntwortenLöschen
    Antworten
    1. Haha, ich hab ganz vergessen, dass ich den Code wieder geändert hab, deswegen geht es nicht mehr :D

      Löschen
  35. wenn man Mobil online ist kann man sich immernoch alle Bilder problemlos herunterladen..leider.

    AntwortenLöschen
  36. Also 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öschen
  37. Also irgendwie geht das bei mir nicht.. Könntet ihr die stellen screenshotten und uns zeigen? oder ein Video dazu drehen?

    AntwortenLöschen
  38. Bei 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öschen
  39. Ich nutze Firefox und konnte das Foto abspeichern und auch beim Öffnen des Fotos ist immer noch das ganze Foto zu sehen, nix verpixelt etc.
    Grüsse ♥

    AntwortenLöschen
    Antworten
    1. Das ist seltsam. Ich nehme mal an, du hast Javascript nicht deaktivert?

      Löschen
  40. Das 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öschen
  41. Ab jQuery 1.7 und höher muss man die Zeile mit dem .live ersetzen mit

    $(document).on('mouseenter touchstart', 'img', function(e) {

    Das .live funktioniert ab der Version nicht mehr und die Bilder werden nicht geschützt.

    AntwortenLöschen

Danke für dein Kommentar! Bitte beachte, dass Beleidigungen & Spam ohne Vorwarnung gelöscht werden. Bitte hab Verständnis dafür, dass wir nicht alle Kommentare beantworten können!

Falls ein Tutorial nicht funktioniert hat, dann schreibe bitte in deinem Kommentar genau, was nicht funktioniert & deinen Bloglink. So kann dir besser geholfen werden!

Du möchtest dich direkt an Mira wenden, um ein Problem zu lösen oder ein Design erstellen zu lassen? Dann schaue doch hier vorbei und melde dich!

 
Lass dir dein Blogdesign von mir gestalten!