Tutorials
PNG tranparantie in IE en FF
Met deze tutorial leer je om een png met transparantie in IE goed weer te geven. Daarnaast bouwen we een browsercheck in om ervoor te zorgen dat het in zowel FF als IE goed gaat werken.
Pagina 1
PNG transparantie in IE en FF
We gaan maar eens beginnen.
Ten eerste maken we twee id's aan in css.
De ene id gaan we maken voor IE (Internet Xplorer), zodat deze transparante PNG's goed weergeeft en geen lelijk grijs vak eromheen. De tweede wordt voor de andere browsers gebruikt, waaronder FF (FireFox). Deze hebben namelijk wel een fatsoenlijk PNG support.
#pngIE {
fillter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=locatie/naamplaatje.png');
background-repeat:no-repeat;
}
#pngFF{
background-image:url(locatie/naamplaatje.png);
background-repeat:no-repeat;
}
In deze id's kun je natuurlijk de andere attributen naar vrije wil gebruik. Denk hierbij aan width en height en dergelijke.
Nu je dat hebt toegevoegd aan je stylesheet, heb je nog geen stylesheet sla bovenstaande code dan op als: styles.css.
Nu de PHP code:
De code zet je neer op de plek waar je de id wilt gebruiken. Dus waar je PNG plaatje komt te staan.
Hier de code:
<?
$browser = $_SERVER['HTTP_USER_AGENT'];
$version = explode(" ",$browser);
if($version[2] == "MSIE"){
echo 'pngIE';
}
else{
echo 'pngFF';
}
?>
Het bovenstaande script bekijkt wat de gebruikers zijn browser is en wijst vervolgens het goede id toe.
Vergeet bovenaan tussen je <head> en </head> niet de volgende regel neer te zetten om de stylsheet te includen:
<link href="styles.css" rel="stylesheet" type="text/css">
Zo nu heb je je PNG'tje goed zichtbaar in IE en komt hij ook te voorschjn zonder kleerscheuren in FF
Ten eerste maken we twee id's aan in css.
De ene id gaan we maken voor IE (Internet Xplorer), zodat deze transparante PNG's goed weergeeft en geen lelijk grijs vak eromheen. De tweede wordt voor de andere browsers gebruikt, waaronder FF (FireFox). Deze hebben namelijk wel een fatsoenlijk PNG support.
#pngIE {
fillter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=locatie/naamplaatje.png');
background-repeat:no-repeat;
}
#pngFF{
background-image:url(locatie/naamplaatje.png);
background-repeat:no-repeat;
}
In deze id's kun je natuurlijk de andere attributen naar vrije wil gebruik. Denk hierbij aan width en height en dergelijke.
Nu je dat hebt toegevoegd aan je stylesheet, heb je nog geen stylesheet sla bovenstaande code dan op als: styles.css.
Nu de PHP code:
De code zet je neer op de plek waar je de id wilt gebruiken. Dus waar je PNG plaatje komt te staan.
Hier de code:
<?
$browser = $_SERVER['HTTP_USER_AGENT'];
$version = explode(" ",$browser);
if($version[2] == "MSIE"){
echo 'pngIE';
}
else{
echo 'pngFF';
}
?>
Het bovenstaande script bekijkt wat de gebruikers zijn browser is en wijst vervolgens het goede id toe.
Vergeet bovenaan tussen je <head> en </head> niet de volgende regel neer te zetten om de stylsheet te includen:
<link href="styles.css" rel="stylesheet" type="text/css">
Zo nu heb je je PNG'tje goed zichtbaar in IE en komt hij ook te voorschjn zonder kleerscheuren in FF
Reacties
0