アークウェブのブログ

構造について

まずは、レイヤー構造とどのレイヤーを何と呼ぶかを定義します。

• 最初に表示しておく画像が「1.背景画像レイヤー」
• マウスオーバーしたら穴から背景画像がいじれる「2.穴レイヤー」
• 穴レイヤーから表示される「3.(穴レイヤー内の)画像レイヤー」

仕組みとしては、「2.穴レイヤー」の下に「3.画像レイヤー」があり、穴から見えない箇所は非表示になっています。
その下に「1.背景画像レイヤー」がある形で、「3.画像レイヤー」が表示されるのは「2.穴レイヤー」にマウスオーバーしている時だけです。また、「3.画像レイヤー」をクリックしたら、次の画面に遷移します。

初期準備

まずは initialize 関数で最初の画像とメッセージを表示します。
prototype.jsを使わない場合、

window.body.onload = initialize;

とイベントハンドラを表記していましたが、prototype.jsのEvent.observeというイベント用のメソッドを下記のように利用できます。

document.observe("dom:loaded", initialize, false);

この"dom:loaded"の部分は、DOMツリーの完成を待たずにイベントハンドラを実行できる記述です。

inizialize関数の中で実行している makeBackImage関数は下記のようになっています。

function makeBackImage(oLayerInfo) { $('back-image').setStyle("width:#{imageWidth}px; height:#{imageHeight}px;".interpolate(oLayerInfo)); $('back-image').innerHTML = '

#{message}

oLayerInfoには下記で示すレイヤー情報の1件分が入っています。$('back-image')は「1.背景画像レイヤー」です。
prototype.jsの機能が2つ実装されています。1つは『エレメント名.setStyle("スタイル形式");』というsetStyleの拡張がなされており、CSSと同じように1行で指定できます。
もう1つはテンプレート機能。文字列中に #{置換文字} を入れておき、interpolateメソッドで指定した引数のハッシュキーに対応する値が置換されます。

この2つは便利なので以降でも頻繁に使うので覚えて置いてください。

データ構造

今回は、下記のようなJSON構造のデータを用意しました。
このようなデータは別ファイル化しておくとか、APIから呼び出せるようにするとか色々とやりようがありますが、とりあえずJSONの扱いはまた後日としましょう。

レイヤー情報データで、
aLayerInfoListというグローバル変数を定義したので、今回はこれを使います。形式は下記の通りです。

• 「link」にクリックされたときのaタグのhref属性の中身を書きます
• 「imagePath」は「3.画像レイヤー」に表示する画像パスです。
• 「imageWidth, imageHeight」は「3.画像レイヤー」のサイズ
• 「offsetX, offsetY」は「2.穴レイヤー」の表示位置
• 「layerWidth, layerHeight」は「2.穴レイヤー」のサイズ
• 「message」は画像の下に表示する文字列です

オブジェクト生成

では、initialize内のCrosslayerオブジェクトを生成する部分です。利用側は普通にインスタンスを生成する形でOKです。

oCrosslayer = new Crosslayer();

prototype.js 1.6.0 RC1を利用したクラスの定義の仕方は、下記の形式で実装します。

Crosslayer = Class.create({ initialize: function(){ /* コンストラクタ */}, myFunc: function() { /* 独自メソッド */}, lastFunc: function() {} });

※lastFuncメソッドの } に ,(カンマ)が付いていないことだけ注意してください。perl等の言語からJavaScriptコーディングをする際によく間違います。

クロスレイヤーの生成

次に、index.htmlのmakeLayer関数で「2.穴レイヤー」と「3.画像レイヤー」を生成します。

makeLayer: function(oBackImageElement, oLayerInfo) { // offsetX, offsetYの変換 var oNewLayerInfo = this._convertOffsetPosition(oBackImageElement, oLayerInfo); // メンバ変数へ保存 this._oLayerInfo = oNewLayerInfo; // レイヤー情報 // 穴レイヤーを生成する this._generateHoleLayer(oBackImageElement); // 穴レイヤーに画像レイヤーを埋め込む this._generateInnerLayer(); // イベントハンドラを定義 Event.observe(this._oHoleLayerElement, "mouseover", this.startMousemove.bind(this), false); Event.observe(this._oHoleLayerElement, "mouseout", this.endMousemove.bind(this), false); },

offsetX, offsetYの変換については端折ります。レイヤー情報のoffsetX,offsetYについてページの左上を原点に変換しています。

穴レイヤーを生成する部分を説明します。

_generateHoleLayer: function(oBackImageElement) { // 穴レイヤーの生成 var oHoleLayer = document.createElement('div'); oBackImageElement.appendChild(oHoleLayer); Element.setStyle(oHoleLayer, "position:absolute; overflow:hidden; border:solid 1px #000000;"); Element.setStyle(oHoleLayer, "width:#{layerWidth}px; height:#{layerHeight}px;".interpolate(this._oLayerInfo)); Element.setStyle(oHoleLayer, "left:#{offsetX}px; top:#{offsetY}px;".interpolate(this._oLayerInfo)); // メンバ変数へ保存 this._oHoleLayerElement = oHoleLayer; // 穴レイヤー },

穴レイヤーは、「1.背景画像レイヤー」の上に表示するので position:absolute を指定し、穴から溢れた部分は表示させたくないので overflow:hidden を指定しています。また、穴の枠の表示はしておきたいので、border:solid 1px #000000 を指定しています。後は、レイヤーサイズと位置の設定を例のinterpolateで文字列置換しています。

次に、穴レイヤーに画像レイヤーを埋め込む部分を説明します。

_generateInnerLayer: function() { // 穴レイヤー内の画像レイヤーの生成 var oInnerLayerElement = document.createElement('div'); this._oHoleLayerElement.appendChild(oInnerLayerElement); oInnerLayerElement.innerHTML = '