Om de HTML te voorzien van CSS met sIFR enhancements,heb je JavaScript nodig:
var calibri = { src: 'calibri.swf' };
sIFR.activate(calibri);
Plaats deze code in de <head>, nadat sifr.js is geladen.
uitleg: als eerste creeeren we een (flash) object in de variabele calibri
welke een referentie heeft naar de Flash movie 'calibri.swf'.
Vervolgens wordt sIFR geaktiveerd door het object door te geven via de sIFR
function activate. Hierdoor wordt door sIFR de Flash movie in de achtergrond
geladen, zodat het in de browser-cache belandt voordat sIFR elementen gaat 'replacen'.
Indien dit niet wordt gedaan dan kan dit er toe leiden dat de Flash-movie diverse
keren in de browsers IE en Safari wordt gedownload.
Voorbeeld van een replacement van de #header-wit heading
We geven dus het object door wat eerder gecreeerd is ('calibri'). sIFR gebruikt
de arguments van dit object, en ook die van het tweede object wat doorgegeven
wordt. Dit betekent dat je generieke arguments op het `calibri` object kunt
plaatsen, en specifieke arguments op het tweede object.
sIFR.replace(calibri, {
selector: '#header_wit',
css: '.sIFR-root { color: #FFFFFF; \
background-color: #CC0033; }'
});
Hierboven wordt CSS gebruikt in de Flash movie. `.sIFR-root` is van toepassing op de gehele movie. De CSS properties zijn vanzelfsprekend. Flash ondersteunt een subset van CSS, en sIFR heeft een paar andere properties toegevoegd. Je kunt de volledige lijst bekijken op http://wiki.novemberborn.net/sifr3/Styling.
Nog een voorbeeld van een replacement
sIFR.replace(calibri, {
selector: '#header_zwart',
css: '.sIFR-root { color: #000000; }',
transparent: true
});