Clientseitige Möglichkeiten

Möglichkeiten zum clientseitigen Austausch von Grafiken

Übersicht / Seite:

1. Hotlinking von Bildern (mit Beispielen für Gegenmaßnahmen)
2. Text in Bilder einfügen (mit PHP, ImageTTFText und geeigneten Fonts)
3. Rewrite Regeln (und Bedingungen für die Auslieferung von Images)
4. Clientseitige Möglichkeiten (zum Austausch von Grafiken)
5. Ein weiteres PHP-Script (zur Einfügung von sichtbaren Wasserzeichen)

Einfacher Austausch mit JavaScript

Ein einfacher Austausch von Fotos und sonstigen in einer HTML-Seite eingebundenen Grafiken, lässt sich, insofern vom Seitenersteller erwünscht,  mit JavaScript problemlos realisieren. Alles, was zur Erfüllung dieser Aufgabenstellung erforderlich ist, umfasst nicht mehr als einen kleinen Codeschnipsel mit einer Funktion, die sich nach dem Laden des Fensters in einem Browser dank dem Event-Handler onload selbständig aktiviert. Weiterhin ist es erforderlich, innerhalb des Image-Tags zusätzlich ein id-Attribut zu notieren. Siehe Beispiel 1 und 2.

Hinzufügen einer ID:

<img id="quelle" src="bild.jpg" alt="Ein Bild" width="480" height="320">

Die nachfolgende Funktion wird bei onload aufgerufen und wechselt mit Hilfe einer DOM-Methode den innerhalb des Image-Tags angegebenen Verweis aus, so das ein anderes Bild geladen wird.

Funktion zum Austausch der Grafik:

<script type="text/javascript">

window.onload = function() {

    document.getElementById("quelle").src = "gesperrte/landschaft-ohne-quelle.jpg";
}
</script>

Der Vorteil dieser Methode besteht darin, wer das im Image-Tag angegebene Bild verlinkt, hat Pech gehabt und bekommt nur ein Bild mit einem Wasserzeichen oder einer Quellenangabe ausgeliefert, jedoch nicht das Bild, welches die Besucher der Seite sehen, vorausgesetzt JavaScript wurde im Browser nicht deaktiviert. Der Nachteil, diese Methode ist zwar recht einfach, jedoch auch ein wenig plump. Etwas aufwendiger, dafür weniger plump ist die nachfolgende Funktion mit Überblendeffekt.

Funktion mit Überblendeffekt

Um mit JavaScript und CSS einen Überblendeffekt zu erreichen, müssen die Grafiken zuerst mit CSS deckungsgleich positioniert werden. CSS bietet unterschiedlichen Möglichkeiten die Position einzelner Elemente zu bestimmen: Im Beispiel wurde die Positionsart absolute gewählt, da die Stylesheet-Angaben mit

style="position:absolute"

dafür sorgen, dass sich beide Grafiken innerhalb des übergeordneten DIV-Bereiches deckungsgleich ausrichten.

Weiterhin ist bei übereinander liegenden Grafiken die Schichtenposition mit Hilfe des z-index anzugeben. Gelegentlich findet sich in diversen Beispielen ein möglichst hoher Wert für den z-index, doch ist eine Angabe, wie

style="z-index:100"

nicht erforderlich. Wenn sich nur 2 Elemente in einem Bereich überlagern, genügt es, diesen beiden Elementen einen z-index von 1 bis 2 zuzuordnen. Wichtig ist hingegen, dass Tauschbild anfänglich auf "display:none" zusetzen.

<div style="width:480px; height:320px">
<img id="quelle1" src="bilder/landschaft-mit-quelle-3.jpg" alt="Ein Bild" width="480" height="320">
<img id="quelle2" src="#" alt="Tauschbild" width="480" height="320" style="display:none">
</div>

Im nachfolgenden Listing wurden zuerst zwei Image-Tags in einem gemeinsamen Bereich notiert, wobei das zweite Image jedoch erst mit einer JavaScript-Funktion geladen wird. Dabei wird dem Tauschbild ein höherer Wert für den z-index zugewiesen sowie die Style-Eigenschaft display von "none" auf "inline" geändert. Nun würde eigentlich nur noch das Bild "landschaft-ohne-quelle.jpg" zu sehen sein. Da aber die Transparenz dieses Bildes anfänglich noch bei 100 % liegt, ist dennoch in der ersten Sekunde nach dem Aufruf der Seite nur das erste Bild zu sehen.

Eigentlich ist es nicht die Transparenz, die anfänglich noch bei 100 Prozent liegt, sondern die Deckkraft, die anfänglich noch bei 0 Prozent liegt.  Um die Angelegenheit noch etwas verwirrender zu gestalten und um Kompatibilitäts­probleme zu vermeiden, sollte noch eine Fallunterscheidung zwischen den Browsern bedacht werden.

Deckkraft / Transparenz

Internet Explorer:
opacity 100 entspricht 0 Prozent Transparenz und 100 Prozent Deckkraft

filter: alpha(opacity = 0 bis 100)

Firefox, Chrome, Opera, Safari, Internet Explorer (ab Version 9):
opacity 1.0 entspricht 0 Prozent Transparenz und 100 Prozent Deckkraft

opacity = 0 bis 1.0

JavaScript-Funktion mit Überblendeffekt:

<script type="text/javascript">
"use strict";

var alpha = 0;
var bild1 = document.getElementById("quelle1");
var bild2 = document.getElementById("quelle2");

window.onload = function() {

    bild1.style.position = "absolute";
    bild1.style.zIndex = 1;
    bild2.src = "gesperrte/landschaft-ohne-quelle.jpg";
    bild2.style.position = "absolute";
    bild2.style.display = "inline";
    bild2.style.zIndex = 2;

    setzeTransparenz();
}

function setzeTransparenz() {

    alpha++;
    var verblasse;

    if (alpha <= 100) {
        verblasse = window.setTimeout("setzeTransparenz()", 80);

        bild2.style.filter  = "alpha(opacity = "+ alpha +")";
        bild2.style.opacity = alpha / 100;
    }
    else if (alpha > 100) {
        window.clearTimeout(verblasse);
    }
}
</script>

Der zeitliche Ablauf bzw. die Zeitdauer des Überblendeffektes kann mit der Methode setTimeout oder setInterval gesteuert werden. Im Beispiel erfolgt die Steuerung mit window.setTimeout, wobei die Funktion im Abstand von 80 Millisekunden erneut aufgerufen wird, ehe die weitere Ausführung mit clearTimeout abgebrochen wird. 100 Aufrufe mal 80 ms ergibt insgesamt eine Verzögerungszeit von 8 Sekunden, bevor die volle Deckkraft des überlagernden Bildes erreicht ist, wobei die angegebene Zeit in Millisekunden beliebig angepasst werden kann.

Das benutzte Script, zum Einfügen von Text in einem transparenten Bereich, stellen wir auf der nächsten Seite vor.

Rewrite Regeln « zurück / weiterlesen » Script für Wasserzeichen