Transparent .png billede i IE

Er du nu helt sikker på, at det er rigtigt transparent?

jeg skulle ikke mene at det er nødvendigt at skulle bruge .gif filer i IE, men jeg ved at det virker!

IE har et kendt problem med PNG billeder. Den eneste løsning er at bruge GIF filer.

Du kan ændre opacity på et billede med CSS, men det kommer ikke til at virke på samme måde som et "rigtigt" billede.

Microsoft kan bare ikke finde ud af at lave en ordenlig browser!
Nå, men så må jeg jo lave det om til gif-format!

el_barto smid et svar!

Ellers tak :)

Og nej, MS har på det punkt jokket godt i spinaten.

> Microsoft kan bare ikke finde ud af at lave en ordenlig browser!

nåja, det er da den næstbedste på markedet ;o)

kimiwan skrev:
>nåja, det er da den næstbedste på markedet ;o)

Øhhh, siger hvem???

Du kan godt bruge transparente png-billeder i MSIE - de skal blot loades gennem det filter, der hedder AlphaImageLoader. Her er en rigtig nem måde at gøre det på:

1. Indsæt dit billede som sædvanligt. NB: Du SKAL sætte width og height, for at det her skal virke.

2. Tilføj følgende css-regel i dit stylesheet:

  img {behavior: url(pngalpha.htc)}

3. Kopier følgende, indsæt det i en tom tekst-fil og gem det som "pngalpha.htc". Hvis du vælger et andet navn og/eller at placere filen i en undermappe, så ret url'en under punkt 2.

---------- kopier herfra

<public:component lightWeight="true">
<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 && /\.png$/i.test(src)) {
        element.src = blankSrc;
        return;
    }

    if ( ! new RegExp(blankSrc).test(src)) {
        // backup old src
        realSrc = src;
    }
   
    // test for png
    if (/\.png$/i.test(realSrc)) {
        // 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>

---------- kopier hertil

4. Lav en gennemsigtig gif-fil på 1 x 1 px og gem den som "blank.gif". Hvis du vælger et andet navn og/eller at placere filen i en undermappe, så tilret variablen "blankSrc" i behavior-filen i punkt 3.

5. Nu sker der følgende, når din side loades: Behavior'en kigger på, om der er png-filer i dokumentet. Hvis der er, sætter den deres src til at være den gennemsigtige "blank.gif", loader png-filen gennem AlphaImageLoader og lægger den ovenpå, så den er det eneste, du ser.

Det lyder mere besværligt, end det er: Du skal trods alt blot gemme behaviour-filen, lave gif-filen, samt tilføje en ny css-regel én gang for alle - så spiller det hele helt automatisk...

mtrolle: siger jeg

ARGH! Jeg kunne kysse dig edutasia!!!
Point er 100% fortjent!

Tak for point... men kysset vil jeg nok helst have til gode :)

Det lyder helt fantastisk det der... Men jeg har lige siddet og leget med det... Og jeg kan altså ikke få det til at virke... Virker det ikke i dag eller er det bare mig der er en hat...?!

Det vil sige... Det der sker er at billedet "forsvinder"... Dvs. det ser ud som om at den loader det "blanke" billede, men PNG-billedet bliver ikke loadet ind ovenpå...

killer_r -> Har du husket at sætte width og height på billedet? Gerne med inline style, fx: <img style="height:50px; width:120px" src="filnavn.png" alt="xx"/>

Ja, det har jeg... Jeg har godt nok ikke brugt inline styles, men alm. height og width-attributter...