✔ AlphaImageLoader ohne Browsererkennung

[milchbubbi]

hallo zusammen,

auf meiner Webseite sind einpaar Bilder im png-Format. Damit diese im IE richtig dargesetllt werden muss ich den AlphaImageLoader verwenden. Der Code sieht ungefaehr so aus:

var elem = document.getElementById("myId"); //myId ist div-container
if (navigator.userAgent.indexOf("MSIE") != -1)
        elem.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="./file.png")';
else
        elem.style.backgroundImage = 'url("./file.png")';

Das ist die einzige Stelle im Code, wo ich Browsererkennung verwende, ich wuerde aber gerne auch hier darauf verzichten.
Jemand vielleicht eine Idee, wie ich es umsetzen kann?

 

[Sven Mintel]

Du kannst getrost auf die Browserabfrage verzichten, da ohnehin nur der IE dies versteht:

elem.style.filter

 

[milchbubbi]

howdy Sven,

danke fuer die Antwort.

Dass die anderen Browser die "filter" Anweisung ignorieren, ist mir klar. Allerdings kann ich die Browsererkennung nicht weglassen, weil er sonst sowohl
elem.style.filter = [...], als auch elem.style.backgroundImage = [...] ausfuehrt, wenn man die Seite mit IE oeffnet. Das Ergebnis sind zwei gleiche Bilder, die uebereinander liegen, wobei eines richtig angezeigt wird(wegen der filter Anweisung) und beim Anderen die transparenten Flaechen mit eine Farbe gefuellt werden (wegen der backgroundImage Anweisung, die keinen AlphaImageLoader verwendet).

 

[Sven Mintel]

Ich nehme mal an, es geht nicht um die Browsererkennung ansich, sondern um den Einsatz von JS, auf den du verzichten willst.

Du kannst die ganze Sache auch mit CSS machen:

<style type="text/css">
<!--
#myId{background:url(./file.png) no-repeat;}
-->
</style>

<!--[if lt IE 7]>
<style type="text/css">
#myId{background-image:none;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./file.png'); }
</style>
<![endif]-->

der erste Abschnitt wird von allen Browsern interpretiert.
Das 2. ist ein conditional comment...den erkennt nur der IE.
[if lt IE 7]...bedeutet:if less then IE7(wenn kleiner als IE7...IE7 kann ja Alpha-Transparenz in PNGs darstellen)...dort wird also erstamal die Angabe fürs Hintergrundbild negiert, und dann der Filter vermerkt...das wars schon

 

[milchbubbi]

hallo Sven

also auf JS wuerd ich nur ungern verzichten, weil es sich um eine kleine JS-Bibliothek dreht, an der ich gerade arbeite

dein Vorschlag ist insofern problematisch, als dass er sich auf ein bestimmtes Bild bezieht. Ich brauche eine Loesung, die auf alle Bilder angewendet werden kann, leider komme ich nicht drauf. Derzeit sieht es so aus:

setPng = function(elem, pngPath){
    if (navigator.userAgent && navigator.userAgent.indexOf("MSIE")>=0)
        elem.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' + pngPath + "')';
    else
        elem.style.backgroundImage = 'url("' + pngPath + '")';
}

in anderen Faellen, wo es Unterschiede zwischen den Browsern gibt, konnte ich es mit Objekterkennung loesen, zB:

if(elem.attachEvent)
    elem.attachEvent(func);

auf DXImageTransform oder aehnliches kann ich hier aber nicht abfragen.

 

[Sven Mintel]

Und warum willst du nun auf die Browsererkennung verzichten

if(elem.attachEvent)

...ist ja auch nichts anderes, als eine Browserweiche.

Andernfalls könntest du es mit einem try-catch-Statement versuchen.

 

[milchbubbi]

Hi,

[...] ist ja auch nichts anderes, als eine Browserweiche [...]

doch ist es. Denn hierbei braucht man sich nicht auf den Useragent zu verlassen.

 

[Sven Mintel]

Naja, das ist eben Ansichtssache, was man unter Browsererkennung versteht

Browser erkennt man eben mit JS am sichersten, indem man ihre Methoden prüft.
Wenn du schon eine JS-Bibliothek aufbaust, solltest du damit anfangen....

BSP:

if(document.all && !window.opera)//ein IE4 oder höher
if(document.all && !window.opera && !document.getElementById)//IE4

bei SELFHTML findest du eine DHTML-Bibliothek, diese beinhaltet auch eine solche Browsererkennung anhand der interpretierten Methoden.


in dem speziellen Fall hier benötigst du IE5.5 oder IE6, die Abfrage könnte da so lauten:

if(typeof elem.style.zoom!='undefined' && !window.XMLHttpRequest)

...die style-Eigenschaft "zoom" kennt der IE erst ab Version5.5....und das XMLHttpRequest-Objekt ist ihm erst ab Version7 bekannt.

 

[milchbubbi]

[...]und das XMLHttpRequest-Objekt ist ihm erst ab Version7 bekannt.

thx!
Das benutze ich jetzt als Uebergangsloesung, bis mir was Besseres einfaellt.