[IE6]Alpha transparante PNG via CSS

[Royal]

code:

function correctPNG() 
   {
   for(var i=0; i<document.images.length; i++)
      {
      var img = document.images[i]
      var imgName = img.src.toUpperCase()
      if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
         {
         var imgID = (img.id) ? "id='" + img.id + "' " : ""
         var imgClass = (img.className) ? "class='" + img.className + "' " : ""
         var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
         var imgStyle = "display:inline-block;" + img.style.cssText 
         if (img.align == "left") imgStyle = "float:left;" + imgStyle
         if (img.align == "right") imgStyle = "float:right;" + imgStyle
         if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle       
         var strNewHTML = "<span " + imgID + imgClass + imgTitle
         + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
         + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
         + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" 
         img.outerHTML = strNewHTML
         i = i-1
         }
      }
   }
window.attachEvent("onload", correctPNG);

Normaal gesproken gebruik ik altijd deze pngfix.js om alpha transparante png plaatjes goed te laten weergeven in internet explorer, maar omdat ik dit keer met css mijn plaatjes als background laad en niet via img werkt het niet.

Nu heb ik al verschillende filters geprobeerd en er blijkt er slechts één te werken

code:

.leftbar_left {
    width: 37px;
    height: 463px;
    /* IE PNG FIX */
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='http://www.WEBSITE.nl/sites/deaap/images/leftbar_left.png');
    background-position: top;
    float: left;
}
/* other browsers */
.leftbar_left[class] {
    background-image: url(../images/leftbar_left.png);
}

Maar het nadeel hier van is dat de voledige url op moet geven want "../images/lefbar_left.png" werkt bijvoorbeeld niet.

Heeft iemand hier een correcte / goede / makkelijke oplossing voor ? Heb de search ookal gebruikt maar kom er nog niet uit.

[Verwijderd]

Een betere oplossing zou zelfs zijn om de hele css file door te gaan zoals de pngfix.js doet en uiteraard hetzelfde effect te hebben. Is dit sowieso wel mogelijk?

[Blaise]

Werkt dit? En anders werkt dit misschien wel.

[ Voor 5% gewijzigd door Blaise op 13-01-2005 23:52 ]

[Royal]

Die oplossing heb ik dus al gevonden, echter werkt het alleen bij gebruik van volledige url en kan niet niet ../images/plaatje.png opgeven.

[BtM909]

Royal schreef op vrijdag 14 januari 2005 @ 00:50:
Die oplossing heb ik dus al gevonden, echter werkt het alleen bij gebruik van volledige url en kan niet niet ../images/plaatje.png opgeven.

Is het niet zo dat je vanuit je css file relatief moet linken?

[Blaise]

BtM909 schreef op vrijdag 14 januari 2005 @ 00:58:
[...]

Is het niet zo dat je vanuit je css file relatief moet linken?

Nee, op zich werkt dat wel.

Kan je geen oplossing vinden waarbij je absolute urls gebruikt? Desnoods kan je ook met PHP de path berekenen en invullen, maar dat is misschien weer te omslachtig.

[Genoil]

Een of andere Oost Europeaan heeft een aardig HTCtje gemaakt dat de boel fixed:

http://arcok.ujevangelizacio.hu/bubu/examples/js/ie-png.htc

Als je deze htc vanuit een CSS file aanroept moet die relatief t.o.v. de HTML file in dezelfde directory staan, anders werkt het niet.

Denk er wel aan dat die IE fix alleen (background)images kan stretchen en croppen, niet tilen...

[Verwijderd]

Ik krijg dat ding niet goed aan het werk.

Directory structuur is als volgt:

code:

/ root/
`--- ie-png.htc
`--- includes/
     `----- css.css
`--- images/
     `----- lading png's ;)

de css file bevat de volgende code:

code:

.leftbar_left {
    width: 37px;
    height: 463px;
    background-image: url(../images/leftbar_left.png);  
    background-position: top;
    behavior: url(ie-png.htc);
    float: left;
}

Ik doe vast iets gigantisch verkeerd, maar ik heb geen idee wat.

code:

    behavior: url(../ie-png.htc);

Spelen met het path werkte jammer genoeg ook niet.

[Verwijderd]

Ik snap eigenlijk niet wat het probleem is met GIFjes?? waarom PNG? (owkee het is de toekomst, maar toch)

[Royal]

Zelfde probleem hier ... waarom kan IE nou niet gewoon png suporten

[Royal]

Met PNG kan je ook half transparantie gebruiken (makkelijk voor schaduw en bij een gradient in je background)

[Fuzzillogic]

Probeer anders eens IE7. Biedt meteen een berg workarounds voor een nog grotere berg bugs en hiaten in deze aftandse verouderde browser.

[Verwijderd]

Het gaat erom dat het werkt in IE6, aangezien het prima werkt in andere browsers. Er is een work around nodig voor dat. Krijg jij al je surfers maar zover om te wisselen naar een andere browser.

Nu verder ontopic.

[CrashOne]

Heb je het linkje wel gevolgt? IE7 is een berg js in een htc voor IE6.

[Fuzzillogic]

Jammere van veel van de andere workarounds hierboven (niet IE7 dus) is dat ze de HTML of CSS vernaggelen. Je moet dus non-standaard crap introduceren om het ook in belabberde seniele browsers (IE6 en ouder) te laten werken. Vind ik niet kunnen.

[Verwijderd]

Ah, ik had inderdaad alles wat beter moeten lezen. Die workaround werkt perfect!

Bedankt