Ok

En poursuivant votre navigation sur ce site, vous acceptez l'utilisation de cookies. Ces derniers assurent le bon fonctionnement de nos services. En savoir plus.

06.11.2009

Protéger ses photos de blog

Soyons lucide! Rien n'empêche un esprit mal intentionné de s'emparer d'une photo par une simple capture d'écran.

Ne devenons pas parano! Parmi les solutions ici testées, vous en trouverez une suffisamment dissuasive.

 

Lire la suite

10:30 Écrit par Kielut dans Traitement d'image | Lien permanent | Commentaires (0) | Tags : protéger, photo, image, blog, vol | |  del.icio.us | | Digg! Digg |  Facebook

13.01.2009

Ascenseur pour les chats faux

Sur le blog de Pierrot, j'ai trouvé une méthode d'affichage des photos, que l'on fait défiler avec un « ascenseur ». Vous montez ?

Techniquement c'est assez trivial, mais il fallait y penser, et le mettre en œuvre correctement. Pierrot l'a bien fait pour des photographies par ailleurs magnifiques, comme toutes celles que l'on peut voir chez lui. Bref, c'est dans cette note au titre difficilement plus explicite : Ascenseur à photos

Il s'agit de créer une division dans la page, pour y afficher des éléments que l'on sait être trop grands et ou trop nombreux pour s'afficher pleinement. Il va falloir gérer le défilement proprement pour montrer qu'on l'a fait exprès. Autant dire tout de suite que le mode d'interprétation des navigateurs est capital, et vous ne verrez pas forcément la même chose selon que vous utilisez Firefox ou Internet Explorer. Microsoft interprète plus de paramètres, ignorés par Mozilla.

Voici un « cadre » avec ascenseur :


^ Chat faux, bleu

^ Chat faux tôt

^ Chat : photo et maori

Voici le code, brut de décoffrage, mais sans malle de vis :

<div style="border: 2px solid #ffffff; overflow: scroll; width: 480px; height: 380px; background-color: #ffffff;" align="left"><span style="font-size:10pt"><img src="http://geemee.hautetfort.com/images/Chat_faux_bleu.jpg" style="width: 459px; height: 344px;" border="0" /><br /> ^ Chat faux, bleu<br /> <img src="http://geemee.hautetfort.com/images/Chat_faux_tot.jpg" style="width: 459px; height: 344px;" border="0" /><br /> ^ Chat faux tôt<br /> <img src="http://geemee.hautetfort.com/images/Chat_photo_et_maori.jpg" style="width: 459px; height: 344px;" border="0" /><br /> ^ Chat : photo et maori<br /></span></div>

Pour comprendre le code :

<div

On crée la division, dont la mise en forme en fera un cadre.

style="border: 2px solid #ffffff;

On fixe le style du cadre, la bordure aura 2 pixels d'épaisseur, en trait continu, et sera de couleur blanche.

overflow: scroll;

C'est le principal. Littéralement, si le flux déborde, on fera défiler.

width: 480px;
height: 380px;

Le cadre fera 480 pixels de large pour 380 pixels de haut.

background-color: #ffffff;"

L'arrière-plan sera blanc. C'est la fin du style du cadre

align="left">

On alignera à gauche.

<span

On crée une rupture dans la feuille de style courante.

style="font-size:10pt">

La taille des caractères sera de 10 points.

 

Puis c'est du classique, on insère une image dont on précise la taille, que l'on fait suivre de quelques mots de légende.

</span>

On ferme la rupture dans la feuille de style.

</div>

On ferme la division, et donc le « cadre ».

Si vous avez la curiosité de regarder le code source de la page du blog de Pierrot, vous constaterez qu'il y a bien plus de paramètres. Les barres de défilement sont colorées, notamment. Bizarrement, je n'ai pas réussi à intégrer le code in extenso dans une note. Est-ce un filtrage automatique, est-ce dû au fait que mon blog est gratuit ? Je suis preneur de toute explication.

Pour vous faciliter l'intégration, voici une courte feuille de route.

Un avertissement avant de commencer : Les critères de taille, valables pour le template de ce blog, ne sont pas forcément applicables au vôtre. Vous aurez peut-être à ajuster la taille du cadre et des photos.

1 – Préparer des images de taille « 459 x 344 » correspondant à un honnête 4/3.
2 – Téléchargez ces photos sur votre blog, via Tableau de bord / Fichier / Images
3 – Notez l'adresse de chacune des images téléchargées.
4 – Copiez le code ci-dessous et collez-le dans une note via la méthode code embed entre deux paragraphes pour garder la main avant et après le cadre.
<div style="border: 2px solid #ffffff; overflow: scroll; width: 480px; height: 380px; background-color: #ffffff;" align="left">
<span style="font-size:10pt">
<img src="<!--adresse de l'image 1 -->" style="width: 459px; height: 344px;" border="0" /><br />
^ Légende de l'image 1<br />
<img src="<!--adresse de l'image 2 -->" style="width: 459px; height: 344px;" border="0" /><br />
^ Légende de l'image 2<br />
<img src="<!--adresse de l'image 3 -->" style="width: 459px; height: 344px;" border="0" /><br />
^ Légende de l'image 3<br />
</span>
</div>

5 – Passez en éditeur HTML et remplacez <!--adresse de l'image 1 --> par l'adresse de l'image 1.
6 – Je vous conseille de rester dans l'éditeur HTML pour modifier ou supprimer les légendes. Dans l'éditeur Wysiwyg, dans la division, l'utilisation de la touche [Entrée] vous fera diviser la division.
7 – Pour insérer plus d'images, il suffira de procéder par copier/coller pour avoir assez de lignes complètes à modifier : <img src="<!--adresse de l'image 1 -->" style="width: 459px; height: 344px;" border="0" /><br /> ^ Légende de l'image 1<br />

Bonne chance, et n'hésitez pas à me dire ce que vous en avez fait.

P.S. : Aucun animal n'a été maltraité pour préparer cette note. C'est une photo libre de droit domiciliée ici.

01:00 Écrit par Gee Mee dans Personnaliser son blog | Lien permanent | Commentaires (10) | Tags : photo, ascenseur, défiler | |  del.icio.us | | Digg! Digg |  Facebook