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 :
- Image avec un header elastique
- Image pivotée au sein d’un contenu
- Bordures arrondies au sein d’un contenu
- Images multiples
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.
- Télécharger swfIR (11.89 KB)
- Transférez
swfir.jsandswfir.swfdans un même répertoire sur votre serveur - Incluez le fichier JavaScript swfIR entre les balises
<head>de votre page via cette ligne de code :<script type="text/javascript" src="/wp-content/images/developpement-web/swfir-en-attendant-les-css3/swfir.js"></script> - Choisissez les effets à appliquer à vos images :
var borders = new swfir(); borders.specify("border-radius", "15"); borders.swap("#content img"); - 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.
Ce que nos lecteurs en disent :
Adysone
Shemu
FREUD
Shemu
Laurent
jparia
Les commentaires sont clos.