画像のある部分をクリックすると他の画像にチェンジするJavaScriptのサンプル

サンプル

• 

  画像の詳細説明
• 

  画像の詳細説明
• 

  画像の詳細説明
• 

  画像の詳細説明
• 

  画像の詳細説明
• 

  画像の詳細説明
• 

  画像の詳細説明

使い方

jquery.jsとcrosslayer.jsを読み込んで、↓こんな感じで実行するだけ。

$(document).ready(function() {
	$('#crosslayer').crosslayer({
		layerDataFile : "jsonLayerData.txt"
	});

オプションについて説明するよ。

• layerDataFile(必須): 表示するレイヤー情報をJSONで別途ファイルとして持っておく必要がある（※１：json形式は後述）
• holePosX(任意): 穴レイヤーの表示位置の指定。デフォルトは 100。レイヤー情報で上書き指定可能
• holePosY(任意): 穴レイヤーの表示位置の指定。デフォルトは 100。レイヤー情報で上書き指定可能
• holeWidth(任意): 穴レイヤーのサイズの指定。デフォルトは 64。レイヤー情報で上書き指定可能
• holeHeight(任意): 穴レイヤーのサイズの指定。デフォルトは 64。レイヤー情報で上書き指定可能
• holeBorder(任意): 穴レイヤーのborderの指定。デフォルトは "solid 2px #aa0000",
• offsetX(任意): 穴レイヤー内の画像の表示位置の指定。デフォルトは -100。レイヤー情報で上書き指定可能
• offsetY(任意): 穴レイヤー内の画像の表示位置の指定。デフォルトは -100。レイヤー情報で上書き指定可能
• changeSpeed(任意): トランジションする時の時間を ms(ミリ秒)で指定。デフォルトは 700
• messageElm(任意): 詳細文言を表示する場所の指定。デフォルトは".description"

※１：json形式について説明するよ。

データサンプル：
[
	{
		"imagePath"  : "samples/img01.jpg",
		"imageWidth" : 320,
		"imageHeight": 320,
		"holePosX"   : 100,
		"holePosY"   : 200,
		"message"    : "ライトアップされたシャンパンタワー！"
	},
	：
	{
		"imagePath"  : "samples/img07.jpg",
		"imageWidth" : 320,
		"imageHeight": 320,
		"holePosX"   : 100,
		"holePosY"   : 200,
		"message"    : "赤にもなるよ！
全部シャンパンタワーでできてる！"
	}
]

• imagePath(必須): 表示する画像のURLを指定
• imageWidth(必須): 表示する画像のサイズを指定
• imageHeight(必須): 表示する画像のサイズを指定
• holePosX(任意): 穴レイヤーの表示位置の指定。デフォルトはオプションで指定した値
• holePosY(任意): 穴レイヤーの表示位置の指定。デフォルトはオプションで指定した値
• message(任意): 画像の詳細に表示する文言。
• holeWidth(任意): 穴レイヤーのサイズの指定。デフォルトはオプションで指定した値
• holeHeight(任意): 穴レイヤーのサイズの指定。デフォルトはオプションで指定した値
• offsetX(任意): 穴レイヤー内の画像の表示位置の指定。デフォルトはオプションで指定した値
• offsetY(任意): 穴レイヤー内の画像の表示位置の指定。デフォルトはオプションで指定した値

動作環境

一応、下記の環境で動作確認してあります。

• Windows IE7,8,9 (IE6はエラーがでたのでNG)
• Windows Chrome21
• Windows Firefox14
• Mac Safari5