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…
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");
}
Comments (3)
Anu says:
my code doesnt work.. Can u guess y?
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit.
window.onload = function(){
round = new swfir();
round.specify(‘src’, ‘/swfir.swf’);
round.specify(‘border-color’, ‘ffffff’);
round.specify(‘border-radius’, ’10′);
round.swap(“#round”);
}
Anu says:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
window.onload = function(){
round = new swfir();
round.specify(‘src’, ‘/swfir.swf’);
round.specify(‘border-color’, ‘ffffff’);
round.specify(‘border-radius’, ’10′);
round.swap(“#round”);
}
Anu says:
Errr….. i’m trying to copy paste the code. But it is only pasting half of the code.. Wonder y…