パズルの一枚の画像に依るブログ上自動生成

屡参照させていただく ホームページを作る人のネタ帳 の運営者Yamada氏が他にも運営されている海外発情報発信の為のブログ ITquality の2008年4月10日の記事 37の衝撃的jQueryプラグイン での紹介は noupe.com の2008年4月9日の記事 37 More Shocking jQuery Plugins で、当記事中にて紹介されている37のjQueryプラグインの内の一つがBen Nadel氏によるサイト Kinky Solutions 中の記事 jQuery Demo: Creating A Sliding Image Puzzle Plug-In にて公開されている、ページ上に配置した画像にスクリプトを適用すると画像が指定のサイズで分割され、 その内の一ピースが欠けた部分に隣り合うピースが移動可能となることにより構成される、 街でよく見かけるパズルの体裁を取らせることが出来るプラグインです。

当ブログ上でも実装してみた処、巧く動作しましたので、 オリジナルの画像で本アーティクル上に掲載しました。
パズルの正解画面でもある サンプル画像のパズル化する前のオリジナル元画像を下に示します。
高飛び込み
高飛び込み 此処はうさ犬の里、裏山の不思議の森の池

[続きを読む]をクリックすると、 上記元画像が縦に3分割、横に4分割されたスライドパズルになって表示されます。 空白の存在する列の任意のピースをクリックすると、 該当するピースがスライドして移動します。 残念乍、正解画像を得られても特に変化の無い点は如何かご寛恕いただきたいと思います。
スポンサーリンク
高飛び込み