De beste oplossing om met transparante afbeeldingen te werken in websites is het gebruik van PNG-afbeeldingen in plaats van de vroeger populaire GIF-afbeeldingen. Het nadeel aan GIF’jes is namelijk dat een pixel óf een kleur heeft, óf transparant is. PNG’s hebben daar geen last van, bij een PNG kan een pixels ook deels transparant zijn en daarom zijn de overgangen vloeiender.
De inmiddels verouderde browser Internet Explorer heeft echter problemen met het weergeven van transparante PNG’s. Je zal zien dat Internet Explorer het transparante deel vervangt door een egale kleur.
Drew McLellan heeft hiervoor een oplossing gevonden: SuperSleight.
Deze oplossing:
- werkt zowel voor achtergrondafbeeldingen als ‘gewone’ afbeeldingen
- geeft automatisch ’position: relative’ in voor links en formulieren (kan uitgezet worden)
- kan voor een volledig bestand gebruikt worden, of voor een deel van een bestand
- verandert ’scaleMode’ naar ’crop’ i.p.v. ’scale’ bij achtergrondafbeeldingen met ‘no-repeat’
- is compatibel met AJAX-requests
Ik gebruik SuperSleight al een tijdje en ben er erg te spreken over. Gebruik de volgende link om SuperSleight te downloaden:
Je kunt SuperSleight eenvoudig gebruiken door de volgende code in de <head> van je pagina te plaatsen:
<!--[if lte IE 6]>
<script type="text/javascript" src="supersleight-min.js"></script>
<![endif]-->
Je moet hooguit het pad naar het bestand aanpassen, als je het JavaScript-bestand in een andere map installeert. Als je om performance-redenen ervoor zou willen kiezen om SuperSleight alleen te activeren op bepaalde elementen zou je onderin het script supersleight.init() moeten vervangen door supersleight.limitTo() waarmee je het alleen op bepaalde elementen kunt toepassen.