Ce n'est pas très difficile à réaliser.

Testez en cliquant et survolant avec la souris.



Première étape :

Allez sur CLEARBOX, il s'agit d'un site hongrois  (pour la traduction, c'est un véritable plaisir).

Cliquez sur ClearBox full (js, css, képek): clearbox.zip

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

Deuxième étape :

Dans votre administration - Mes documents - autres fichiers :

• vous créez un répertoire clearbox
  • dans ce répertoire, vous créez un sous-répertoire : pic
    • dans ce sous-répertoire, vous uploadez les fichiers suivants :
      • Image blank.gif
      • Image close.png
      • Image loading.gif
      • Image max.gif
      • Image next.gif
      • Image noprv.gif
      • Image pause.png
      • Image prev.gif
      • Image s_btm.png
      • Image s_btmleft.png
      • Image s_btmright.png
      • Image s_left.png
      • Image s_right.png
      • Image s_top.png
      • Image s_topleft.png
      • Image s_topright.png
      • Image start.png
      • Image white.gif
    • Notez les adresses de ces images

Troisième étape :

Sur votre PC, ouvrez le bloc note :

• appelez le fichier clearbox.css
• modifiez les adresses des images
  • #CB_TopLeft {    background-image:url(../pic/s_topleft.png);   background-position:right bottom;}
    #CB_Top { background-image:url(../pic/s_top.png); background-position:left bottom;}
    #CB_TopRight {   background-image:url(../pic/s_topright.png);    background-position:left bottom;}
    #CB_Left {    background-image:url(../pic/s_left.png);    background-position:right top;}
    #CB_Right {    background-image:url(../pic/s_right.png);    background-position:left top;}
    #CB_BtmLeft {    background-image:url(../pic/s_btmleft.png);    background-position:right top;}
    #CB_Btm {    background-image:url(../pic/s_btm.png);    background-position:left top;}
    #CB_BtmRight {    background-image:url(../pic/s_btmright.png);    background-position:left top;}
    #CB_Prev, #CB_Next {    background: transparent url(../pic/blank.gif) no-repeat scroll 0%;
        display: block;        width: 49%;    cursor: pointer;    outline-style:none;    z-index: 1102;}
  • #CB_Prev:hover {background:transparent url(../pic/prev.gif) no-repeat scroll left 50%;}
    #CB_Next:hover {background:transparent url(../pic/next.gif) no-repeat scroll right 50%;}

en remplaçant par celles de l'étape 2

• enregistrez le fichier sous le même nom

Quatrième étape :

Dans votre administration - Mes Documents - Autres fichiers - dans le répertoire clearbox :

• vous créez un sous-répertoire css
  • dans lequel, vous uploadez le fichier clearbox.css
• vous créez un sous-répertoire js
  • dans lequel, vous uploadez le fichier clearbox.js

Cinquième étape :

Lors de la rédaction de votre article, dans votre éditeur, en mode source/HTML, vous collez


avec vos popres adresses de fichiers (en rouge). Si votre blog est sur Over-Blog, vous pouvez utiliser mes adresses.
Placez maintenant vos photos

En bleu, la photo en grande taille
En vert, la photo en miniature