26 juil. 2010

Dérouler le background avec Peel

J'ai placé le fichier dans cet article, c'est donc le fond de cet article qui se déroule. Regardez à droite :
Lorsque le fond se déroule, il laisse apparaître une petite image. Pointez votre souris dessus, l'image s'agrandit.

Première étape :

Vous préparez 2 formats de la même image :
  • la petite s'appelle small.jpg
  • la grande s'appelle large.jpg
Deuxième étape :

Chez Jeffonair, cliquez sur Page Peel et téléchargez le programme

C'est un fichier .zip : un ensemble de fichiers compressés. Pour les décompresser, j'utilise WinRAR - Extraire Vers

Troisième étape :

Dans l'administration de votre blog - Documents - Autres Fichiers :
  • vous créez un répertoire nommé Peel





    • dans ce répertoire, vous enregistrez les fichiers suivants :





      • large.jpg (1ère étape)
      • large.swf
      • small.jpg (2ème étape)
      • small.swf
    • vous notez les adresses de ces fichiers
Quatrième étape :

Sur votre PC :
  • vous ouvrez votre Bloc Notes et vous appelez le fichier peel.js
  • vous modifiez les adresses suivantes





    • jaaspeel.small_path = '/peel/small.swf';
    • jaaspeel.small_image = escape('/peel/small.jpg');
    • jaaspeel.big_path = '/peel/large.swf';
    • jaaspeel.big_image = escape('/peel/large.jpg');
    en les remplaçant par les nouvelles adresses (celles de la deuxième étape).
  • vous sauvegardez le fichier sous le même nom
Cinquième étape :

Dans votre administration - Documents - Autres Fichiers - répertoire Peel :
  • vous sauvegardez le fichier peel.js
  • vous notez son adresse
Sixième étape :

Dans l'html de l'entête, vous collez ce pavé
<script src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/peel/peel.js" type="text/javascript">

avec votre propre adresse de fichier.

8 commentaires:

  1. ça ne fonctionne pas sur Internet Explorer

    RépondreSupprimer
  2. Avec IE7 et IE8, ça fonctionne. Tu utilises quelle version ?

    RépondreSupprimer
  3. IE8 pourtant, je refais un test et te tiens au courant

    RépondreSupprimer
  4. J'ai refais des tests mais ça ne fonctionne que sur firefox regarde sur vacancesoriginales.com

    RépondreSupprimer
  5. Bonjour :)
    1/ vérifie que tu as bien recollé en entier. De préférence avec FireFox, Internet Explorer a tendance à "bouffer" du code.
    2/ Vérifie que tu n'as pas un autre code en javascript qui pourrait parasiter celui-là

    RépondreSupprimer
  6. Bonjour,

    Pouvez vous nous indiquer comment procéder pour ajouter cet effet sur un autre coin de la page ( en plus du coin haut droit.)

    Merci.

    RépondreSupprimer
  7. Bonjour, je vois comment modifier son emplacement (en changeant les valeurs right:0px;top:0px à 2 endroits du fichiers js), mais pas comment le mettre en miroir. Désolée :(

    RépondreSupprimer
  8. Merci.
    Si j'ai une astuce, je vous fait signe.
    (-_0)

    RépondreSupprimer

1/ Choisissez Nom/URL comme profil pour poster, si vous hésitez
2/ Si vous désirez une aide personnalisée, pensez à laisser l'adresse de votre blog, ce qui me permettra de tester.
3/ Vous pouvez vous abonner par email pour suivre les réponses de cet article (lien sous la zone de rédaction du commentaire)