swfIR (swf Image Replacement) is here to solve some of the design limitations of the standard HTML image and its widely-accepted associated CSS values, while still supporting standards-based design concepts. Using the dark arts of JavaScript and Flash, swfIR gives you the ability to apply an assortment of visual effects to any or all images on your website. Through progressive enhancement, it looks through your page and can easily add some new flavor to standard image styling.

Go to the swfIR website

I’ve created a sample page to see it in action! It’s a pity that swfIR doesn’t work in combination with Mootools or Prototype…

View example

Add the javascript after the elements that has to be modified and before the tag. Specify the selector by id or class.

Rotate image

window.onload = function(){
	rotate = new swfir();
	rotate.specify('src', 'js/swfir.swf');
	rotate.specify('rotate', '-5');
	rotate.swap("#rotate");
}

Rounded corners

window.onload = function(){
	round = new swfir();
	round.specify('src', 'js/swfir.swf');
	round.specify('border-color', 'ffffff');
	round.specify('border-radius', '10');
	round.swap("#round");
}

Border

window.onload = function(){
	border = new swfir();
	border.specify('src', 'js/swfir.swf');
	border.specify('border-color', '333333');
	border.specify('border-width', '5');
	border.swap("#border");
}

Shadow

window.onload = function(){
	shadow = new swfir();
	shadow.specify('src', 'js/swfir.swf');
	shadow.specify('shadow-blur', '5');
	shadow.specify('shadow-strength', '.3');
	shadow.swap("#shadow");
}

All ajustments

window.onload = function(){
	all = new swfir();
	all.specify('src', 'js/swfir.swf');
	all.specify('src', 'js/swfir.swf');
	all.specify('rotate', '-5');
	all.specify('border-color', 'ffffff');
	all.specify('border-radius', '10');
	all.specify('border-color', '333333');
	all.specify('border-width', '5');
	all.specify('shadow-blur', '15');
	all.specify('shadow-strength', '.3');
	all.swap("#all");
}