Vis transparent png i Explorer
Sat på siden 09-10-2005
Som det er alle webmastre bekendt, så kan Windows' browser, Internet Explorer, ikke finde ud af at vise transparente png-billeder. Det er en skam, fordi dette format er langt bedre end både jpg og gif. Men pga. Microsofts fejl, bruges dette format ikke særligt meget.
Ved at tilføje lidt kode til img-taggen kan du imidlertid få vist png-billeder med transparent baggrund korrekt i IE.
Hvis du vil se forskellen, så gå først til www.malkaz.com/foxladiz/brmalayout-pngfejl-ie.htm -- Bemærk, hvordan Leonardos billede vises med en underlig grå skygge, og det samme gælder for knapperne i højre side.
Besøg nu www.malkaz.com/foxladiz/brmalayout.htm -- se, hvor smukt png-billederne nu ser ud.
Nå, ja, du skal naturligvis bruge IE for at kunne se forskellen ;-) Opera og FireFox og andre browsere kan godt understøtte standarden. Endnu engang ser vi, at det ikke er den bedste browser, der er en mest brugte, men derimod den, der følger med computeren.
For at få IE til at vise png-filer korrekt, skal du ændre en kode, som ser sådan her ud:
<img src="billede.png" width="140px" height="200px" alt="billedtekst"> til:
<img src="blank.gif" style="width: 140px; height: 200px; filter:
progid:DXImageTransform.Microsoft.AlphaImageLoader(src='billede.png', sizingMethod='scale')" alt="billedtekst">
Upload et transparent billede i gif-format, som du kalder "blank.gif" til serveren.
Feeedt! Så virker det i IE.
Ehem, knap så smart, at det nu ikke længere virker i browsere, der har gjort sig den ulejlighed at understøtte standarden.
Nu er vi altså nødt til at tjekke, om gæsten kommer med en IE-browser, og hvis han gør, så skal filteret tilføjes, ellers ikke. Det gør vi meget nemt (sådan da) ;-)
Indsæt følgende kode i <head>:
<style type="text/css">
img {
behavior: url("pngbehavior.htc");
}
</style>
Opret filen "pngbehavior.htc" i Notesblok (alle filtyper), og indsæt koden her:
<public:component>
<public:attach event="onpropertychange" onevent="propertyChanged()" />
<script>
var supported = /MSIE (5\.5)|[6789]/.test(navigator.userAgent) && navigator.platform == "Win32";
var realSrc;
var blankSrc = "blank.gif";
if (supported) fixImage();
function propertyChanged() {
if (!supported) return;
var pName = event.propertyName;
if (pName != "src") return;
// if not set to blank
if ( ! new RegExp(blankSrc).test(src))
fixImage();
};
function fixImage() {
// get src
var src = element.src;
// check for real change
if (src == realSrc) {
element.src = blankSrc;
return;
}
if ( ! new RegExp(blankSrc).test(src)) {
// backup old src
realSrc = src;
}
// test for png
if ( /\.png$/.test( realSrc.toLowerCase() ) ) {
// set blank image
element.src = blankSrc;
// set filter
element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" +
src + "',sizingMethod='scale')";
}
else {
// remove filter
element.runtimeStyle.filter = "";
}
}
</script>
</public:component>
Ret dine image-tags til:
<img src="billede.png" style="width: 140px; height: 200px;" alt="billedtekst">
Enkelt, let og hurtigt, ikke? Nå, ikke?
Lad os håbe på, at Microsoft finder ud af at lave deres version 8 eller 9 af Explorer kompatibel med den kode, der faktisk er vedtaget demokratisk.