SwfIR est un script non intrusif, c'est-à-dire qu'outre le fait que vous devez linker un fichier JavaScript à votre page, vous n'avez pas besoin de modifier le code XHTML de votre page.

Ce script permet à vos images d'appliquer des styles inexistants en CSS2 : ombres portées, bordures arrondies, coins arrondis, rotation.

Le principe est que SwfIR va remplacer les images que vous aurez spécifiées par un Flash qui intégrera ces images pour leur appliquer ces styles.

Petit exemple :

Voir la demo

Vous pouvez consulter les quelques démos misent à disposition sur le site de SwfIR :

Comment l'utiliser ?

Vous n'avez besoin que de déterminer des styles spécifiques à appliquer en JavaScript via la fonction specify et de déterminer à quels éléments les appliquer via un selecteur CSS avec la fonction swap.

  1. Télécharger swfIR (11.89 KB)
  2. Transférez swfir.js and swfir.swf dans un même répertoire sur votre serveur
  3. Incluez le fichier JavaScript swfIR entre les balises <head> de votre page via cette ligne de code : 
    <script type="text/javascript" src="swfir.js"></script>
  4. Choisissez les effets à appliquer à vos images : 
    
var borders = new swfir();
borders.specify("border-radius", "15");
borders.swap("#content img");
  5. Vous avez le choix parmi tous ces paramètres :
    • 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

Quelques inconvénients tout de même

Voici quelques bugs reportés :

  • Le redimensionnement/zoom sous opera crashe le navigateur.
  • Les textes alternatifs ne sont pas repris.
  • Le menu contextuel (clic-droit) est inactif.
  • Ne fonctionne pas avec les images distantes pour raisons de sécurité dans Flash.