IE6 – PNG Hack
Tegenwoordig wordt er bij de opmaak van een website veel gebruik gemaakt van transparante PNG’s welke in Photoshop zijn aangemaakt. Nu, met nog altijd menig wat IE6 gebruikers, is dat een probleem mits deze verouderde browser geen transparante PNG’s ondersteund.
Ofwel kan je tegen je bezoekers zeggen dat ze hun browser moeten upgraden naar een recente en fatsoenlijke browser ofwel ga je een PNG hack toepassen zodat dit probleem in IE6 van de baan is.
Met optie 1 ga je je uiteraard niet mee bezighouden dus opteren we voor optie 2. Hoe implementeer je zoiets? Welke hack gebruik je hiervoor?
Een kleine tutorial hierover.
Eén van de beste PNG hacks op internet is het script supersleight van 24 ways.
Stap 1 :
Download het script, na het uitpakken heb je volgende mappenstructuur :
- supersleight-min.js
- supersleight.js
- x.gif
Stap 2 :
Kopieer deze 3 items in de root van je directory.
Stap 3 :
Kopieer onderstaande code in de head van je pagina waar je transparante PNG’s gebruikt.
<!--[if lte IE 6]> <script type="text/javascript" src="supersleight-min.js"></script> <![endif]-->
Dit wil zeggen dat het script “supersleight-min.js” dient toegepast te worden indien de browser lager of gelijk is aan IE6.
Zo… Meer is het niet. Nu kan je met een gerust hart werken met transparante PNG’s, welke van veel betere kwaliteit zijn dan GIF’s.
Nog vragen? Bezoek het forum...
:
Indien je het nuttig vond mag je altijd een bericht achterlaten of u inschrijven op onze nieuwsbrief om altijd op de hoogte te blijven.
Comments
Ja inderdaad… Bij mij zijn er ook al een hoop voorbij gekomen zonder goed resultaat. Deze is het beste wat ik tot nu toe ben tegen gekomen.
Groetjes
Cicco
Kort geleden ook vanalles geprobeerd, inclusief bovengenoemd script. Maar het beste wat ik ben tegengekomen, is eigenlijk nog veel simpeler:
http://www.sitepoint.com/blogs/2007/09/18/png8-the-clear-winner/
In ‘t artikel hebben ze ‘t nog over een pngquant en een pngnq, maar er wordt bijverteld dat Fireworks ‘t klusje ‘t beste klaart.
En idd: het werkt fantastisch!
Is er iemand die mij kan vertellen welke fout ik maak? Ik heb de javascript erin gezet zoals hierboven beschreven, maar als ik de site bekijk (in ie6) dan werkt de transparantie nog steeds niet. De site kun je bekijken op http://www.bakkerijbroekmans.nl
B.v.d.
Slieps
Slieps,
Bij mij werkt het het. Enkel zie ik dat je de image x.gif niet online hebt gezet en dat je nu een rood kruisje krijgt bij de afbeeldingen.
Zet deze even online en test het in een geïnstalleerde IE6. Niet in een standalone versie.
Zoals ik het hier zie moet je enkel nog de image x.gif online zetten.
Groetjes
Cicco
Heb deze hack (http://www.twinhelix.com/css/iepngfix/) ook geprobeerd (wat goed werkt) maar enkel in mijn menu (met afbeeldingen) wil hij niet werken…
Nu heb ik deze hack geprobeerd en net hetzelfde probleem. Begin er een beetje moedeloos van te worden.
Woeps … mijn code bij “werkt niet maar werkt wel” wordt natuurlijk als XHTML geïnterpreteerd. Dom van me! 
)
Als de afbeelding in een link staat, werkt het niet. Staat de afbeelding zonder een link in de pagina, werkt het wel.
Dat is wat ik bedoelde )
Voorlopig zijn we nog steeds bezig aan de site en staat deze nog niet online…
Ik heb echter wel een andere oplossing gevonden (http://www.komodomedia.com/blog/2007/11/css-png-image-fix-for-ie/) waarbij mijn probleem opgelost is. Mijn menu wordt nu wel correct weergegeven…
Uhm er gebeurt wel iets maar de afbeeldingen zijn weg?
de hele afbeelding is gewoon pleite…
Kan iemand mij vertellen waarom dit gebeurt?
Groetjes,
Dave
Uhm er gebeurt wel iets maar de afbeeldingen zijn weg?
de hele afbeelding is gewoon pleite…
Kan iemand mij vertellen waarom dit gebeurt?
Groetjes,
Dave
Hallo Dave,
Het zou handiger zijn als je wat specifieker zou zijn… Voorbeeld? Op deze manier is het maar gokken wat er mis zou zijn.
Je kan ook altijd het forum gebruiken om je te laten helpen.
Groetjes
Cicco
Ik kan momenteel geen voorbeeld laten zien maar het zit zeg maar in een map(nieuw) kan dat de oorzaak zijn?
Er staat over de root maar dat is gewoon de index toch?
Groetjes,
Dave
Super hack! Heb er een tijd geleden al is een boel geprobeerd, maar veel hacks/oplossingen werkten toen niet.
Deze werkt daarentegen uitstekend, thanks!