olidStateEveryday - Ajax,javascript,UIサンプルとチュートリアル -

Ajax,Javascriptサンプル、画像表示系の設置方法

  1. Home>
  2. 画像表示>
  3. 画像エフェクト(加工)>
  4. 画像でパズルを自動作成

画像エフェクト(加工)mootools

画像でパズルを自動作成

  • del.icio.us に登録
  • ライブドアクリップに追加
  • Google Bookmarks に追加
  • はてなブックマークに追加
  • Yahoo!ブックマークに登録
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
	<title>nuff-respec.com > slide puzzle (mootools)</title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" href="c/puzzle.css" media="all" type="text/css" />
	<script src="j/mootools.v1.00.js" type="text/javascript"></script>
	<script src="j/puzzle-not-compressed.js" type="text/javascript"></script>
</head>
<body>

<div id="content">
	<a href="#shuffle" onclick="return Puzzle.make(3)">make</a> | <a href="#shuffle" onclick="return Puzzle.shuffle()">shuffle</a> | <a href="#shuffle" onclick="return Puzzle.fix()">fix</a> | <a href="#shuffle" onclick="return Puzzle.switch_image('i/ricks-cafe.jpg')">image2</a> | <a href="#shuffle" onclick="return Puzzle.switch_image('i/red-stripe.jpg')">image1</a>
	<div id="puzzle"><img src="i/red-stripe.jpg" alt="" width="350" height="263" /></div>
</div>

</body>
</html>

画像をパズルにしてしまうスクリプト puzzle-not-compressed.js。
mootools を使用します。

１．ダウンロード＆セッティング

サイトへ行き、puzzle.zip をダウンロードしてください。（ページ最下部あたりにリンクがあります）
解凍したら中身をアップロードします。

２．<head>設定

アップしたファイルを読み込ませます。

<link rel="stylesheet" href="c/puzzle.css" media="all" type="text/css" />
<script src="j/mootools.v1.00.js" type="text/javascript"></script>
<script src="j/puzzle-not-compressed.js" type="text/javascript"></script>

３．HTMLマークアップ

ロード時に画像はパズル化されておらず、トリガーとなる要素をクリックすることでパズルになったり、シャッフルしたりします。

■パズルを作る
<a href="#shuffle" onclick="return Puzzle.make(3)">make</a>

■シャッフルする
<a href="#shuffle" onclick="return Puzzle.shuffle()">shuffle</a>

■正解
<a href="#shuffle" onclick="return Puzzle.fix()">fix</a>

■画像を変更する
<a href="#shuffle" onclick="return Puzzle.switch_image('i/ricks-cafe.jpg')">image2</a>

画像を変更する場合は、上記を何個かつけてもOKです。（オレンジのところのパスをそれぞれ変更する）

画像は以下のような要素で配置します。

<div id="puzzle"><img src="i/red-stripe.jpg" alt="" width="350" height="263" /></div>

これで完成です。

関連スクリプト

感想

面白いけど使いどころが分からないです。
パズルを作りたいときに役立つと思います。（当たり前か）

スクリプトの使用について

SolidStateEverydayでご紹介しているAjax,Javascript等のスクリプトをご利用になる場合は、必ず製作元のサイトで使用ライセンスを確認してください。ご利用は自己責任でお願い致します。

結局、エックスサーバーなんですよね。