SWFir ou SWF Image Replacement...

SWFir ou SWF Image Replacement...

Aujourd'hui je voudrais vous faire part d'une des solutions possibles pour redonner vie à vos images sur le web...

Pour peu que vous ayez déjà construit un site web et que vous eusse voulume mettre en page des images, vous avez surement dû vous confronter à certains problèmes...

Je vous donne un exemple très simple :
Comment faire pour arrondir les coins d'une image ?
Plusieurs solutions me direz vous...

• Modifier l'image au préalable sur un logiciel spécifique (genre Photoshop ,the Gimp, etc.) en lui arrondissant ses coins.

• Utiliser les CSS et superposer sur vos images un gif transparent (ou un png pour ceux qui ne souhaiterez pas que cette astuce soit visible sur Internet Explorer <7>

• Dans le cas de "bloc", utiliser les CSS et se lancer dans une imbrication de 4
  successifs (j'y reviendrai dans un futur post pour ceux que ça intéresse)

Bref, c'est pas forcément une tâche "aisée" en utilisant le language HTML ! Et si je vous demande maintenant d'appliquer sur vos images des ombres porteés? "Oulalalala !....." Des rotations ? "Aie Aie Aie" !

Je vais maintenant présenter une solution "simple" pour appliquer de nombreux styles sur vos images : ombre portée, bords arrondis, rotation etc...
Le "SWFir" pour SWF Image Replacement, est une méthode utilisant Flash et Javascript pour revaloriser vos images !

Illustration :

Comment ça marche?

Vous avez besoin de 2 fichiers principaux : 1 fichier Flash (.swf) et un fichier Javascript (.js), disponibles sur le site de SWFir ou plus simplement ici
Décompressez le dossier et placez les 2 fichiers dans le même dossier que vos pages html.

Entre [head] et [/head] vous placez cette ligne :
[script type="text/javascript" src="swfir.js"][/script] afin d'appeller le fichier Javascript.
Puis entre [body] et [/body] vous placez ces lignes :
[script type="text/javascript"]
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.swap("img");
}
[/script]

Par la suite, vous pouvez appliquer le style désiré sur toutes les images de votre site ou seulement sur certaines.
Je vais maintenant décrire ligne par ligne le script principal :

• sir.specify("border-width", "20"); : Cette ligne vous permet de spécifier la largeur de la bordure qui sera appliquée sur l'image (ou les images). Ici, une bordure de 20px sera appliquée.

• sir.specify("border-radius", "15"); Je vous parlais de bords arrondis sur les images, c'est grâce à cette ligne que cet effet est rendu possible. Ici on applique un rayon de 15px sur chaque arrondi. Plus ce chiffre est élevé et plus les coins seront arrondis.

• sir.specify("border-color", "fff"); : Ici on spécifie la couleur de la bordure au format hexadecimal. #fff est une contraction de #ffffff et correspond à la couleur blanche.

• sir.specify("rotate","-5"); Là on applique un effet de rotation sur l'image.

• sir.specify("shadow-blur", "15"); Cette ligne est, à mon sens, assez intéressante car elle permet d'appliquer une ombre portée sur l'image. Plus le chiffre est élevé,plus l'opacité de l'ombre sera élevée. Attention cela dit, une valeur trop grande entrainera une diminution de la taille de votre image.

• sir.specify("background-color", "9dcee0"); L'utilisation de background-color sert, comme vous vous en doutez surement, à insérer un arrière plan coloré à votre image. La couleur est,là aussi, spécifiée dans un format hexadécimal.

Enfin, la dernière ligne: sir.swap("img"); sert à appliquer ces différents styles sur les images.C'est ici que l'on peut attibuer un effet particulier sur certaines mais pas sur la totalité des images de votre site.

Pour le moment nous avons donc défini la nature des effets . Maintenant il faut encore les appliquer sur les images ! Il y a deux possibilités : si vous souhaitez appliquer les style sur toutes les images de votre site, vous n'avez plus rien à faire. En effet, ils s'appliqueront automatiquement sur chaque balise [img src="" /] autrement dit, sur toutes les images. Si vous souhaiter appliquer localement les styles préalablement définis, la suite est pour vous...

Comment faire pour appliquer les styles sur certaines images et pas sur d'autres ?

Il vous suffit d'indiquer les class ou les id sur lesquels vous voulez que la magie opère ! Pour cela il faut modifier la dernière ligne.

ex1 : Application du style sur un id :

sir.swap("#bloc img"); Ici, les styles vont s'appliquer sur les div portant un id="bloc".
Ensuite c'est du css classique (Nous sommes ici dans le body de la page) :

[div id="bloc"][img src="souffle.jpg" /][/div]

Ici, le style va s'appliquer sur l'image "souffle.jpg"

ex2 : Application du style sur une class :

sir.swap(".bloc img"); Ici, les styles vont s'appliquer sur les div portant un class="bloc".
Ensuite c'est du css classique (Nous sommes ici dans le body de la page) :

[div class="bloc"][img src="souffle.jpg" /][/div]

Ici, le style va s'appliquer sur l'image "souffle.jpg"

Bien entendu, ça marche pour d'autres balise css !

Récapitulation et exemple de fin:

[html]
[head]
[title][/title]
[style type="text/css"]
#bloc{
width:361px; height:547px;
position:relative;float:left;
}
[/style]
[script type="text/javascript" src="swfir.js"][/script]
[/head]
[body]
[script type="text/javascript"]
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", "25");
sir.specify("background-color", "9dcee0");
sir.swap("#bloc img");
}
[/script>
[div id="bloc"][img src="souffle.jpg" /][/div]
[/body]
[/html]

Et voila !

Bien entendu, vous n'êtes pas obligé d'appliquer tous les styles sur vos images ! Si vous ne voulez qu'une ombre portée, vous mettrez simplement :

window.onload = function(){
sir = new swfir();
sir.specify("shadow-blur", "25");
}

Pour finir ce long post, quelques liens pour complément : - Le site SWFir : ici
- Un article du côté de Babylon-design : là

ps : J'ai remplacé les balises ouvrantes et fermantes par des crochets (Sinon, impossible d'afficher ça à l'écran...même avec des balises [pre]...