swfIR – swf Image Replacement

Swf Image Replacement

Questa tecnica parente della più famosa sIFR ci permette di manipolare liberamente la visualizzazione delle immagini sostituendo via javascript l’immagine con una sua versione in flash…

Questo ci fornisce una serie di vantaggi:

• L’immagine è manipolabile: è possibile ruotare una o più immagini, aggiungere un bordo di è determinabile colore il tipo di angolo, aggiungere un ombra regolabile ecc.
• L’immagine originale è comunque accessibile a javascript disattivati (ma non disattivando semplicemente i CSS…)
• L’implementazione è semplice e veloce grazie al filtro: è possibile decidere quali immagini sostituire con una notazione simile a quella normalmente usata con i css.

Ora vediamo brevemente come implementare il tutto:

1. Scaricate il pacchetto dal sito ufficiale dentro troverete lo script (swfir.js) e l’swf (swfir.js) più un ottima guida in formato txt (swfir.txt)
2. Collegate alla pagina lo script[js]
   
   [/js]
3. Create lo script di configurazione che si occuperà di settare i parametri dell’swf e di filtrare le immagini. Ad esempio una cosa del genere:[js]
   window.onload = function()
   {
   var sir = new swfir();
   sir.specify(”border-width”, “20″);
   sir.specify(”border-color”, “F57F20″);
   sir.specify(’rotate’, ‘-2′);
   sir.specify(”background-color”, “9dcee0″);
   sir.specify(”shadow-blur”, “20″);
   sir.swap(”.esempio img”);
   }
   [/js]

   In questo esempio ho creato una nuova istanza dell’oggetto swfir di nome sirper la quale ho settato la dimensione del bordo, il suo colore, una rotazione dell’immagine di 2 gradi in senso antiorario, un colore di sfondo (per l’ombra) e la dimensione dell’ombra.
   Con sir.swap(”.esempio img”) ho sostituito tutte le immagini contenute in un div con classe “esempio”.

4. Inserite gli elementi voluti nel body ricordandovi di usare un contenitore con classe “esempio” nel quale mettere le immagini. Tenete presente che le immagini verranno sostituite da un elemento span con classe swfir

Qui potete visualizzare l’esempio d’uso dell’swfir

Questi sono tutti i parametri su cui potete operare:

• border-radius = Number
• border-width = Number
• border-color = CSS Styled Color (i.e. fc600)
• shadow-offset = Number
• shadow-angle = Number
• shadow-alpha = Number between 0 – 100
• shadow-blur-x = Number
• shadow-blur-y = Number
• shadow-strength = Number
• shadow-color = CSS Styled Color (i.e. fc600)
• shadow-quality = Number between 0 – 1
• shadow-inner = Boolean (true or false)
• shadow-knockout = Boolean (true or false)
• shadow-hide = Boolean (true or false)
• rotate = Number between -359 – 359
• overflow = ‘expand-x’, ‘expand-y’ or ‘fit’
• link = String (i.e. http://www.swfir.com)
• src = String (path to your swf, if not standard)
• wmode = String (’opaque’, ‘transparent’, etc.)
• elasticity = String (’true’), Number (pixel-to-em ratio)