WN - PNG24 som bakgrund

WN (https://www.wn.se/forum/index.php)

- Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)

- - PNG24 som bakgrund (https://www.wn.se/forum/showthread.php?t=25927)

Citat:

Originally posted by coredev@Jan 3 2008, 10:44
Okidoki.. :)

Men ärligt talat så gör du nog bäst i att använda en enklare teknik tillsvidare. En knapp majoritet av användarna på din sida kan idag ändå inte nyttja PNG24, och fukhack i CSS:en / Javascript kommer bara att leda till att du får problem i framtiden.

Skulle nog säga det omvända. En lite rad i css:en med * html t.ex. är lätt att se och påverkar inte andra webbläsare än IE6. Det är verkligen tid att börja använda mer avancerade designer, t.ex. png med alfa-kanal, det har ju varit tillgängligt sedan början av 2000-talet i alla webläsare utom IE6. Jag skulle nog tro att IE6 snabbt kommer bli historia och de få som av någon outgrundlig anledning håller sig kvar vid IE6 störs säkerligen inte av en misslyckad png.

Här har du ett javascript som fixar till det, bara lägga till scriptet längst upp på sidan.

Kod:



  /*

  Correctly handle PNG transparency in Win IE 5.5 & 6.

  http://homepage.ntlworld.com/bobosola Updated 18-Jan-2006.

  */

  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

     }

    }

  }

Citat:

Ursprungligen postat av CodeBox

Här har du ett javascript som fixar till det, bara lägga till scriptet längst upp på sidan.[...]

PNGFix javascriptet fungerar inte på CSS bakgrunder utan endast img-element.

Citat:

Ursprungligen postat av qson

Tack så mycket. Skall kolla på dessa lösningar.
Filen jag länkade till var ett exempel på hur jag hade löst det på en annan sajt, och undrade vad ni ansåg om att lägga in fulhacken direkt i css-filen (ligger först en background: och sedan en filter: i samma klammer.

Bakground: none; används för att undvika krockar mellan den riktiga bakgrunden och det lager med alpha-transparens som AlphaImageLoader skapar. Att placera dessa i samma klammer är att rekommendera då de "behöver" varandra för att alpha-transparensen ska fungera. Men separera övrig CSS och dina "hack", det gör saker mycket enklare i framtiden.

Tack mr_lundis! Skall genast ordna detta.

En ny fråga: Uppfattar IE7 !important, eller kommer den att tolka den senast deklararade precis som IE6?
Har bara IE6 på datorn, men skall testa med annan dator nån dag.

Citat:

Originally posted by qson@Jan 4 2008, 18:04
En ny fråga: Uppfattar IE7 !important, eller kommer den att tolka den senast deklararade precis som IE6?

IE7 förstår !important