PNG och Internet Explorer 6

Frågor kring teman (forumets design) för phpBB 2.0.x.

Moderator: Moderatorgrupp

Användarvisningsbild
Kjell
Hedersmedlem
Hedersmedlem
Inlägg: 4510
Blev medlem: 2006-11-11 23:35
Ort: Den Haag, Holland
Kontakt:

PNG och Internet Explorer 6

Inlägg av Kjell » 2007-04-21 09:17

Har du problem med att få snygg png grafik att fungera i Explorer på er egen hemsida, då är lösningen här.
Varför png format och inte gif, jo png ger bättre djup och skärpa i bilden.
Fungerar inte med animerade bilder.
Lägg här koden i din övre del på sidan som ska visas.

Kod: Markera allt

<!--[if lt IE 7]>
<script language="JavaScript">
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
{
   var arVersion = navigator.appVersion.split("MSIE")
   var version = parseFloat(arVersion[1])
   if ((version >= 5.5) && (document.body.filters))
   {
      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);
</script>
<![endif]-->
/Kjelle KonsultPoolen * Facebook * Twitter * MODx Verkstan
Brukar sova lite efter 29:e timman och Ingen support via PM!

Användarvisningsbild
Kail
Administratör
Administratör
Inlägg: 2935
Blev medlem: 2003-06-03 13:53
Ort: Linköping/Stockholm
Kontakt:

Inlägg av Kail » 2007-04-21 10:55

Jag vet inte vad du menar med skärpa. Det finns dock flera anledningar att inte använda GIF, nämligen.
1) PNG komprimerar grafik bättre.
2) PNG stöder upp till 48 bitars färg (plus alfakanal) till skillnad mot GIF:s 8 bitar.
3) PNG stöder alfa-kanaler (halvgenomskinlighet, till skillnad från GIFs binära transparens)
4) PNG är ett öppet format

Enklaste sättet att tvinga IE att ladda in alfa-kanalen är att använda iepngfix.htc som du kan välja att enbart tillämpa på element med vissa CSS-klasser eller IDn.
http://www.twinhelix.com/css/iepngfix/
Jakob Persson - Grundare av phpBB Sverige - IT-konsult - http://www.jakob-persson.com
The Complete phpBB Template Design Guide

Användarvisningsbild
Kjell
Hedersmedlem
Hedersmedlem
Inlägg: 4510
Blev medlem: 2006-11-11 23:35
Ort: Den Haag, Holland
Kontakt:

Inlägg av Kjell » 2007-04-21 11:57

Med 48 bitar så får man större skärpa i bilden och det går det inte att komma ifrån :)
Att använda iepngfix.htc är helt okey, det är också en lösning, beroende på vad man vill göra och vad man kan/vet om css. den går att köra koden ovan också....
Och 1 till 5 är bra beskrivet av dig Kail
Man väljer vilken man vill beroende på vilken skola man vill gå i :D
/Kjelle KonsultPoolen * Facebook * Twitter * MODx Verkstan
Brukar sova lite efter 29:e timman och Ingen support via PM!

Användarvisningsbild
Kail
Administratör
Administratör
Inlägg: 2935
Blev medlem: 2003-06-03 13:53
Ort: Linköping/Stockholm
Kontakt:

Inlägg av Kail » 2007-04-21 12:59

svågadalen skrev:Med 48 bitar så får man större skärpa i bilden och det går det inte att komma ifrån :)
Om du med skärpa menar färgdjup så ja. En PNG-bild har högre fidelity, den kan återge fler färger än en GIF-bild och är därför mer mångsidig. Den är dock inte skarpare, en bild har samma skärpa oavsett färgdjup.

JPEG-bilder kan bli suddiga vid hård kompression men detta beror på att kompressionsalgoritmen är "lossy", detta gäller inte PNG och GIF då dessa format har "lossless" kompression. PNG har faktiskt stöd för mer än en kompressionsalgoritm vilket gör formatet ganska unikt. Med program som pngcrush kan man optimera en bild genom att testa vilken kompression som ger minst filstorlek.
Jakob Persson - Grundare av phpBB Sverige - IT-konsult - http://www.jakob-persson.com
The Complete phpBB Template Design Guide

Skriv svar

Vilka är online

Användare som besöker denna kategori: 1 och 0 gäst