• Un puzzle en Javascript

    Pour ces fêtes de fin d'année, je vous ai concocté un petit script de puzzle que vous pouvez utiliser à loisir avec votre propre image. Ce script a été réalisé pour une image de 320 par 320 pixels qui sera découpée en 25 pièces.

    Rassurez-vous, vous n'aurez pas à découper vous même l'image: Le script s'en charge. Mais voyez plutôt ce que ça donne:

     
     
     

     

     

     

     

     

     

     

     

     

     

     

     

    Mise en oeuvre

    Première chose le code CSS. A placer dans Apparence / Modifier le thème / Ajouter du CSS

    1. Téléchargez ce script puzzlescript.js et enregistrez le sur votre blog par Contenu / Gérer les fichiers
    2. Choisissez une image de 320 x 320 et enregistrez la dans les fichiers de votre blog.
    3. Placez le code CSS ci-dessous dans  Apparence / Modifier le thème / Ajouter du CSS
       

    Ce code sert simplement à fixer les dimensions des pièces (des carrés de 64 pixels de coté).

    Oui je dis bien 64 puisqu'il y a une bordure périphérique de 1 pixel.

     

     


    4. Ensuite il ne reste plus qu'à placer le code suivant à l'endroit ou vous voulez mettre le puzzle. 

    Veillez à bien remplacer les Url ci-dessous par celles de vos propres fichiers. (url du fichier puzzlescript.js pour la première et url de l'image pour la seconde)