Posted by DaPino in Transparante .png wordt goed weergegeven in Internet Explorer 7.0
In internet explorer 6.0 of lager wordt de transparantie weergegeven met een grijsvlak.
Een oplossing zou kunnen zijn om je transparante afbeelding op te slaan als .gif maar dit ziet er niet heel fraai uit, we gaan alleen voor kwaliteit.
Oplossing transparante afbeelding
Om nu een transparante afbeelding goed weer te geven in IE6 en lager doe je het volgende:
1.
Copy onderstaande tekst in de pagina tussen in de HEAD waar de betreffende transparante image in png moet worden weergegeven:
<!–[if gte IE 5.0]>
<script type=”text/javascript” src=”pngfix.js” mce_src=”pngfix.js”></script>
<![endif]–>
2.
Download pngfix.js
en upload dit naar je webdirectory.
Als er op meerdere pagina’s transparante afbeeldingen zijn, moet er op elke pagina punt 1 worden weergegeven.
NB: In het bovenstaande ben ik uitgegaan vanuit de root in je webdirectory staat. Mocht dit niet zo zijn en er is bijvoorbeeld een map met de naam “scripts” dan zet je bij stap 1:
<!–[if gte IE 5.0]>
<script type=”text/javascript” src=”scripts/pngfix.js”></script>
<![endif]–>
en upload het pngfix.js naar het mapje “scripts”.
Download hier een voorbeeld met alle bestanden
Een live voorbeeld is hier en hier waar tranparante png afbeeldingen staat.
Mocht deze fix voor jou niet werken, neem dan even kontakt op.
Hoi,
Bedankt voor de heldere uitleg.
Wat ik mij afvraag:
Hoe werkt het als je de png’s inlaadt via je CSS?
Ik heb een probleem met deze site (in opbouw)
http://www.dainamics.nl/test
Mijn buttons en divs zien er niet uit in IE6 en lager.
Groetjes Addy
Hoi Addy, met het volgende zou het moeten werken:
div.[jouwdiv] {
height: 100px;
width: 100px;
position: relative;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’images/jouwimages.png’, sizingMethod=’scale’);
}
* > .jouwdiv {
background-image(images/jouwimages.png);
}
Kun je hier wat mee?
@Red-star,ja je kunt dit o.a. testen op
Vast wel!
http://browsershots.org/
Ben benieuwd of het is gelukt
Hoi, ik probeer deze methode nu toch ook al een hele tijd uit, maar bij mij wilt het maar niet lukken…
het is deze site: http://www.vache.ohawk.com/ghannah/ghannah2.html
Kheb png images in mijn div’s staan (2)
en verdorie toch, wat ik ook probeer, het wilt ni marcheren…
Iemand help?
@Evelynn
Bij mij werkt het ook van geen kanten… Ik heb een mailtje gestuurd…
Ik heb het net getest, De referenties die het bericht staan werken ook niet. Check http://browsershots.org/http://www.dapino-graphics.nl/.
Ben wel erg benieuwd of iemand anders nog een goede oplossing heeft?