DevProTalk - PNG kao background

DevProTalk

DevProTalk (http://www.devprotalk.com/index.php)

- (X)HTML, JavaScript, DHTML, XML, CSS (http://www.devprotalk.com/forumdisplay.php?f=8)

- - PNG kao background (http://www.devprotalk.com/showthread.php?t=905)

jasmanac

14. 04. 2006. 01:21

PNG kao background

Svi znamo koliko je tesko naterati .png sliku da radi u exploreru preko CSS background-a. Najzad resenje koje upravo resava gore pomenuti problem.

Kôd:

if (navigator.platform == "Win32" && navigator.appName == "Microsoft Internet Explorer" && window.attachEvent) {

    window.attachEvent("onload", alphaBackgrounds);

}



function alphaBackgrounds(){

    var rslt = navigator.appVersion.match(/MSIE (\d+\.\d+)/, '');

    var itsAllGood = (rslt != null && Number(rslt[1]) >= 5.5);

    for (i=0; i<document.all.length; i++){

        var bg = document.all[i].currentStyle.backgroundImage;

        if (itsAllGood && bg){

            if (bg.match(/\.png/i) != null){

                var mypng = bg.substring(5,bg.length-2);

                document.all[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+mypng+"', sizingMethod='scale')";

                document.all[i].style.backgroundImage = "url('/images/x.gif')";

            }

        }

    }

}

Morate samo imati jedan blanko transparentni .gif fajl 1x1px i kao sto vidite on je konkretno u ovom slucaju smesten u folderu "images" ali samo promenite putanju ako zelite da ga premestite na neku drugu lokaciju.

Ima nekih sitnih bug-ova kada se koristi u nekim ekstremnim situacijama dok u 95% slucajeva radi savrseno.

Podrzane su verzije explorera 5.x pa navise. Malo li je :D

:1081:

Dragan Babić

14. 04. 2006. 02:13

Da li ovaj sistem pravi problem sa neklikabilnim linkovima koji se nalaze u elementu na čiju pozadinu se utiče ovim JSom? Ukoliko ne znaš za bug pogledaj ovu test stranicu

nixa	14. 04. 2006. 02:14

Svaka ti se dala ..:1036:

ovo ide na top :)

ivanhoe

14. 04. 2006. 06:30

ovo je u stvari ona klasicna png fora samo primenjena na currentStyle.backgroundImage jel da?

Super fora, ne bih se setio priznajem...bravo za ovo :)

@Dragane, ovaj tvoj primer meni nesto cudno radi, samo prvi primer radi u FF (na druga 2 nema slike), dok mi s u IE sve slike vide, ali link ne radi, kao sto kazes... inace FF je 1.5.0.2 frisko skinut pre pola sata :D

Ilija Studen

14. 04. 2006. 07:14

Jedini problem koji zadaju je što sve "aktivno" (link, kontrola, anything) što staviš u blok koji ima transparentnan PNG kao background u IE (učitan pomoću AlphaImageLoader filtera) gubi aktivnu funkciju. Potrebno je dodati još jedan unutrašnji blok i relativno ga pozicionirati i onda nema tog problema. Prljavo ali radi posao.

Inače sam primetio da transprantni PNG kao background danas zadaje više problema nego što pruža zauzvrat. Koristio sam ga samo zato što sam morao...

Blood

14. 04. 2006. 10:19

Citat:

Originalno napisao Ilija Studen

Inače sam primetio da transprantni PNG kao background danas zadaje više problema nego što pruža zauzvrat. Koristio sam ga samo zato što sam morao...

Eto tebi nove tebe za blog :)

Inace, ja sam do sada koristio ovo i radi lepo(za moje potrebe):

Kôd:

* html #transparent {        

   filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../gfx/div_bg.png", sizingMethod="scale");

}

Dragan Babić

14. 04. 2006. 10:23

@ ivanhoe:
Da, loše sam ilustrovao, FF treba da vidi samo prvi jer druga dva pre alphaImageLoadera imaju pravilo background:transparent; da bi "otkazao" originalnu sliku za IE, FF to vidi ali ne razume loader, pa ne prikaže ništa naravno.
Jednostavno loše sam ilustrovao, rekao da ću popraviti čim nađem vremena, ono vraga...

suma sumarum:

Dakle ima li razlike izm. ovog JSa i alphaImageLoadera u CSSu?

jasmanac

14. 04. 2006. 10:38

Citat:

Originalno napisao Dragan

Da li ovaj sistem pravi problem sa neklikabilnim linkovima koji se nalaze u elementu na čiju pozadinu se utiče ovim JSom? Ukoliko ne znaš za bug pogledaj ovu test stranicu

Ne razumem? Probaj da stavis position: relative linku?

Ilija Studen

14. 04. 2006. 11:15

Citat:

Originalno napisao Dragan

Dakle ima li razlike izm. ovog JSa i alphaImageLoadera u CSSu?

Nema. Ovaj JS gore projuri sve elemente stranice i ukoliko naleti na PNG stavljen kao background image resetuje ga sa transparentnim gifom i stavi alphaImageLoadera filter. Ovo (bi trebalo da) radi samo u IE (zbog document.all).

Btw, relativno pozicioniranje rešava probleme sa aktivnim kontrolama (linkovi, polja formi itd) koji se nalaze u bloku sa transaprentnim PNGom (kao što rekoh gore).

Tema za blog? Ovo podrazumeva malo istraživanja, a ja sam se celoj materiji posvetio taman toliko da je hacknem da radi ;) Sigurno ima još par trikova koje ne znam.

krcko

20. 04. 2006. 14:58

sto se tice linkova koji ne rade u bloku sa transparentnim pngom negde sam procitao da slicica (taj png) mora da bude nekih od sledecih dimenzija: 1x1, 1x2, 1x3, 1x4, 1x7, 1x10, 2x1, 2x2, 3x1, 3x2, 4x1, 4x2, 7x2, 10x2 da bi link radio... mada nisam to isprobavao..

Dragan Babić

20. 04. 2006. 15:25

Jeste, to je fora, inače i ovaj metod pravi istu frku sa aktivnim kontrolama.
Jednostavno sav taj rizik mi je još uvek prevelik... IE će od mene nastavtiti da dobija ružnjikave nazubljene grafike, a ako je ciljna grupa u većini IE korisnika onda batališ alpha fenseraj i kraj priče...

ivanhoe

20. 04. 2006. 20:25

koliko sam citao IE7 beta podrzava png alfa kanal (macintosh verzija je valjda tu podrsku imala odavno), tako da ova cela prica ionako nece jos dugo da bude bitna... bice novih bagova da se lomatamo sa njima :)

Ilija Studen

20. 04. 2006. 20:39

Ova priča će biti aktuelna još godinu i po, dve što je po meni dosta. Za nove bugove nema brige, posali su im TM.

godza

21. 04. 2006. 12:17

Citat:

Originalno napisao Ilija Studen

Ova priča će biti aktuelna još godinu i po, dve što je po meni dosta. Za nove bugove nema brige, posali su im TM.

Mislis da ce samo biti aktuelna godinu i po? Nekako mislim da period koji ce da prodje dok IE6 ne padne ispod 10% (u korist IE7) najmanje 3-4 godine!

ivanhoe

21. 04. 2006. 13:59

^^ pored automatskog windows update-a koji MS toliko forsira? Mislim da ce se vrlo brzo po pojavi 7-ce pojaviti WinXP SP 3 koji ce da bude required i koji ce imati IE7 u sebi naravno, i eto 90% korisnika odmah... videcemo... da vidimo prvo sta ce da bude sa IE7 uospte :)

godza

21. 04. 2006. 14:32

Citat:

Originalno napisao ivanhoe

^^ pored automatskog windows update-a koji MS toliko forsira? Mislim da ce se vrlo brzo po pojavi 7-ce pojaviti WinXP SP 3 koji ce da bude required i koji ce imati IE7 u sebi naravno, i eto 90% korisnika odmah... videcemo... da vidimo prvo sta ce da bude sa IE7 uospte :)

Nisam siguran iskreno, i dan danas oko 10% procenata koristi IE5, a svi znamo koliko je IE5 star.

modeus

01. 05. 2006. 16:13

to je zato sto IE5 dolazi default uz WinXP, ako se ne varam (a mislim da se varam). Imas jos dosta ljudi koji imaju Win98 (chitavih 8 godina mator).

Sa druge strane, mislim da ce IE7 biti deo SP3, a naravno i deo nove Viste.

Ilija Studen

01. 05. 2006. 16:21

WinXP dolazi sa IE6. Dalje, ako me sećanje dobro služi Win 2K dolazi sa IE5 a Millennium Edition sa IE5.5

modeus

01. 05. 2006. 16:23

Verujem da je tako..

kodi	11. 05. 2006. 21:39

u majku mu ..

dobra stvar, nego od kako sam ubacio ovo je prestalo da radi :1092: :mad: :mad:

edit : ne radi u IE 6.0, u ff i dalje drag-uje

kodi	11. 05. 2006. 22:03

detaljnije objasnjenje

HTML kôd:

 <div id="over" >

         <div class="head">

                 <div style="position:relative;margin:0px auto;float:left;text-align:left;"> TITLE </div>

                 

                 <div style="position:relative;float:right;">

                         <a href="#" onMouseDown="dragStart(event,'over','160','90');" ><img src="/images/drag.gif" title="move" alt="move"></a>

                         <a href="#" onClick="hide('over');" ><img src="/images/close.gif" title="close" ></a>

                 </div>

         </div>

 </div>

ovo je CSS

PHP kôd:


		
			
       #over{
       border:solid 1px black;
       width:500px;
       height:450px;
       position:absolute;
       left: 90px;
       top:160px;
         background-image:url('/images/trans33.png');    
       z-index:-1;
      
            }
         
      
      #over div.head{
      font:normal 9px verdana;
      height:22px;
      margin:0px;
      padding-left:8px;
      border-bottom:solid 1px black;
      text-align:right;
      background:#dcdcdc;
      }  
      
            #over div.head img{
            border:none;
       }

u FF-u sve radi u IE radi close i to samo kad kliknem na oznacheno mesto
(vidi sliku)

j

bojan_bozovic

11. 05. 2006. 22:07

Bah! Ako i ne radi, napravite poseban CSS za IE7 a poseban za IE6 i gotovo. HTML i CSS su i napravljeni da se stvar degradira u starihjim browserima, evo ovako

Citat:

<style type="text/css"
div.navigation {
background:transparent url("images/bg.png");
}
</style>

@kodi

Batali AlphaImageLoader, ima bagove sa aktivnim elementima, cak i uz velicine PNG koje bi trebalo da rade. ja koristim resenje gore, IE7 je super, IE6 nije lose.

Probaj ovako Kodi:

Citat:

<style type="text/css"
div.providno {
background:transparent url("images/bg.png");
}
</style>

IE6 ce da ti prikaze div sa crnom pozadinom. Malo li je? IE7 je vec na oficijalnoj MS download strani. Uvek moze u <body></body>

Citat:

Jer vidi ovde http://www.microsoft.com/windows/ie/default.mspx

conica

28. 09. 2006. 21:04

Moram da ozivim ovu temu, posto se upravo susrecem sa jednim problemom.

Naime, u drop down meniju je trans png pozadina. Odradjeno je sve kako treba za IE, ali od recimo 10, donjih 5 prikaze kao linkove. Od 5, donja 3 itd.
Procitala sam da se to resava tako sto se div-u koji sadrzi filter postavlja z index tako da bude ispred svih ali mi to ne radi.

Jel neko imao slican problem?

ivanhoe

29. 09. 2006. 02:04

nisam imao taj problem, ali probaj da ubacis taj div u iframe (mada to nije bas SEO friendly...) cuo sam da to pomaze kod nekih problema sa z-indexom, kad ti treba da je nesto skroz gore...

conica

13. 12. 2006. 22:16

resila sam problem, ali nisam postovala resenje
mislim da ga je neko vec spomenuo ranije...za IE je bitna dimenzija png fajla u pixelima..ja sam konkretno iskoristila 7x1px posto mi je trebao gradijent. sreca pa ie siri taj png na sirinu div-a :)

Dionis6

27. 02. 2007. 17:01

konacno nesto korisno a da nije neki od svih onih web konvertora..

zhille

24. 11. 2007. 06:14

Zar onaj IE7 script Dean Edwardsa nije reshio taj problem??? To je ona ista skripta koja natera IE6 i nizhe da podrzhe min-width i max-width, gomilu CSS2 pravila, kao i neke od CSS3 pravila tipa opacity( nazhalost :( nece da natera IE da podrzhi border-radius)...

U dokumentaciji pishe da ako imate tu skriptu na serveru, treba samo da dodate "-trans" na ime fajla pre ".png", lupam - bg-trans.png. Mozda to bolje radi? Da li je neko imao iskustva s tim. Ja tu IE7 skriptu koristim uveliko ali nisam se nikad zezao s PNG pozadinom.

Nisam imao priliku to da isprobam jer kad god koristim PNG u kombinaciji s JPGom, glupi IE drugachije prikazhe boje u PNG fajlu.

Mladjo

02. 05. 2008. 15:40

Ja sam ovo resavao na sledeci nacin. Recimo png je background u headeru. Styling header kao normalno:

Kôd:

#header {

        padding:0;

        background-color: transparent;

        background-image: url(images/header.png);

        background-repeat: no-repeat;

        background-position: left top;

        height: 75px;

        width: 930px;

}

Posle toga ako je ie6 u head sekciji

Kôd:

<!--[if lte IE 6]>

<link rel="stylesheet" type="text/css"  href="pathtofile/fixed.css" />

<![endif]-->

I na kraju fix. Path do image treba da je apsolute.

Kôd:

#header {

         background-image: none;

         filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.apsolutepath.com/images/header.png'),sizingMethod='scale');

}

Paimonia

25. 05. 2008. 06:37

Citat:

Originalno napisao godza

Nisam siguran iskreno, i dan danas oko 10% procenata koristi IE5, a svi znamo koliko je IE5 star.

Одакле ти ово?

kodi	25. 05. 2008. 07:27

od pre par godina....

daj iskuliraj sa dizanjem mrtvih tema :D

vladv

31. 07. 2008. 13:25

jel neko koristi Jquery PNG fix ?

coppe

06. 01. 2009. 22:18

Ja sam stvar rešio sa: http://www.dillerdesign.com/experiment/DD_belatedPNG/

aleck

22. 01. 2009. 10:10

Ja sam koristio na par sajtova iepngfix, pošto nemam nijedan drugi skript pa bi ubacivanje jQueryja samo zbog toga bio overkill.

Možeš na http://vina.vacic.rs/ da vidiš kako radi. :)

kodi	22. 01. 2009. 10:39

a radi savrseno :)

ZoranPerin

10. 08. 2009. 11:49

Obično koristim iepnxfix ili DD_belatedPNG.

Iepngfix mi je draži zbog jednosatvnije implementacije, ali generalno pravi problem sa transparentnim png-ovima kada ih treba pozicionirati u pozadini (mislim na background i pozicije slike).

DD_belatedPNG je OK, s tim da moraš da navedeš koje elemente treba da fixira.

Sve u svemu, završe posao, ali je tužno što se još uvek obrćemo oko browsera starog 7-8 godina

Bojan Zivanovic

17. 08. 2009. 19:24

Ja na par sajtova koristim supersleight, ima i jquery plugin.
(http://allinthehead.com/retro/338/su...-jquery-plugin)

Jedini problem je sto ne radi background-repeat (to su neki problemi karakteristicni za sve te biblioteke), tako da sam na jednom od sajtova (nrbg.rs) pozadinu morao da konvertujem u jpg (generalno se trudim da ne koristim png tamo gde nije potrebno. PNG fixovi ipak uticu na performanse)

Mladjo

11. 11. 2009. 19:36

Ja koristim ovo:
http://labs.unitinteractive.com/unitpngfix.php
Mada

Kod mene na wordpress temama ne radi nego moram da stavim conditional
<!--[if IE]>

Vreme je GMT +2. Trenutno vreme je 22:46.

Powered by vBulletin® Verzija 3.6.8
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
Copyright © DevProTalk. All Rights Reserved.

Mišljenja, saveti, izjave, ponude ili druge informacije ili sadržaji nastali na Sajtu su vlasništvo onoga ko ih je kreirao, a ne DevProTalk.com, tako da ne morate da se oslanjate na njih.
Autori poruka su jedini odgovorni za ovakve sadržaje. DevProTalk.com ne garantuje tačnost, kompletnost ili upotrebnu vrednost informacija, stavova, saveta ili datih izjava. Ne postoje uslovi pod kojima bi mi bili odgovorni za štetu ili gubitak koji je posledica bilo čijeg oslanjanja na nepouzdane informacije, ili bilo kakve informacije nastale kroz komunikaciju između registrovanih članova.
Web sajt može sadržavati linkove na druge web sajtove na Internetu ili neke druge sadržaje. Ne kontrolišemo niti podržavamo te druge web sajtove, niti smo pregledali bilo kakve sadržaje na takvim sajtovima. Mi nećemo biti odgovorni za legalnost, tačnost ili prikladnost bilo kog sadržaja, oglasa, proizvoda, usluga ili informacije lociranim na ili distribuiranih kroz druge web sajtove, niti za bilo kakvu štetu nastalu kao posledica takvih informacija. DevProTalk.com drži i čuva druga prava vlasništva na web sajtu. Web sajt sadrže materijale zaštićene copyright-om, zaštitne znakove i druge informacije o pravu vlasništva ili softver. Članovi mogu poslatu informacije zaštićene pravima vlasništva njihovih nosilaca i ona ostaju zaštićena bez obzira da li su oni koji prenose te informacije to naveli ili ne. Osim informacija koje su u javnom vlasništvu ili za koje dobijete dozvolu, nemate pravo da kopirate, modifikujete ili na bilo koji način menjate, objavljujete, prenosite, distribuirate, izvršavate, prikazujete ili prodajte bilo koju informaciju zaštićenu pravima vlasništva. Slanjem informacija ili sadržaja na bilo koji deo DevProTalk.com, Vi automatski dozvoljavate i predstavljate garanciju da imate pravo da dozvolite DevProTalk.com ili članovima DevProTalk.com bespovratnu, kontinualnu, neograničenu, globalnu dozvolu da koriste, kopiraju, izvršavaju, prikazuju i distribuiraju takve informacije i sadržaje i da iz takvih sadžaja koriste bilo koji deo u bilo koje svrhe, kao i pravo i dozvolu da koriste gore navedene sadržaje. Svi zaštitni znakovi (trademarks), logotipi, oznake usluga, firme ili imena proizvoda koji se pominju na ovom web sajtu su vlasništvo kojim raspolažu njihovi vlasnici.