WebDesignWall propose une jolie façon d'encadrer ses photos ou de leur rajouter des éléments grâce au CSS : la solution idéale pour ceux qui n'ont pas de logiciel sophistiqué de dessin ou de talent particulier.

Un exemple :



La méthode sans javascript et avec des <span> ne fonctionne pas avec mon éditeur : il les fait sauter. Je dois donc utiliser le fichier javascript Jquery.

Première étape :

Il vous faut la photo et son accessoire (punaise, encadrement...).

Si vous en cherchez, vous en trouverez de toutes façons en cliquant sur Download Demo ZIP (bon à savoir : je suis arrivée immédiatement à le sauvegarder avec IE7, quand ça ramait avec FireFox)

Vous venez d'enregistrer un fichier .zip : un ensemble de fichiers compressés. Pour les décompresser, j'utilise WinRAR, Extraire vers.

Pour mon exemple, je choisis :

cette photo : http://ddata.over-blog.com/xxxyyy/0/37/17/67/DecorativeGallery/12.jpg



et cette punaise : http://ddata.over-blog.com/xxxyyy/0/37/17/67/DecorativeGallery/pin.png



Deuxième étape :

Dans l'administration de votre blog - Mes Documents - Autres Fichiers :

• créez un répertoire nommé DecoGallery
  • vous y enregistrez le fichier jquery.js (il fait partie du fichier .zip que vous avez enregistré)
  • notez son adresse

Troisième étape :

En HTML, collez


Vous modifiez l'adresse en rouge par votre propre adresse : vous l'avez noté à la deuxième étape

puis


Vous voyez qu'en vert, il s'agit de l'URL de ma punaise. Remplacez par l'URL de votre décoration.

Enfin, l'image


En bleu, l'URL de l'image.
En orange, le mot (qui représente la class) doit être le même.

Recommandations :

Si vous placez plusieurs images décorées différemment dans la même page du blog, pensez à changer le nom de la classe (qui est photo dans mon exemple)

WebdesignerWall propose plusieurs types de décoration : à chaque fois, il faudra personnaliser la partie CSS. Le mieux est de cliquer sur demo et ensuite de regarder la source pour s'en inspirer.