Scribd Logo
Upload

Welcome to Scribd!

  • Swfir

    Uploaded by

    Juan Quinquin
    18 views4 pages
    Swfir is a SWF Image Replacement technique to swap out boring html img tags and replace them with richer stylized graphics. It can be applied to any image at w ich time the image will be brought into flash, styled as specified and rendered in th e same position as the original img tag.

    Original Description:

    Original Title

    swfir

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    Swfir is a SWF Image Replacement technique to swap out boring html img tags and replace them with richer stylized graphics. It can be applied to any image at w ich time the image will be brought into flash, styled as specified and rendered in th e same position as the original img tag.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    18 views4 pages

    Swfir

    Uploaded by

    Juan Quinquin
    Swfir is a SWF Image Replacement technique to swap out boring html img tags and replace them with richer stylized graphics. It can be applied to any image at w ich time the image will be brought into flash, styled as specified and rendered in th e same position as the original img tag.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 4

    // ======================================================================== ================== // swfir!

    // ======================================================================== ================== // Copyright 2006, 2007 Jon Aldinger, Mark Huot // and Dan Mall // // This software is licensed under the CC-GNU LGPL // http://creativecommons.org/licenses/LGPL/2.1/ // ----------------------------------------------------------------------------------------swfir is a SWF Image Replacement technique to swap out boring html img t ags and replace them with richer stylized graphics. It can be applied to any image at w hich time the image will be brought into flash, styled as specified and rendered in th e same position as the original img tag. To get started just follow these steps: 1. Download swfir! -- You've done that already, obviously, or you wouldn 't be reading this readme. 2. Upload swfir -- Place the js and swf in the SAME folder as your HTML page. If you need to place them in a different directory make sure to update your JS <script /> tag as well as the swfir "src" parameter (more on that in a bit). 3. Include the JS -- Just like any other JS simply place the script tag inbetween the opening <head> and closing </head> tags like so: <head> <script type="text/javascript" src="swfir.js"></ script> </head> 4. Specify the styles -- Here's the tricky part, you'll want to copy the se first lines directly into the bottom of your <body> <script type="text/javascript"> window.onload = function() { var sir = new swfir(); } </script> Then, below the "new swfir();" line you can add the styles you'd like to apply. The possible styles are listed below in the Parameters secti on. They are applied like so: sir.specify([parameter], [value]); Notice the first parameter is the name and the second parameter

    is the value. That means a sample implementation could look like this: sir.specify("border-width", "20"); sir.specify("border-color", "fff"); Note: This is where you will define your SWF path (if it's not i n the same directory as your html). You can set it with the parameter name o f "src": sir.specify("src", "/swf/swfir.swf"); Lastly, you define which images should be affected by the styles (in case you don't want) it on every image. This is done with the swap() m ethod. It accepts a standard CSS selector inside quotes. sir.swap("#example img"); Note 1: The selector could be just "img" to affect every image o n the page. Note 2: If the styled swfir object isn't the correct size when t he page loads try placing the swfir command into a window.onload event as shown below: <script type="text/javascript"> window.onload = function() { var sir = new swfir(); sir.specify("border-width", "20"); sir.specify("border-color", "fff"); sir.swap("#example img"); } </script> That's it! Have fun and do let us know if something isn't quite working , we'll always be accessible through http://www.swfir.com // ----------------------------------------------------------------------------------------# Available swfir Parameters: border-radius border-width border-color shadow-offset shadow-angle shadow-alpha shadow-blur-x shadow-blur-y shadow-strength shadow-color shadow-quality shadow-inner shadow-knockout = = = = = = = = = = = = = Number Number CSS Styled Color Number Number Number between 0 Number Number Number CSS Styled Color Number between 0 Boolean (true or Boolean (true or

    (i.e. fc600) - 100

    (i.e. fc600) - 1 false) false)

    shadow-hide rotate overflow link src wmode elasticity

    = = = = = = =

    Boolean (true or false) Number between -359 - 359 'expand-x', 'expand-y' or 'fit' String (i.e. http://www.swfir.com) String (path to your swf, if not standard) String ('opaque', 'transparent', etc.) String ('true'), Number (pixel-to-em ratio)

    // ----------------------------------------------------------------------------------------# Sample Implementations See more at: http://build.swfir.com/examples/ window.onload = function() { sir = new swfir(); sir.specify("border-width", "20"); sir.specify("border-radius", "15"); sir.specify("border-color", "fff"); sir.specify("rotate","-5"); sir.specify("shadow-blur", "15"); sir.specify("background-color", "9dcee0"); sir.specify('src', '/swfir.swf'); sir.swap("#example img"); } window.onload = function(){ elastic = new swfir(); elastic.specify('src', '/swfir.swf'); elastic.specify('elasticity', 'true'); elastic.swap('img'); } window.onload = function(){ rotate = new swfir(); rotate.specify('src', '/swfir.swf'); rotate.specify('rotate', '-5'); rotate.swap("img"); } window.onload = function(){ round = new swfir(); round.specify('src', '/swfir.swf'); round.specify('border-color', 'ffffff'); round.specify('border-radius', '10'); round.swap("img"); } // ----------------------------------------------------------------------------------------# Notes sir.swap() accepts a CSS "#photo" "#conatiner img" r' "img[alt='Head Shot']" Selector so any of the following are valid: to grab an image with an id of 'photo' to grab all images with a div having an id of 'containe to grab all images with an alt of 'Head Shot'

    Setting 'elasticity' to 'true' will set your swf widths in em's instead of pixel s. This way your images will resize when the text does, perfect for elastic layouts! Or, if you know your pixel to em ratio (usually 10 for a body font-size of 62.5%) you can specify it here and skip the auto calculation, saving you a few milliseconds on your render.

    You might also like