Avatar billede blackscorpion Nybegynder
26. marts 2007 - 20:49 Der er 19 kommentarer og
1 løsning

PNG Work-Around.

Hej E.

IE 6 og alt under + png = dårlig idé.

Googlede mig til denne side:
http://homepage.ntlworld.com/bobosola/pnghowto.htm

Han skriver at:

<!--[if lt IE 7]>
  <script defer type="text/javascript" src="includes/pngfix.js"></script>
<![endif]-->

indholdet af pngfix.js ser således ud:

/*

Correctly handle PNG transparency in Win IE 5.5 & 6.
http://homepage.ntlworld.com/bobosola. Updated 18-Jan-2006.

Use in <HEAD> with DEFER keyword wrapped in conditional comments:
<!--[if lt IE 7]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->

*/

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
      }
  }
}


Men når jeg tester det i IE6... guess what.. det funker ikke.

Billedet bliver slet ikke vist.

Css'en som smider billedet på ser således ud:


      background-image: url(gfx/old_date.png);
      background-color: #FFFFFF;

Det er en kryds, med lidt "blurred" kant.
Ie viser bare grå baggrund.

Jeg mistænker lidt:
<!--[if lt IE 7]>
  <script defer type="text/javascript" src="includes/pngfix.js"></script>
<![endif]-->

Men er ikke særligt god til javascript, så er ret meget på bar bund her.

Nogle ideer ?
Avatar billede loevgaard Praktikant
26. marts 2007 - 20:58 #1
I css skal du vise billeder sådan her:
  background-image: url('gfx/old_date.png');
Ved ikke om det kan have noget med det at gøre :)
Avatar billede blackscorpion Nybegynder
26. marts 2007 - 20:58 #2
Note that you must have height and width attributes specified for each image.

er det muligt at sætte højde og width på et baggrundsbillede ?
Avatar billede pidgeot Nybegynder
26. marts 2007 - 21:01 #3
Sidst jeg checkede virkede PNG-fixet ikke på baggrunde, da der ikke er mulighed for at fange dem og smide det nødvendige filter på.

Overvej om du kan bruge en PNG uden alpha channel (det vil typisk sige PNG-8, omend det kan lade sig gøre at fjerne alpha fra en PNG-24 uden at bruge en palette), da det så vil undgå problemet - alternativt kan du også lave baggrunden som et normalt billede, og så bare få den placeret "under" dit indhold.
Avatar billede pidgeot Nybegynder
26. marts 2007 - 21:02 #4
Hvad højde og bredde angår, har jeg en ældre udgave liggende der ikke behøver dette, og der virker det heller ikke :)
Avatar billede blackscorpion Nybegynder
26. marts 2007 - 21:05 #5
irriterende.

Det er fordi jeg er ved at lave en kalender, og det kunne være lækkert hvis jeg bare kunne skifte baggrunds farve uden at skulle skifte billedet også. :(

Derfor jeg valgte png med transperant baggrund.

Normalt ville jeg lave det som gif med fast baggrund for at få "fade'ningen" med.
Avatar billede blackscorpion Nybegynder
26. marts 2007 - 21:09 #6
tror lige jeg skal over i php sektionen, fik en ide...

kunne jo sætte png billedet normalt ind, og få php til at skrive datoen oven på.
Avatar billede pidgeot Nybegynder
26. marts 2007 - 21:10 #7
Hvis du ikke kræver at der skal kunne laves glidende overgange mellem billedet og baggrunden (det vil typisk sige skygger el. lign.), kan du stadig bruge PNG, så længe du kører dem gennem et eller andet program til at erstatte alpha channelen med "simpel" gennemsigtighed eller bruger PNG-8 (der traditionelt aldrig laves med alpha, omend det er teoretisk muligt).
Begge dele gør at du kan undgå fixet, og selvom du så helst vil bruge PNG-8, så har du stadig den fordel at PNG-8 plejer at fylde mindre end GIF, uden at kvaliteten bliver det mindste dårligere.
Avatar billede blackscorpion Nybegynder
26. marts 2007 - 21:12 #8
okey vil jeg lige kigge på, bruger adobe.
Avatar billede pidgeot Nybegynder
26. marts 2007 - 21:13 #9
Her skal jeg så lige gøre opmærksom på at Photoshop altid vil bruge en alpha channel til PNG-24, så det er et SEPERAT program der skal bruges til at konvertere. Vil gerne prøve at finde det frem, mener jeg har set et for nyligt...
Avatar billede blackscorpion Nybegynder
26. marts 2007 - 21:17 #10
nej det er okey, klarer den nok.

men der er GODT nok stor forskel på png-8 og png-24 :S
Avatar billede blackscorpion Nybegynder
26. marts 2007 - 21:22 #11
cool... vidste ikke cs2 kunne lave gif's med ordenlig transperanse. :D
Avatar billede pidgeot Nybegynder
26. marts 2007 - 21:27 #12
Det kommer jo gevaldigt an på hvordan du definerer "ordentlig" - hvis det er alpha channel, så kan den heller ikke det, for det undesrtøtter GIF-formatet overhovedet ikke - det eneste (web-brugbare) format der kan det er PNG.
Avatar billede blackscorpion Nybegynder
26. marts 2007 - 21:28 #13
se det ved jeg så ikke, ved bare det virker både i IE 6 og FF 2.0.0.3 ;D
Avatar billede pidgeot Nybegynder
26. marts 2007 - 21:32 #14
...hvilket PNG-8 også gerne skulle gøre, med samme kvalitet og udseende, samt mindre filstørrelse.
Avatar billede blackscorpion Nybegynder
26. marts 2007 - 21:35 #15
well png-8 fyldte 549 bytes på mit billede, hvor gif fyldte 192 bytes.
Avatar billede pidgeot Nybegynder
26. marts 2007 - 21:46 #16
PNG-filer kan generelt gøres betydeligt mindre end dem Photoshop laver, ved at bruge programmer som pngcrush eller OptiPNG. Men fair nok - når vi er nede og snakke <1kb, er det korrekt at GIF typisk er mindre end en uoptimeret PNG. Jeg havde bare forstået det som om at det var et noget mere kompliceret billede end det må være når det kan blive så småt :)
Avatar billede blackscorpion Nybegynder
26. marts 2007 - 21:48 #17
hehe, det er fordi jeg er ved at lave en kalender, og så smider den et baggrunds billede ind på alle de datoer der er ældre end dags dato, for at indikere at vi er forbi den dato. :)

Kunne også saktens bare lave en anden farve på dem, men syntes dette er lidt sjovere, og så kunne jeg også lige teste den png work around. ;)
Avatar billede pidgeot Nybegynder
26. marts 2007 - 21:51 #18
Helt fair - det skal der jo også være plads til. Nu ved jeg ikke lige om du mener jeg skal have point eller ej, men hvis ikke, kan du jo bare afvise mit svar :)
Avatar billede blackscorpion Nybegynder
26. marts 2007 - 21:52 #19
point ?? naaa syntes jeg ikke du har fortjent. :P
Avatar billede roenving Novice
27. marts 2007 - 05:37 #20
>>l0vgaard

-- det er kun nødvendigt at escape fil-stier, hvis de indeholder tegn, der skal escapes, f.eks. mellemrum, landespecifikke tegn i nogle kontekster m.v.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester