Guten Tag liebe Leserinnen und Leser,
ich möchte euch heute eine kleine Javascript-Datei von James Padolsey vorstellen. Diese ermöglicht es, ohne den Austausch von Bildern, Bilder grau einzufärben. Die “alten Hasen” wissen, sicher das es im Internet Explorer gibt, der dieses ebenfalls ermöglicht. Der Clou ist, das James’ Javascript-Datei auch in “den anderen” Browsern arbeitet. (Safari ab Version 4, Firefox ab Version 2, Chrome ab Version 2 und Internet Explorer ab Version 6)
Erstmal eine kleine Demo, damit ihr wisst was euch erwartet:
Beim Herüberfahren mit der Maus wird das Bild grau. Beim Verlassen des Bildes mit der Maus, wird das Bild wieder “normal”.
Wie funktioniert das ganze?
Also als erstes braucht ihr die Javascript-Datei, die findet ihr unter: http://james.padolsey.com/demos/grayscale/grayscale.js (Rechtsklick -> speichern unter).
<script type="text/javascript" src="grayscale.js"></script>
Die Zeile im Head-Bereich eurer HTML-Seite bindet das ganze ein. Nun erstellen wir 2 einfache Funktionen zum “Grayscalen” und Zurücksetzen.
<script type="text/javascript">
function do_grayscale(id) {
var el = document.getElementById(id );
grayscale( el );
}
function do_ungrayscale(id) {
var el = document.getElementById(id );
grayscale.reset( el );
}
</script>
Ihr müsst, wenn ihr eine der Funktionen aufruft, immer die ID übergeben.
In meinem Beispiel habe ich einen Block (div) um das Bild gemacht und ihm die ID “test” gegeben.
<div id="test"><img src="meinbild.jpg" alt=""
onmouseout="javascript:do_ungrayscale('test');"
onmouseover="javascript:do_grayscale('test');" /></div>
Das ist der Code vom Beispiel oben.
Natürlich könnte man die Funktionen in der Javascript Datei auch direkt aufrufen, aber so ist mehr Platz für Anpassungen.
Den Original-Beitrag (englisch) von James Padolsey findet ihr hier.
Ich hoffe Ihr könnt was damit anfangen, gerade bei vielen Bildern, die in Graustufen dargestellt werden sollen, lohnt es sich, nicht immer neue Bilder erstellen zu müssen.
Kommentare, Fragen, Verbesserungsvorschläge oder Ähnliches sind natürlich immer gern gesehen.
Soweit erstmal von mir
Chris