Jak jsem si rozchodil průhledný .png pod IEčkem :)

21.10.2006 21:47 | Přečteno: 2797×

Tak povídání bych začal asi takto:
Před nějakým časem jsem si sehnal prácičku pro jednoho chlapíka, který chtěl vytvořit webík pro jeho obchod. Dal jsem se do kupy s kamarádem a společně jsme vykutili jeho webík, myslím si že celkem zdařilý.

Byla tam ještě taková drobnost, kterou jsem dořešil dnes a o které budu psát zápisek do blogu.

Šlo o logo webu. Logo které jsem dostal bylo v .jpeg a tak jsem ho jen lehce upravil a nechal ho být. Problém byl v tom, že pozadí loga bylo v nějakém odstínu bílé barvy a chlapík se mě ptal zda by se s tím nedalo něco udělat.

Tak jsem se do toho pustil. Pozadí loga jsem vymazal a uložil jsem ho ve formátu .png. A tady začíná můj boj, který jsem zdárně vyhrál. Ale byl to boj převelice těžký :) . Pod mým FF i O9 vše běželo jak má, tzn. průledné pozadí, a tak jsem se vydal za chlapíkem to pořešit. Ukázal jsem mu to na mém NTB s Fedorou, spokojenost byla oboustranná, nahodil jsem mu to na web a řešil jsem si u něj v prodejně na netu nějaké svoje věci (využil jsem jeho 2Mbit ADSL net k sosání :) ). Když jsem se loučil že půjdu domů za ženou, tak jsem si všiml že logo pod jeho IEčkem má šedý podklad (kua). Chvíli jsem na to koukal a pak jsem mu řekl, že se na to doma kouknu.

První co jsem udělal že jsem to projel pod IEčkem ve WIN XP a hle bylo to špatně (co jiného když IEčko nepodporuje průhlednost .png nativně, jako spoustu jiných věcí). První věc co jsme udělal, že jsem z toho vyrobil průhledný .gif a hodil to na web abych nad tím mohl popřemýšlet. Kvalita .gif-u nic moc.Dneska jsem celý den trávil tím že jsem zkoušel různé návody co jsem vygooglil. Zkoušel jsem různé filtry od MS, ale nijak úspěšně (zřejmě chyba židlí a klávesnicí). Nakonec jsem našel řešení na tomto webu, který se zabývá řešením bugů IEčka http://dean.edwards.name/IE7/, a na kterém jsem se dopátral řešení mého problému. Ale tak jednoduché to taky nebylo, to bych nebyl já abych to měl tak jednoduché jak to vypadalo.

Podle návodu k instalaci, nalezením na onom webu, jsem se jal konat dílo. Skopíroval jsem IEčkový

[if lt IE 7] bla bla bla

... začal jsem zkoušet co to udělá. Dílo se nedařilo tak jak mělo. Stále jsem měl problém s průhledností pozadí. Až nakonec se dílo podařilo a po nakopírování souborů z webu http://dean.edwards.name/IE7/ tam kam měly přijít, jsem dosáhl kýženého výsledku. Tedy skoro.

Pod IEčkem v7 EN na mých NTB WIN XP, vše fungovalo jak mělo. Horší to bylo, když jsem se na to podíval po bratrovým IEčkem v6. Obrázek byl sice průhledný, ale z důvodu mě neznámého bugu, se kolem obrázku vytvořil rámeček, který dělá IEčko, když nemúže zobrazit obrázek. Taková ta malá ikonka s červeným křížkem. Když jsem zkusil dát uložit obrázek jako, tak jsem dostal nabídku uložit jakýsi soubor

blank.gif

. Protože jsem ho tam neměl tak i z toho důvodu jsem pod IEčkem měl onu ikonku, že obrázek neexistuje.

Nakonec jsem na to přišel. Už bude konec nebojte :) . Vytvořil jsem .gif soubor o velikosti 1x1px s průhledným pozadím a ten nakopíroval k souborů z webu http://dean.edwards.name/IE7/. A voalá funguje to. A já mám radost až na půdu :) .

Ve výsledku sice IE v6 zobrazuje ke stažení soubor blank.gif, ale logo ve formátu .png se zobrazuje správně. IE v7 to zobrazuje korektně.

Postup výroby: (logo webu v mém případě)

• stáhnout si archiv z webu http://dean.edwards.name/IE7/
• nakopírovat jej do adresáře s webem
• upravit webovou stránku dle popisu na webu s archívem
• vyrobit .gif 1x1px s průhledným pozadím a nakopírovat ke zbytku dat z rozbaleného archívu
• obrázek, který je v .png nakopírovat do rootu webu na stejnou úroveň jako např. index.html a jiné
• no a tím je to hotové

PS: určitě se najdou uživatelé, kteří mají také svůj způsob jak na .png. Toto jsem se dnes naučil já a jsem spokojený.
PPS: no flamewar :)

       

Komentáře

[stribny]

Mohl jste se zmínit už na začátku příspěvku, že řešení vyžaduje JS. Protože jsem čekal na vrcholné odhalení, jak tu neprůhlednost obejít Ale i tam zajímavý tip na zajímavou stránku..

[Samuel]

Ja pouzivam takuto fintu v CSS-ku:
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='image.png');
Su s tym nejake problemy?

[Milan Lajtoš]

Absolutne ziadne.. Dokonca sa ani nemusim starat o nove priehladne png - vsetko to najde samo - script..

[disorder]

Shut the Windows, close the Gates...

ehm... nie nahodou Close the Windows, shut the Gates?

alebo...

Close the Windows, shot the Gates...?

[mrzout]

nejde to treba na pozadi natazeny pres css :( No ale msie7 asi vytlaci fofrem sestku, takze to je jedno. Za dva roky budou sestkari koukat na sedivy pozadi porad a ani jim to neprijde

[stribny]

Jo mám takové tušení, že s tímhle nedáš obrázek na pozadí. Respektive, že když budeš mít text s odkazy nad takovým filtrem, tak to bude lagovat.

[Mikos]

Funguje to i na obrázky v CSS? Jestli ne, tak je mi to celkem k ničemu...

[f1gurk4]

mělo by to fungovat i na obrázky v css, ale je asi potřeba to trochu pozkoušet a otestovat...