Javascript « lab111

FLIR statt sIFR und @font-face?

12. August 2008, Keine Kommentare

FLIR unter der Haube

Träum nicht mehr von der @font-face Unterstützung in Safari! Es gibt jetzt eine neue Technik, die sich «Facelift Image Replacement» nennt, auch kurz: FLIR. Alle Browser, die Javascript und Bilder anzeigen können (Also fast alle Browser ) unterstützen diese Technik. PHP und die GD Library machen den Rest.

Die Technik

Zuerst liest ein Javascript den Inhalt des Elements aus, das ersetzt werden soll und übergibt sie an ein PHP Skript.
Das PHP Skript erstellt dann ein Bild, das den Inhalt mit der bestimmten Schriftformatierung und Schriftart (die vorher natürlich durch eine ttf Datei URL angegeben wird) anzeigt.
Das Javascript ersetzt den Text durch das Bild.

Interessant zu erwähnen ist auch, dass das PHP Skript ein halbdurchsichtiges png Bild erzeugt. Das bedeutet, dass Hintergrundfarbe/-bild durch das Bild durchscheinen wird und somit auch funktioniert.

Nachteile?

Der Text kann nicht selektiv kopiert werden, sondern nur als ganzer Text (wegen dem alt Attribut des Bildes) oder als ganzes Bild.
Da Javascript nur dann einsetzt, wenn die Seite fertig geladen ist, gibt es ein kurzes Aufblitzen von unformatierten Text.

An alternative to sIFR: Facelift Image Replacement | Breathe new life into your web pages

FancyShadow

23. Juli 2008, Keine Kommentare

Sommer Special

FancyShadow auf Bildern angewandt

Hast du dich schon mal gefragt, wie ich diese schönen Schattenwürfe bei meinem Wood Theme auf den Bildern angewendet habe? Die sind eigentlich ganz leicht zu machen mit einbisschen CSS, xHTML und Javascript. Javascript, weil wir in unserer xHTML Datei keine unnötigen, unsemantischen <div> Tags haben wollen .

Ich habe dafür eine ganz einfache, simple Mootools Klasse geschrieben, den ich kurzerhand FancyShadow getauft habe, die den xHTML Code automatisch generiert.

Nettuts trifft Mootools

14. Juli 2008, Keine Kommentare

Wow! Die Leute von Nettuts haben die Genialität von Mootools auch entdeckt! Früher haben sie immer jQuery benutzt, aber in ihrem letzten Tutorial geben sie sogar zu, dass jQuery langsam zu überfüllt wirkt .

Nettuts - Create a Simple, Powerful Product Highlighter with MooTools

Mootools 1.2 – Was gibt’s Neues?

26. Juni 2008, 1 Kommentar

Wow. Ich konnte mir gar nicht ausmalen welcher Schaden eine neue Mootools Version ausrichten kann! Alle meine Skripte, die auf Mootools v1.11 basiert haben funktionieren nicht mehr . Aber glücklicherweise bin ich ein ganz fleißiger Mensch und habe meine Skripte auf Mootools v1.2 umgestellt . Schweißtreibende Arbeit. Glaubt mir! Ich musste stundenlang in der Dokumentation nachschlagen welche Funktion, jetzt wie heißt…