例えば Photoshop の場合、「ファイル」メニューの「Webおよびデバイス用に保存」を実行し、 「透明部分」にチェックを入れて、元画像をレイヤー別に分けて出力します。 maid-system では、IE6 でもフルカラーPNGの表示が可能です。 服の透明感を出したり、画像のエッジ部分のジャギーを軽減できます。
画像数が多くなるとブラウザに負荷が掛かるので動作が重くなります。フルカラーPNGの場合は特に影響があります。 この場合は画像変更機能を使用すると、同時表示する画像を減らせるので負荷が軽減され、大規模なデータが作成しやすくなります。
テンプレートファイル (index.html) を、メモ帳などのテキストエディタで編集して設定を行います。 編集は好みに合わせて自由に行ってください。
最も簡単な指定例は次のようになります。この例では３つの画像を指定しています。画像形式は混在させることも可能です。
img("set:1; src:fuku2.png"); // 画像２(fuku2.png)
img("set:1; src:fuku1.gif"); // 画像１(fuku1.gif)
img("set:1; src:base.jpg; ctrl:0"); // ベース画像(base.jpg)
上の行に指定した画像ほど手前に表示され、パネルの上から順に名前がリストアップされます。
img() の基本的な書式は以下の通りです。
img("src:画像URL; name:画像名; ctrl:制御指定; set:表示指定");
各項目は ;（セミコロン）で区切って指定します。項目の順番は自由です。 スペースとタブは無視され、指定内容に含めることはできません。
パネルのリストアップ方式を指定します。省略すると 3 が自動指定されます。指定できる文字は以下の通りです。
※ 1 は使用しません (将来使用する可能性があるので、指定しないでください)。
セット変更時の画像の表示状態を指定します。省略すると 0 を使用します。 指定はセット順に１文字ずつ並べて行います。例えば、
セット１ … 表示 セット２ … 非表示 セット３ … 非表示 セット４ … 表示
にしたい場合、指定は set:1001 になります。0 は非表示、1 は表示になります。 不透明度も指定可能です。指定できる文字は全部で以下の通りです。
文字 表示状態 不透明度 ----+--------+------------------- 0 非表示 100% (Ver.1と同じ) 1 表示 100% (Ver.1と同じ) 2 表示 20% 3 表示 30% 4 表示 40% 5 表示 50% 6 表示 60% 7 表示 70% 8 表示 80% 9 表示 90% a 非表示 90% b 非表示 80% c 非表示 70% d 非表示 60% e 非表示 50% f 非表示 40% g 非表示 30% h 非表示 20%
※a〜h は大文字での指定も可能です。
※不透明度10%の指定には対応していません。
スタイルシートを変更してパネルの位置を画像に合わせます。 変更する箇所はスタイルシートに書かれているコメントを参照してください。
パネルの項目を選択したときのフォーカスの色を変更できます。 「パネルの文字色(一般)」と「パネルの色(一般)」は、スタイルシートのパネル色設定にも同じ色を指定します。 双方の色が異なっていると、フォーカスの跡が残ってしまいますのでご注意ください。
使用するセットの名前をセット順に option 要素で指定します。 最上行に selected 属性を指定します（指定は最上行のみ有効です）。最上行のセットは初期表示されます。
設定例（３つのセットを指定）
<option selected>セット１</option> <option>セット２</option> <option>セット３</option>
必要に応じて、戻り先のリンクを指定します。