swfIR

swf Image Replacement

Contact us!

Round out your options.

Photo example

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 <span> with a class of swfir around any image you’re replacing. Here’s a before and after look at the code:

Before swfIR is included in the page:

<img src="pic.jpg" alt="A picture" id="pic" />

After swfIR is included in the page (rendered source):

<span class="swfir" id="pic">
  [replaced image; code varies by browser]
</span>

Meet the swfIR team

  • Jon Aldinger

    Web developer/rockstar Jon Aldinger has a knack for breaking things, and can sometimes put them back together. Acting as a consultant and tester for swfIR, Jon has always been around to offer valuable advice and order pizza.

  • Mark Huot

    The resident wizard on staff, Mark does all the heavy lifting on swfIR. Responsible for the majority of the Actionscript and JavaScript integration, he brings the dorkiness level of the team to an all time high.

  • Dan Mall

    The brains behind the original idea that led to swfIR, Dan Mall has always had fun imagining “what if”, which is why this site exists in the first place. Surprisingly enough, he runs DanielMall.com, and can probably eat more than you can.

Not behind our backs!

If you have something to say, you can say it to our faces! Comments, suggestions, insults, and tokens of appreciation are all welcome, but some are better-received than others, so please use your discretion. Have at it!

Contact Us

See swfIR in action

Need to see a couple of examples? See how swfIR works in the sample pages below. And should you like the effect, you can claim it as your very own!

Four Steps to swfIR

Don’t know much about JavaScript or Flash? Don’t have much time? Lazy? Not to worry; getting swfIR up and running is a breeze. Here’s all you need to do:

  1. Download swfIR (11.89 KB) swfir_v1.zip
  2. Upload swfir.js and swfir.swf into the same directory on your web server
  3. Include the swfIR JavaScript file in the <head> of your document like this:
    <script type="text/javascript" src="swfir.js"></script>
  4. Choose which features to apply to which image:
    var borders = new swfir();
    borders.specify("border-radius", "15");
    borders.swap("#content img");

    You may choose from any of these parameters:
    • 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

Sticks in the Spokes

As much as we hate it, we’re not perfect, and neither is swfIR. Here are some little problems we’ve come across and/or are working to fix:

  • 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

Find a problem on your own? Tell Us

Support the Cause

swfIR is a labor of love, a project that we work on in our downtime. Any contributions will surely help to motivate further development. Thanks!