5202

ein Blog über technische Fragen zu Blogger

Praxis: Blogger Bilder ohne Rechtsklick

26. Januar 2012 /

von

Ein mehrere viele Leser haben bemängelt, dass Rechtsklicksperre ohne Javascript eine akademische Übung ohne praktische Relevanz sei. Yeah, was soll ich dazu sagen? Grundsätzlich ist das richtig, das liegt aber auch in der Natur von diesem Web-Log. Ich schreibe hier über alle möglichen Ideen, Einfälle, Skizzen im Zusammenhang mit blogspot.com Blogs und mache kein Tutorial-Blog. Trotzdem mal ein völlig simple Demo für die Idee, Bilder mit einem Pseudoelement in den Blog einzubinden.

Demo

A: Bild mit <img> Tag
B: Bild mit Pseudoelement ::before

Markup

Wie ihr sehen könnt, ist Bild A klickbar und lässt sich mit C/P kopieren, Bild B dagegen nicht. Im Markup ist der Unterschied sofort zu sehen:
Markup Bild A
<div class="separator" style="clear: both; text-align: center;">
<a imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
<img border="0" src="http://goo.gl/GMMFz" /></a></div>
Markup Bild B
<div class="grid"><div class="a1"></div></div>

Erklärung

Bild B besitzt keine <img> Tag, sondern ist ein ganz normaler <div> Container mit jeweils einer eigenen Klasse. Diese braucht ihr, damit ihr später jedem Container das dazugehörige Pseudoelement zuordnen könnt. Diese Zuordnung geschieht mit einer Style-Anweisung, die ihr im HTML-Modus des Editors oben in den Blogpost setzen könnt.
<style>
.grid .a1::before {content:url("http://goo.gl/GMMFz")}
</style>
Und damit das Bild in die Mitte kommt, habe ich noch einen Style-Anweisung mehr geschrieben:
<style>
.grid {
  width: 100%;
 text-align: center;
}
.grid .a1::before {content:url("http://goo.gl/GMMFz")}
</style>
That's all. So simple, so far.

Anmerkung

Update
Problem mit dem IE ist gelöst und mit in den Post eingearbeitet.

Fairerweise sage ich dazu, dass das z.Z. nicht im Internet-Explorer funktioniert - obwohl er dazu eigentlich grundsätzlich in der Lage sein sollte. Aber vieles von Blogger funktioniert z.Z. nicht im Internet Explorer. Wer diesen Browser verwendet muss sich darüber im klaren sein, dass er sich mit ständigen Problemen rumschlagen muss. Also nehmt einen richtigen Browser. Sagt euren Lesern, dass sie einen richtigen Browser nehmen sollen.