artikelen > erik > volledige PNG ondersteuning in IE 6

De mogelijkheden van een webdesign worden vaak enigszins beperkt door het nog wijd verspreid gebruik van de browser Internet Explorer 6. Wat is namelijk het geval? Internet Explorer 6 (IE 6) ondersteunt het gebruik van png afbeeldingen niet.

PNG afbeeldingen

De kracht van het png bestandsformaat ligt in de ondersteuning van gedeeltelijke transparantie door middel van een alfa kanaal. De beste manier om de voordelen van dit bestandsformaat te tonen is door middel van het volgende voorbeeld:

Dit is een (x)html div die gebruik maakt van een png achtergrond. Een Hyperlink is nog steeds "klikbaar" in IE6.

De bovenstaande animatie bestaat uit twee (x)html div's waarvan de bovenste de volgende png afbeelding als achtergrond gebruikt. Het semi-transparante effect is niet mogelijk met andere bestandsformaten (jpg, gif) die door browsers worden ondersteund.

Gelukkig is er een manier om volledige ondersteuning voor png's in IE6 te bereiken. De oplossing omvat een eenvoudig stukje javascript en een paar gemakkelijk op te volgen regels binnen css. Op het web zijn meerdere oplossingen te vinden die gebruik maken van javascript maar in de meeste gevallen werken deze scripts maar gedeeltelijk of bevatten ze zoveel code dat dit een negatieve invloed heeft op de performance van de site.

Verder bevatten deze scripts vaak de volgende fouten:

  1. Het gebruik van een png als achtergrond afbeelding is niet mogelijk.
  2. Het gebruik van een png als achtergrond afbeelding is wel mogelijk maar het is niet mogelijk om de afbeelding te "tilen"(herhalen).
  3. De grootste fout: Interactieve elementen binnen een html container(div, table e.d.) met een png als achtergrond afbeelding zijn niet meer interactief. Ofwel: er kan niet meer op links worden geklikt, tekst in tekstvelden kan niet meer ingevuld worden en knoppen op formulieren werken niet meer.
De oplossing

Het belangrijkste deel van de oplossing van deze problemen bestaat uit het volgende stukje javascript.

var PngFix = {};
PngFix.SpacerGifUrl = 'spacer.gif';
PngFix.Init = function(){
for (var i = document.all.length - 1, obj = null; (obj = document.all[i]); i--)
{
//achtergrond pngs
if (obj.currentStyle.backgroundImage.match(/\.png/i) !== null)
{
var mode = 'scale';
var bg = obj.currentStyle.backgroundImage;
var src = bg.substring(5,bg.length-2);
if (obj.currentStyle.backgroundRepeat == 'no-repeat')
{
mode = 'crop';
}
obj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='" + mode + "')";
obj.style.backgroundImage = 'url(' + PngFix.SpacerGifUrl + ')';
}
// image elementen
if (obj.tagName=='IMG' && obj.src.match(/\.png$/i) !== null)
{
var src = obj.src;
obj.style.width = obj.width + "px";
obj.style.height = obj.height + "px";
obj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='scale')";
obj.src = PngFix.SpacerGifUrl;
}
//toevoegen van position:relative aan interactieve elementen
if ((obj.tagName=='A' || obj.tagName=='INPUT' || obj.tagName == 'TEXTAREA') && obj.style.position === '')
{
obj.style.position = 'relative';
}
}
};
window.attachEvent('onload', PngFix.Init);

Het script is een compactere versie van het supersleight script te downloaden via 24 ways. Het script bevat slechts één object genaamd PngFix welke de volgende 2 "members" bevat:

  1. De property "SpacerGifUrl", deze property bevat de url van een transparante gif met een willekeurige grootte(bv 1 pixel).
  2. De functie "Init", deze functie omvat alle logica van het object.
De PngFix.Init functie

De Init functie doorzoekt in feite de gehele DOM naar Image objecten die een png afbeelding als bron gebruiken en html container objecten die een png als achtergrond gebruiken. Bij al deze objecten wordt vervolgens een filter genaamd "AlphaImageLoader" aangebracht via de (niet tot de standaarden behorende)css filter property. Het AlphaImageLoader filter zorgt ervoor dat png's correct worden weergegeven in IE6. Als laatste wordt bij alle interactieve elementen (links, tekstvelden, e.d.) de css "position" property op "relative" gezet.

Het script wordt geïnitialiseerd door de PngFix.Init functie aan de window.load event toe te voegen op de volgende manier:
window.attachEvent('onload', PngFix.Init);
Merk op dat dit de manier is waarop Internet Explorer EventHandlers/Listeners registreert, maar aangezien het script alleen bestemd is voor IE6 levert dit geen problemen op in andere browsers.

Omdat het script alleen door IE 6 mag worden gelezen, moet het op de volgende manier aan de pagina worden toegevoegd:

<!--[if lte IE 6]>
<script type="text/javascript" src="pngfix.js"></script>
<![endif]-->

Nu kunnen zowel png achtergronden als png afbeeldingen gebruikt worden in de website. Er moeten echter nog een aantal regels in acht worden genomen, namelijk:

  1. HTML container elementen (div's, tables e.d.) met png achtergronden mogen GEEN css position property gedefinieerd hebben. Met andere woorden, wanneer (x)html op de volgende manier wordt toegevoegd:
    <div style="position:relative;background:url(een url naar een png) repeat 0 0">
    <a href="een url">Link</a>
    </div>
     Zal de link niet werken.
  2. HTML container elementen (div's, tables e.d.) met png achtergronden MOETEN de css width property gedefinieerd hebben. Zonder de width property wordt er geen achtergrond afbeelding getoond. Correct opgebouwde (x)html ziet er dus als volgt uit: <div style="background:url(een url naar een png) repeat 0 0;width:300px">
    <a href="een url">Link</a>
    </div>
  3. Alle interactieve elementen binnen een container element met een png achtergrond MOETEN de css position property op relative zetten(dit wordt door het script afgehandeld).
  4. Als er ancestor(voorouder) elementen van een container element met png achtergrond met "position:relative" zijn gedefinieerd moet één van deze elementen of een ancestor van deze elementen ook de width property(niet in percentages) definiëren. In sommige gevallen verdwijnen anders de interactieve elementen bij het vergroten/verkleinen van de browser. In het onderstaande voorbeeld moet dus bij minimaal één van de gemarkeerde div's de css width property in pixels worden gedefinieerd. <div>
    <div style="position:relative;">
    <div style="background:url(een url naar een png) repeat 0 0;width:300px;">
    <a href="een url">LINK</a>
    </div>
    </div>
    </div>
Samenvattend:
    Voeg het script op de volgende manier aan de pagina toe:
    <!--[if lte IE 6]>
    <script type="text/javascript" src="pngfix.js"></script>
    <![endif]-->
  1. Zorg dat er een transparante gif afbeelding aanwezig is en dat SpacerGifUrl property van het PngFix object de url van deze gif bevat(bv PngFix.SpacerGifUrl = 'images/spacer.gif';).
  2. Zorg ervoor dat geen enkel (x)html container element met een png als achtergrond de css position property gedefinieerd heeft.
  3. Zorg ervoor dat elk (x)html container element met een png als achtergrond de css width property gedefinieerd heeft.
  4. Heeft een (x)html container met een png achtergrond ancestor elementen die de css position property op relative hebben gezet, zorg dan dat minimaal één ancestor element ook een width property gedefinieerd heeft.

Klik op de onderstaande download link voor een compleet werkend voorbeeld.

Download

Opmerkingen, suggesties? Geef uw reactie. Wij behouden ons het recht niet ter zake doende reacties te verwijderen.


Disclaimer | Voorwaarden | Copyright 2005-2006 © PlanIt Works