Example 1: sIFR Plain replacement

To enable usual sIFR replacement use such code:

HTML

<h1 class="example1">sIFR Plain replacement</h1>

JavaScript

sIFR.replace(fDiavlo, {
  selector: 'h1.example1',
  css: '.sIFR-root { background-color: #F9F9F9; color: #775555; }'
});
/*
 fDiablo - object with source path to .swf file (example: {src: '/swf/diavlo.swf'} )
 selector - css-like selector string
 css - styles to be used in flash object. ".sIFR-root" is base style for all object 
*/

Example 2: sIFR replacement with different colors and styles.

HTML

<h1 class="example2">Example 2: sIFR <a href="#example2">replacement</a> with <strong>different colors</strong> and <em>styles</em>.</h1>

JavaScript

sIFR.replace(fCochin, {
	selector: 'h1.example2',
	css: [
		'.sIFR-root { color: #775555; }',
		'em { font-style:italic; color: #444477; }',
		'strong { font-style:bold; color: #44aa44; }',
		'.bold { font-style:bold; text-decoration:underline; }',
		'a { color: #aa4444; }',
		'a:hover { color: #bbbb44; }',
	]
});
/*
 css - this property can be an array of styles also. use tag name as css-selector to re-define styles. 
*/

Notes: Please do not use attributes for inner tags. If you do this tags can be ignored.
Tags available to re-style are: <a>, <strong>, <em>, <span>.
If you want to use <span> tag you should assign some class attribute to it and style this element using class selector (".bold" in our example).

Example 3: sIFR Plain replacement with transparent mode

-- H2 tag use transparent mode here and background is visible --

HTML

<h2 class="example3">-- H2 tag use transparent mode here and background is visible --</h2>

JavaScript

sIFR.replace(fDiavlo, {
	wmode: 'transparent',
	selector: 'h2.example3',
	css: '.sIFR-root { color: #ddaaaa; }'
});
/*
 wmode - used to set wmode for <object> params
*/

Example 4: sIFR text with shadow

To enable usual sIFR replacement use such code:

HTML

<h1 class="example4">Example 4: sIFR text with shadow</h1>

JavaScript

sIFR.replace(fCochin, {
	selector: 'h1.example4',
	css: '.sIFR-root { color: #aa7777; }',
	filters: {
    DropShadow: {
      knockout: false,
      distance: 3,
      color: '#cccccc',
      strength: 3,
      angle: 120 
    }
  }
});
/*
 knockout - set to "true" or "1" to disable sIFR main color (it becomes white)
 angle - by default is 60 (right and bottom)
*/

Note: Also such filters are available: DisplacementMap, ColorMatrix, Convolution, GradientBevel, GradientGlow, Bevel, Glow, Blur, DropShadow