Den Diebstahl Ihrer Bilder verhindern
(Auszug aus "CSS Kochbuch" von Christopher Schmitt)
Problem
Sie wollen es Leuten erschweren, die Bilder von Ihrer Webseite zu kopieren.
Lösung
Verwenden Sie ein 1 x 1 Pixel großes transparentes GIF als Platzhalter, und umgeben Sie den img-Tag mit einem zusätzlichen div-Element:
<div class="slide">
<img src="singlepixel.gif" alt="" />
</div>Das eigentliche Bild wird mit der Eigenschaft background als Hintergrundbild für das div-Tag definiert. Hierbei ist es wichtig, die korrekte Höhe und Breite sowohl für das div- als auch für das img-Tag anzugeben:
div.slide {
width: 500px;
height: 468px;
background-image: url(face.jpg);
background-repeat: no-repeat;
}
.slide img {
width: 500px;
height: 468px;
}Diskussion
Die Verwendung der 1 x 1 Pixel großen GIF-Datei ist nicht unbedingt notwendig. Im Prinzip können Sie das img-Element auch komplett weglassen. Das Bild wird dann einfach als Hintergrund für das div-Element dargestellt:
<div class="slide"></div>Das transparente Bild wird hier nur zur Tarnung benutzt. Die Benutzer denken, dass sie das gewünschte Bild herunterladen; tatsächlich bekommen sie aber nur eine sinnlose Datei.
Die Image Toolbar von Microsoft
Im Internet Explorer 6 für Windows hat Microsoft eine sogenannte Image Toolbar integriert.
Über dieses Merkmal kann ein Besucher Ihrer Site die enthaltenen Bilder mit einem einfachen Mausklick per E-Mail verschicken, herunterladen oder ausdrucken. Damit diese Image Toolbar nicht angezeigt wird, müssen Sie die folgenden meta-Tags im Kopfteil Ihrer Seite platzieren:
<meta http-equiv="imagetoolbar" content="no" />
<meta http-equiv="imagetoolbar" content="false" / >Für Webentwickler ist es lästig, Code in ihre Seiten einfügen zu müssen, um zu verhindern, dass ein bestimmtes Produkt ihre Bilder stiehlt. Da der Microsoft-Browser aber immer noch am weitesten verbreitet ist, können die Entwickler nicht viel dagegen unternehmen.
Kein Bild ist wirklich sicher
Selbst mit dieser Lösung und der damit ausgeschalteten Image Toolbar sind die Bilder Ihrer Website nicht sicher vor unrechtmäßigem Kopieren.
Oftmals werden Bilder automatisch vom Browser des Benutzers gespeichert. Damit Webseiten schneller wieder geladen werden können, werden sie in einem temporären Ordner abgelegt. Diese zwischengespeicherten Bilder werden nach einer festgelegten Zeit oder durch manuelles Leeren des Browsercaches wieder entfernt.
Allerdings benennen manche Browser die Bilder automatisch um, und die meisten Benutzer wissen nicht einmal, wo die zwischengespeicherten Bilder auf ihrem Computer liegen.
Um ein Bild zu kopieren, ist der einfachste Weg oft die Erstellung eines einfachen Bildschirmfotos. Die gewünschte Grafik kann dann mit einem beliebigen Bildbearbeitungsprogramm "ausgeschnitten" werden.
Zwar können die hier beschriebenen Methoden einige Benutzer vom unerwünschten Herunterladen Ihrer Bilder abhalten; dennoch ist keine Lösung zu 100% sicher.
| << zurück | vor >> |
| Tipp der data2type-Redaktion: Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an: |
Copyright der deutschen Ausgabe © 2007 by O’Reilly Verlag GmbH & Co. KG
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS Kochbuch" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.
O’Reilly Verlag GmbH & Co. KG, Balthasarstr. 81, 50670 Köln