PNG-fix?

Det här forumet visas bäst i en modern webbläsare med JavaScript påslaget.

wimpey

Någon som har/vet något bra PNG-fix...?

Arood

Jag antar att du menar en PNG-fix för att fixa så att transparenta PNG-bilder fungerar i IE6? Det finns många lösningar, men alla utgår ifrån samma princip, att byta ut alla bilder mot ett filter som finns i IE5.5-6 som heter AlphaImageLoader.

För att läsa om Microsofts "visuella filter": http://msdn.microsoft.com/en-us/library/ms532853(VS.85).aspx

Ett par varianter av PNG-fix: http://homepage.ntlworld.com/bobosola/index.htm

Johan

Det går även att fixa bakgrunder och liknande, men det går oftast bättre att göra i en IE-specifik stillmall, nackdelen är att man inte kan positionera ller upprepa bakgrunden.

Jag föreslår HTC-tekniken för IMG-elementen. En HTC-fil är en extern javascriptfil man kan sätta att köras för vissa typer av element i en CSS-fil (helst IE-specifik med conditional comments):

CSS:

img
{ behaviour: url('pngfix.htc'); }

pngfix.js:

<public:component>
<public:attach event="onpropertychange" onevent="change()" />
<script language="JScript">
var blank = 'blank.gif';

function change(){
   if (window.ActiveXObject && event.propertyName == "src" && element.src.toLowerCase() != blank.toLowerCase()) fix();
}

var previous = "";
function fix(){
   var url = element.src;
   if (url.substr(url.length - 3).toLowerCase() != 'png'){
      element.runtimeStyle.filter = "";
      return;
   }
   if (url == previous) return;

   var width = element.offsetWidth, height = element.offsetHeight;
   element.src = blank;
   element.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\"" + url + "\", sizingMethod='scale')";
   element.width = width;
   element.height = height;

   previous = url;
};

if (window.ActiveXObject) fix();
</script>
</public:component>

Man kan skriva ett skript som inte använder den blanka GIF-bilden men det är den lättaste och enligt erfarenhet bästa lösningen.

PS. Koden är inte testad.

monkeycid

Har någon ett PNG-fix där man inte behöver sätta fast storlek på bilden som fixas? Jag använder en metod liknande den Johan beskrev ovan, från Twinhelix, men på den - och andra jag provat - blir bilderna helt bort i stoll om man inte specificerar deras storlek i IMG-taggen. Detta är naturligtvis störande. Har ni smidigare lösningar?

Edit: Varför ligger den här i "serverspråk"? :o Borde vara klientspråk om något, iom att det handlar om en felande klient (IE).

Johan

Om fix såg ut så här, kanske det skulle fungera:

function fix(){
   var url = element.src;
   if (url.substr(url.length - 3).toLowerCase() != 'png'){
      element.runtimeStyle.filter = "";
      return;
   }
   if (url == previous) return;
   var load = function (){
      var width = element.offsetWidth, height = element.offsetHeight;
      element.src = blank;
      element.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\"" + url + "\", sizingMethod='scale')";
      element.width = width;
      element.height = height;

      element.detachEvent('onload', load);
   };
   element.attachEvent('onload', load);
   previous = url;
};

Det betyder att den bara byter ut bilden efter den har laddat, kanske irriterande men bilden måste ha laddat klart för att kunna få ut dimensioner. Men man ska försöka att alltsid specificera bredd och höjd, det är nog lättare att lösa varför bredd och höjd inte är specificerade än att lösa det med javascriptet.

neme

monkeycid skrev:

Edit: Varför ligger den här i "serverspråk"? :o Borde vara klientspråk om något, iom att det handlar om en felande klient (IE).

Fixd.