swfIR - SWF Image Replacement [with style]

The swfIR team over at swfIR.com has put together a handy widget for styling images in your site. The library utilitizes JavaScript and Flash to produce a variety of image effects like shadows, rounded corners (with or without borders), rotation, and borders.

From the swfIR homepage:

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.

When you start to use swfIR, you’ll need the ability to style it, the same way that you can do with regular images. To get around browser inconsistencies, swfIR adds a with a class of swfir around any image you’re replacing.

The library and its required files are about 11.89 KB.

<script type="text/javascript" src="swfir.js"></script>

Once the library is included you can take advantage of its features:
var borders = new swfir();
borders.specify("border-radius", "15");
borders.swap("#content img");

Here are the properties you have available:

border-radius
border-width
border-color
shadow-offset
shadow-angle
shadow-alpha
shadow-blur
shadow-blur-x
shadow-blur-y
shadow-strength
shadow-color
shadow-quality
shadow-inner
shadow-knockout
shadow-hide
rotate
overflow
link
elasticity

There are some issues with swfIR that the creators make us aware of, and they are:

  • Resizing/zooming in Opera crashes the browser
  • Flash of unstyled content: images load first before JavaScript replaces them
  • alt text is not preserved upon replacement
  • HTML right-click options are disabled
  • Incompatible with other JS libraries like Prototype or MooTools
  • Doesn’t work with hot-linked images because of security restrictions in Flash

Visit the swfIR homepage to view some demos and to download the source

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <pre> <div> <blockquote> <object> <embed> <img> <param>
  • Lines and paragraphs break automatically.
  • Web page addresses and e-mail addresses turn into links automatically.

More information about formatting options

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
Copy the characters (respecting upper/lower case) from the image.