Tipps & Tutorials, tutorial

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?
Statt das Bild, was per Rechtsklick gespeichert werden soll, wird ein Pixel großes Bild gespeichert. Somit sind eure 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 = 'TRANSPARENT.GIF BILDURL HIER EINSETZEN';
    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 “TRANSPARENT.GIF BILDURL HIER EINSETZEN” 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! 🙂

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 Comments

  1. Tina´s PicStory

    24. February 2013 at 17:01

    hab das bild gespeichert. ist ein bisschen kleiner aber genauso scharf wie das original 🙂

  2. lichtmalerin

    24. February 2013 at 17:01

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

  3. Theresa

    24. February 2013 at 17:04

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

    1. Mira Ho

      24. February 2013 at 17:09

      Ja, das ist leider das Problem mit dem jQuery-Geschichten, die funktionieren erst, wenn die Seite koomplett fertig geladen hat 🙁

  4. Sarah

    24. February 2013 at 17:09

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

    1. Mira Ho

      24. February 2013 at 17:12

      Dann hats ja geklappt 🙂

  5. Isa

    24. February 2013 at 17:10

    Habe es gespeichert, aber man sieht nur ein Pixel

    1. Mira Ho

      24. February 2013 at 17:11

      Dann hat es funktioniert 😉

  6. Sabrina

    24. February 2013 at 17:12

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

  7. headlessandhappy

    24. February 2013 at 17:13

    Das ist tausendmal schöner als diese Rechtsklickssperrtexte 😀

  8. Blaubarschmaedl

    24. February 2013 at 17:20

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

  9. Bella Berlin

    24. February 2013 at 18:06

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

  10. Christiane

    24. February 2013 at 18:17

    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 🙂

  11. Nyro

    24. February 2013 at 18:18

    😀 nicht das einen das davon abhalten könnte ein bild zu bekommen wenn man es haben will aber schon ganz cool 😀

  12. Diana Emilia

    24. February 2013 at 18:19

    ♥ 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?

    1. Mira Ho

      27. February 2013 at 23:34

      Wir arbeiten daran! 🙂

  13. Ronja

    24. February 2013 at 18:34

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

  14. Miss Zimt

    24. February 2013 at 18:36

    Juhu, auf dieses Tutorial habe ich schon lange gewartet! Danke :*

  15. Maho

    24. February 2013 at 18:58

    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

    1. Mira Ho

      24. February 2013 at 19:08

      Genau, so kann keiner deine Bilder runterladen, stattdessen kriegt man ein Bild von einem Pixel.

  16. Anonym

    24. February 2013 at 19:01

    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?

  17. Mira Ho

    24. February 2013 at 19:07

    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!

  18. Raine

    24. February 2013 at 21:12

    Per RSS-Reader kann ich das Bild immer noch wunderbar abspeichern. 😉

  19. fun stamping

    25. February 2013 at 1:22

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

  20. fun stamping

    25. February 2013 at 1:23

    Ach ja – hab' gerade probiert es auf Pinterest zu speichern – geht problemlos….

  21. Tony Camehl

    25. February 2013 at 10:09

    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

  22. missmy

    25. February 2013 at 15:46

    bei mir hat das irgendwie nicht funktioniert :/

  23. Mademoiselle L.

    25. February 2013 at 18:15

    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

    1. Sandra von CookieLove

      26. February 2013 at 18:58

      Da bin ich ja beruhigt das es nicht nur bei mir das Problem ist.

    2. Mademoiselle L.

      27. February 2013 at 16:12

      Es ist doch eigentlich fast logisch, das sowas passiert, wenn man das Bild quasi durch einen Pixel ersetzt 😀

  24. Schoko Monstah

    25. February 2013 at 20:27

    Ich habe alles befolgt.
    Leider funktioniert es nicht? 😮
    Kannst du mir weiterhelfen?

  25. Raine

    25. February 2013 at 23:51

    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.

  26. TEST

    26. February 2013 at 11:49

    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!

  27. ƒ.c.ƒ

    26. February 2013 at 18:59

    Vielen Dank für dein Kompliment !
    Tolle Idee und immerhin macht es den Bilderdieben das Leben etwas schwerer! 🙂

  28. AnniesBeauty House

    27. February 2013 at 12:22

    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.

  29. Gitte

    28. February 2013 at 9:10

    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…)

  30. Méliá Pink

    2. March 2013 at 12:21

    ich konnte es speichern …. !?

  31. MadameJessi

    2. March 2013 at 19:06

    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.

    1. Mira Ho

      2. March 2013 at 20:29

      Oh, ich merke gerade, dass ich die Funktion auf cpl wieder heraus genommen habe 😀

  32. Ines Caranaubahx

    10. March 2013 at 20:52

    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..

  33. Anonym

    27. March 2013 at 11:13

    ich kann das transparente bild nicht herunterladen. wie geht das?

  34. Juliana Fabula

    21. April 2013 at 10:41

    Komisch bei mir wird das Bild angezeigt, also funktioniert es nur bei manchen oder manchmal oder wie?

    LG JuFax3

  35. Melia Pink

    7. July 2013 at 18:59

    Also ich habs mit rechtsklick gespeichert und kann es auch ganz normal und in normaler Größe angucken!? Daher kein wirksamer Tipp 🙁

    1. lovemira

      7. July 2013 at 22:07

      Haha, ich hab ganz vergessen, dass ich den Code wieder geändert hab, deswegen geht es nicht mehr 😀

  36. lovemira

    7. July 2013 at 22:09

    So, jetzt geht es wieder 😀

  37. Shanty Core

    24. August 2013 at 1:07

    wenn man Mobil online ist kann man sich immernoch alle Bilder problemlos herunterladen..leider.

  38. Fatima Z.

    13. September 2013 at 21:38

    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..

  39. Fatima Z.

    13. September 2013 at 21:38

    Also irgendwie geht das bei mir nicht.. Könntet ihr die stellen screenshotten und uns zeigen? oder ein Video dazu drehen?

  40. Jabelchen

    13. October 2013 at 13:54

    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?

  41. Madame Diana

    4. February 2014 at 10:51

    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 ♥

    1. lovemira

      4. February 2014 at 12:07

      Das ist seltsam. Ich nehme mal an, du hast Javascript nicht deaktivert?

  42. Sascha Kolek

    12. April 2014 at 23:01

    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.

  43. Creepy

    14. April 2015 at 17:49

    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.

Leave a Reply