Auf der Suche nach einer guten Lösung um Bilder mit Schatten zu versehen, bin ich über diese beiden Lösungen gestolpert. Bei der ersten werden mehrere divs verwendet, um einen schönen Schatteneffekt zu erzeugen. Ähnlich wie bei den gerundeten Ecken. Dami kann man Schatten rund um das Bild herum erzeugen.

Die andere Lösung benutzt ein einziges, allerdings recht grosses Hintergrundbild, das den Schatten darstellt. Dies hat den Nachteil, dass die Bildgrösse beschränkt ist, allerdings wird nur ein div verwendet. Zudem ist ein Hintergrundbild, dass die grösse von 1000x1000 Pixel hat nur rund 4Kb gross.

Ich suche allerdings noch eine Lösung, die gar keine divs benötigt. Allerdings muss man dafür noch auf CSS 3 warten. Und vorallem auf die Umsetzung in den Webbrowsern.

Über Konnichi wa bin ich auf ein Thema gestossen, dass mich früher auch mal beschäftigte. Der Bilderklau.
Eigentlich gib es zwei Varianten von Bilderklau. Das Bild wird abgespeichert und auf dem eigenen Server gehostet oder das Bild wir einfach verlinkt. Die zweite Varianten nennt man auch Traffic-Klau und darauf möchte ich nun genauer eingehen.

Zum einen gibts da die Möglichkeit, die Bilder einfach umzubenennen und/oder einfach ein anderes Bild an der Stelle platzieren. Diese Variante ist einfach, bringt langfristig aber wenig, da man einfach auf das neue Bilder verlinken kann.

Eine andere Methode habe ich bei Webmaster Resource gefunden. Dort wird das Bild mit PHP in mehrere Stücke zerlegt und dann mit einer Tabelle angezeigt. Für einen Anfänger wird es so schwieriger, da er nicht einfach auf das Bild linken kann, sondern den ganzen Code kopieren muss. Für einen erfahrenen Webdesign allerdings kein Problem.

Eine auch schon sehr bekannte Variante ist die folgende. Man macht eine Tabelle, definiert das zu schützende Bild als Hintergrund und legt ein transparentes Bild davor. Wie schon die Variante davor, nützt das nichts gegen erfahrene Webdesigner. Ein Beispielcode sieht so aus:

<table background="img/bild.jpg">
  <tr>
    <td>
      <img src="img/transparentes_bild.gif" width="200" height="150" alt="" />
    </td>
  </tr>
</table>

Eine effektivere Methode ist htaccess. Damit wird der Referer, also die Seite von der der Besucher kommt, abgefragt. Wenn der Referer nicht die eigene Seite ist, wird ein anderes Bild angezeigt. Einfach und effektiv, funktioniert aber leider nur mit Apache und mod_rewrite.

RewriteEngine OnRewriteCond %{HTTP_REFERER} !^http://.*webseite\.ch/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^http://.*webseite\.ch*$ [NC]
RewriteCond %{HTTP_REFERER} !^$
RewriteRule ^(.*)jpg$ http://www.webseite.ch/images/bilderklau.jpg [L,R]

Fazit:
Wirklich verhindern, kann man den Bilderklau nicht. Allerdings kann man mit wenig Aufwand zumindest den Trafficklau vermindern.

Ich bin auf der Suche nach einer guten Lösung um die ecken von einem Block abzurunden. Dazu gibts ja bekanntlich mehrere Möglichkeiten. Zum Beispiel mit Tabellen, JavaScript und zum Glück auch mit CSS.


Eine Lösung, die gut aussieht, findet man unter Sova v siti. Allerdings gruselt es mich, wenn ich diesen HTML-Code sehe:

<div class="uedge">
  <div class="redge">
    <div class="bedge">
      <div class="ledge">
        <div class="ulcorner">
          <div class="urcorner">
            <div class="blcorner">
              <div class="brcorner">
                <div class="innercontent">
                  <p>Content of the box goes here.</p>
                  <p>The box can be of any width and height. The width of this one is 40% of its containing block.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Varianten, die mir besser gefallen sind hier und hier zu finden.
Eine Lösung, die ohne Bilder auskommt, aber leider nur mit dem Mozilla funktioniert gibts auch

Und zum Schluss noch eine Liste mit mehreren zusätzlichen Lösungen.

Nochmals ein kleiner Beitrag zum einbinden von YouTube Viideos. Bei meinem ersten Beitrag habe ich beschrieben, wie man YouTube/Google Videos valide in eine Hoempage einbinden kann. Allerdings ist mir später etwas aufgefallen. Wenn über die ganze Seite ein Layer geöffnet wird, scheint der Video durch. Das Layer geht also "hinten durch". Zu sehen unter Diverses beim Thema "Für Siebenschläfer" ein Clocky anklicken und dann nach unten scrollen. Sieht nicht so schön aus. Oder?
Die Lösung des Problems habe ich auf der LightBox Seite gefunden.
Man muss einen zusätzlichen Param Tag einsetzen.

Neu sieht das dann so aus:

<object type="application/x-shockwave-flash" style="width: 425px; height: 350px" data="http://www.youtube.com/v/IvnU64S2Pho">
<param name="movie" value="http://www.youtube.com/v/IvnU64S2Pho" />
<param name="wmode" value="transparent" />
</object>

Ein Beispiel. Einfach ein Bild anklicken.