swfIR: Ajust your images on the fly

Today I’ve found something on the internet: swfIR. This flash based widget allows you to rotate images, adds rounded corners (even to Internet Explorer), borders and shadow to specified elements.

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");
}

Related Posts

• Create a dynamic object in JavaScript (0)
• jsFiddle (0)
• Transitions (0)
• Mootools 1.2 cvStepSlider class (0)
• Mootools 1.2 cvSlideShow class (0)
• Mootools 1.2 cvIndex class (0)
• Mootools 1.2 cvMultipleGooglemaps class (0)
• Mootools 1.2 basics (0)

Leave a Comment

Get your own Gravatar!
Your email will never be published!