ギロチン コマンドのように画像を切り分け、 ひと揃いの断片画像を作成します。 また同時にこのフィルターは生成される画像ファイルを接ぎ合わせる HTML の表組みコードをテキストファイルで生成します。 表組みのそれぞれの升目に画像の断片が入っている構造です。 あとはこのテキストファイルの内容を HTML 文書に埋め込むことになります。
フィルターは HTML ページで感応する画像の作成を支援する単純で使い易いスクリプトです。 このフィルターは垂直と水平に置かれたガイドに沿って繰り返しますがこのフィルターは実にとても単純な支援ツールです。 書き出される HTML コードは精々次の例のようなものになります。
例17.1 単純な「画像分割」フィルターの出力例
<table cellpadding="0" border="0" cellspacing="0"> <tr> <td><img alt="" src="slice_0_0.png"/></td> <td><img alt="" src="slice_0_1.png"/></td> </tr> <tr> <td><img alt="" src="slice_1_0.png"/></td> <td><img alt="" src="slice_1_1.png"/></td> </tr> </table>
生成される HTML コード。 「style」属性は省かれている。
画像にガイド (見当線) がないときはフィルターは何も実行しません。 もちろんガイドが単に隠されているだけならフィルターは作動します。
![]() |
ヒント |
---|---|
感応画像を作成するツールには、 より強力かつ高度な イメージマップ フィルターもあります。 (でもこれは随分と複雑ですが。) |
ほとんどのオプションの意味は見てのとおりですが、 あえて説明します。
生成された HTML ファイルと画像ファイルの保管場所です。 初期状態では現在の作業ディレクトリーにこれらのファイルが保管されます。 記入欄の右端の三角形のボタンをクリックすると他のフォルダーを辿れる引き出しメニューが出てきます。
生成される HTML コードを収めたファイルの名前です。 記入欄で他の名前も指定できます。
このフィルターが生成する画像のファイル名は
となります。 このうち共通部のところがこの文字記入欄で指定できるプレフィクス (先頭部分) です。 初期状態では「slice」となっています。 行と列にはそれぞれの番号が 0 を開始番号として振られます。 共通部
_行
_列
.拡張子
.
は エクスポート画像のファイル形式 で指定したファイル拡張子が入ります。拡張子
このオプションはとくに マウスオーバー時とクリック時の Javascript を記述 オプションを有効にしており分割画像に他の組み合わせを必要としている場合に出番が多くあります。
画像を別フォルダーにエクスポート させる場合は画像を収めるフォルダーが無ければ作成されます。 この場合の既定の保管先フォルダーの名前は images
ですが、 エクスポート先のフォルダー名 の記入欄で他のフォルダー名が指定できます。
この数値は HTML テーブルのセル同士の間隔を指定する「celllspacing」属性値になります。 値の範囲は 0 ピクセルから 15 ピクセルまでです。 ここに正の整数を設定すると縦や横のガイドはこの太さをした平行線で現れます。
ここで気をつけていただきたいことは、 この間隔を拡げても画像の規模は大きくならないことです。 むしろ HTML テーブルで揃えられた画像は消しゴムツールで縦横の線状に消されたように見えることでしょう。
このオプションを有効にするとこのフィルターは Javascript コードを追加します。 HTML の場合と同じく生成されたままの状態では何の効果もありませんが、 動的機能を追加してゆくには良好な手掛かりとなります。 この Javascript コードは「onmouseover」のようなイベントを扱う関数に利用できます。
例17.4 JavaScript コードの抜粋
function exchange (image, images_array_name, event) { name = image.name; images = eval (images_array_name); switch (event) { case 0: image.src = images[name + "_plain"].src; break; case 1: image.src = images[name + "_hover"].src; break; case 2: image.src = images[name + "_clicked"].src; break; case 3: image.src = images[name + "_hover"].src; break; } }
このオプションが無効ならばこのフィルターはすべての表組みセルに <a href="#"> ... </a>
というハイパーリンク素枠を加えます。 逆に初期設定どおりこれを有効にすると、 ガイドが水平方向と垂直方向のどちらにも少なくとも 2 本以上ある場合に、 フィルターは各行各列のすべての先頭と最後のセルだけはこのハイパーリンク素枠を省きます。 この処置は画像に枠が描かれていてその部分は反応させたくないときに役立ちます。
例17.5 外周部の画像片にはアンカータグを省略 (簡易 HTML コード)
<table cellpadding="0" border="0" cellspacing="0"> <tr> <td><img alt="" src="images/slice_0_0.png"/></td> <td><img alt="" src="images/slice_0_1.png"/></td> <td><img alt="" src="images/slice_0_2.png"/></td> <td><img alt="" src="images/slice_0_3.png"/></td> </tr> <tr> <td><img alt="" src="images/slice_1_0.png"/></td> <td><a href="#"><img alt="" src="images/slice_1_1.png"/></a></td> <td><a href="#"><img alt="" src="images/slice_1_2.png"/></a></td> <td><img alt="" src="images/slice_1_3.png"/></td> </tr> <tr> <td><img alt="" src="images/slice_2_0.png"/></td> <td><img alt="" src="images/slice_2_1.png"/></td> <td><img alt="" src="images/slice_2_2.png"/></td> <td><img alt="" src="images/slice_2_3.png"/></td> </tr> </table>
内側のセルだけ (空の) ハイパーリンクがかかる。