Das PlugIn unterstützt eine Vielzahl von Medien-Seiten wie Flickr, Google Images, Picasa, Facebook und viele mehr. Auch werden Medien-RSS-Feeds als Quelle akzeptiert. Ist die Browser-Erweiterung einmal installiert, erscheint nun ein Abspielknopf auf dem Bild einer Web-Galerie, sobald man mit der Maus darüber fährt. Betätigt man diesen, gelangt man auch schon in die Fullscreen-Ansicht von PicLense. Gleich zu Beginn werden die Medien in der sogenannten Wall präsentiert. Hier werden alle Bilder der Gallery in einer 3D-Ansicht angezeigt. Dabei spielt es keine Rolle, wie viele Bilder die Webseite gerade präsentiert hat, PicLense lädt die Medien selbständig im Hintergrund nach. Natürlich kann ein Bild mittels Doppel-Klick auch im Vollbild-Modus betrachtet werden. Und Vollbild bedeutet hier auch Vollbild und nicht nur ein vergrößertes Browserfenster. Eine Diashow ist natürlich ebenfalls integriert. Hat man seine gewünschte Medien-Datei gefunden, reicht ein Klick um wieder zurück zum Browser auf die Ergebnisseite zu gelangen. Sei noch angemerkt, dass es für WordPress eine einfache Integration gibt, damit private Blogger ihre Galerien ebenfalls in 3D präsentieren können!

Update:

PicLense wurde nun zu CoolIris umbenannt.

Die Abkürzung HTC steht für HTML Component. Durch solche Komponenten kann man das Verhalten bestimmter HTML-Elemente definieren und sauber auslagern. Dazu werden Programmabläufe in JScript bzw. VBScript ausgewählten Ereignissen bestimmter Elemente zugeordnet. Eingebunden werden diese Komponenten mittels dem nicht Standardkonformen CSS-Attribut behavior: url(datei.htc). Da dies nur der Internet Explorer versteht, wird auf diesem Weg Code eingebunden, der ausschließlich für diesen Browser gültig ist. So zum Beispiel auch ein Script, das den Microsoft-PNG-Filter den einzelnen Grafikelementen einer Seite automatisch zuordnet.

Dies macht das “IE PNG Fix“, welches auf TwinHelix vorgestellt wird und für den Internet Explorer ab der Version 5.5 eingesetzt werden kann. Hierbei handelt es sich um die gleiche technische Grundlage, die im Artikel “PNG im Internet Explorer” beschrieben wird. Nur werden diese CSS-Informationen automatisch mittels eines HTCs den einzelnen Elementen zugeordnet. Man muss sich somit in der Gestaltung der Style-Sheet-Dateien diesbezüglich keine gesonderten Überlegungen machen.

Wie oben schon angesprochen handelt es sich bei dem CSS-Attribut behavior um kein Standardkonformes Attribut, was dazu führt, dass eine CSS-Validierung fehlschlägt. Man kann allerdings solche Überprüfungen ggf. austricksen, indem man das HTC mittels eines JavaScripts einbindet. Der Code hierfür wird im mitgelieferten Beispiel in den Sourcen dargestellt und ist hier nochmals aufgelistet:

<script type="text/javascript">
    if (document.all && document.styleSheets && document.styleSheets[0] && document.styleSheets[0].addRule)
    {
        // Feel free to add rules for specific tags only, you just have to call it several times.
        document.styleSheets[0].addRule('*', 'behavior: url(iepngfix.htc)');
    }
</script>

Um diesen Browser dazu zu bewegen, die normierte Transparenz einer PNG-Datei anzuzeigen, müssen einige Kniffe vollzogen werden. Der Grundschritt besteht im Einsatz des Microsoft-Filters AlphaImageLoader. Bei Grafiken, direkt im Inhalt einer Seite, kann der Internet Explorer mit folgendem Konstrukt zur Transparenz überredet werden (für diesen Anwendungsbereich gibt es im Web auch unterschiedliche JavaScript-Programme, welche nachträglich alle IMG-Tags entsprechend erweitern. Bitte beachten: Wenn mittels der Filteranweisung ein Bild einem IMG-Tag hinzugefügt wird, dann sollte die Source auf ein transparentes GIF zeigen.):

<img src="blank.gif" width="xxx" height="xxx" alt="xxx" style="filter:
progid:DXImageTransform.Microsoft.AlphaImageLoader(src='Bild.png');" >

Werden allerdings PNG-Grafiken mittels CSS-Definitionen als Hintergrundbilder in HTML-Elemente wie z.B. dem DIV eingesetzt, muss man schon mehrere Schritte unternehmen:

1. Es muss unterschieden werden, ob ein moderner Browser oder der Internet Explorer 5.5 – 6.x die Webseite besucht.
2. Für den Internet-Explorer muss der Filter im Cascading Style Sheet (CSS) angegeben werden.
3. Hyperlinks in HTML-Elementen mit PNG-Hintergrund müssen ggf. gesondert behandelt werden.

1. Die Browser-Weiche

Das Ziel dieser Weiche besteht in der Ermittlung des Browsers, welcher eine Anfrage an den Webserver stellt. Dies ist von Nöten, da wir für den Internet Explorer eine spezielle Filterdefinition im CSS (siehe unten) benötigen, die wiederum andere Browser nicht verstehen.

Die PHP-Weiche

Es gibt unterschiedliche Möglichkeiten das Problem mit der Filterzuordnung zu lösen. Eine von mir bevorzugte Lösung besteht darin, unterschiedliche Style-Sheet-Dateien zu erstellen, eine für moderne Webbrowser und eine für den Internet Explorer 5.5 – 6.x. Diese Dateien können dann abhängig vom Browser-Request in die Webseite eingebunden werden. Der fragende Browser kann mittels PHP ermittelt werden. Der Aufruf “<?php echo $_SERVER ["HTTP_USER_AGENT"]; ?>” liefert hier beispielsweise “Mozilla/4.0 (compatible; MSIE 5.01; Windows NT 5.0)“. Bedient man sich nun der PHP-Funktion strstr(), kann man feststellen, ob ein bestimmter Teilstring in dieser Angabe vorkommt. Uns interessiert hier das Vorkommen von “MSIE 5” und “MSIE 6” (Der Internet Explorer 7 kommt mit PNG-Grafiken zurecht, versteht allerdings auch die Filter. Theoretisch reicht auch eine Prüfung auf ausschließlich “MSIE“). Eine PHP-Weiche könnte nun folgendermaßen aussehen:

<?php
    if ((strstr($_SERVER["HTTP_USER_AGENT"], "MSIE 5"))
        ||
        (strstr($_SERVER["HTTP_USER_AGENT"], "MSIE 6"))) {
?>
    <style type="text/css" media="screen">
        /* IE 5-6 : modifiziere Hauptstylesheet
                    oder binde neues ein  */
    </style>
<?php
    } else {
?>
    <style type="text/css" media="screen">
        /* moderne Browser: modifiziere Hauptstylesheet
                            oder binde neues ein  */
    </style><?php
    }
?>

Die Kommentar-Weiche in der HTML

Ein weiterer Weg besteht im Einsatz einer Kommentar-Weiche direkt im HTML-Code, welche der Internet-Explorer versteht. Hier kann sogar ein Versionsvergleich des Browsers eingebaut werden. Das folgende Beispiel definiert eine CSS-Anpassung speziell für den IE zwischen der Version 5.5 und 6.x.

<!--[if lt IE 7]>
<!--[if gte IE 5.500]>
    <style type="text/css">
        /* definiere hier speziell für den Internet Explorer */
    </style>
<![endif]-->
<![endif]-->

Der CSS-Hack

Es ist nicht wirklich schön, aber eine weitere Möglichkeit der Unterscheidung besteht im Ausnutzen der differenzierten Interpretation der CSS-Definitionen. Der Internet Explorer in der Version 5.x-6.x versteht die CSS-Schreibweise “html > body #TagID {}” nicht. Dafür kommt er als einziger mit der Schreibweise “* html #TagID {}” zurecht (für ihn ist also das HTML-Element nicht das Root-Element). So ist es uns möglich, zwei unterschiedliche CSS-Definitionen für ein und dasselbe Element in eine CSS-Datei einzubinden. Dies geht allerdings nur solange gut, wie die Browser entsprechend nicht dazu lernen! (siehe auch: Webseite von Kristof Lipfert).

2. Microsoft-Filterdefinition im CSS

Für den Internet-Explorer muss der Microsoft-Filter AlphaImageLoader im Style-Sheet angegeben werden. Dieser Filter lädt das PNG Bild ein und präsentiert dieses mitsamt der Transparenz. Der Parameter sizingMethod='scale' sorgt dafür, dass das Bild ggf. gestreckt oder in einer Wiederholung dargestellt werden kann.

ACHTUNG: Die Bild-URL in der Filterdefinition darf keine Sonderzeichen, wie z.B. ein Leerzeichen enthalten, ansonsten kann es passieren, das sich das PNG-Hintergrundbild des entsprechenden HTML-Elements (meist DIV) ungewollt an die obere Kante des Vorgänger-Elements ausrichtet! Auch sollte hier die URL immer komplett angegeben werden.

Das folgende Beispiel definiert für ein HTML-Element ein PNG-Hintergrundbild, welches in den unterschiedlichen Browsern mit richtiger Transparenz dargestellt wird (es wird der CSS-Hack eingesetzt).

#elementID {  		     /* für alle Browser gültig */
        /* PNG im Hintergrund wiederholen */
        background-repeat: repeat;
        background-position: center top;
}

html > body #elementID {     /* moderner Browser */
        background: url("./background.png")
}

* html #elementID {          /* Internet Explorer */
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src="http://.../background.png", sizingMethod="scale");
}

3. Herstellen der Link-Funktionalität

HTML-Elemente (z.B. DIV-Tags), welche Links umschließen und eine PNG-Datei als Hintergrundbild enthalten, verhindern im Internet Explorer 5/6 ggf. die korrekte Funktionalität der Hyperlinks. Diese lassen sich meist nicht mehr anklicken. Hier gibt es einen an sich unerklärlichen Trick der angewendet werden muss: die Link-Tags <a> werden mittels CSS explizit relativ positioniert:

*a {position: relative;}

Damit dies auch wirklich zum erwünschten Ergebnis führt, dürfen die Elemente mit PNG-Hintergrund, in denen solche Links enthalten sind, NICHT relativ positioniert werden!