14.4. 画像分割...

14.4.1. 概観

図17.352 画像分割フィルターの使用例

画像分割フィルターの使用例

元画像 (ガイドつき)

画像分割フィルターの使用例

画像分割フィルター適用


画像分割... フィルターは 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属性は省かれている。


画像にガイド (見当線) がないときはフィルターは何も実行しません。 もちろんガイドが単に隠されているだけならフィルターは作動します。

[ヒント] ヒント

感応画像を作成するツールには、 より強力かつ高度な イメージマップ フィルターもあります。 (でもこれは随分と複雑ですが。)

14.4.2. フィルターの呼び出し方

画像ウィンドウのメニューよりフィルターウェブ画像分割...。 このフィルターは Python-Fu が利用可能な場合のみメニューに現れます。

14.4.3. オプション

図17.353 画像分割のオプション

画像分割のオプション

ほとんどのオプションの意味は見てのとおりですが、 あえて説明します。

HTML ドキュメントを生成する場所

生成された HTML ファイルと画像ファイルの保管場所です。 初期状態では現在の作業ディレクトリーにこれらのファイルが保管されます。 記入欄の右端の三角形のボタンをクリックすると他のフォルダーを辿れる引き出しメニューが出てきます。

HTML ドキュメント名

生成される HTML コードを収めたファイルの名前です。 記入欄で他の名前も指定できます。

画像ファイル名のプレフィクス

このフィルターが生成する画像のファイル名は 共通部__.拡張子 となります。 このうち共通部のところがこの文字記入欄で指定できるプレフィクス (先頭部分) です。 初期状態ではsliceとなっています。 行と列にはそれぞれの番号が 0 を開始番号として振られます。 .拡張子エクスポート画像のファイル形式 で指定したファイル拡張子が入ります。

このオプションはとくに マウスオーバー時とクリック時の Javascript を記述 オプションを有効にしており分割画像に他の組み合わせを必要としている場合に出番が多くあります。

エクスポート画像のファイル形式

作成される ファイル形式 には GIFJPGPNG のいずれかが選べます。

画像を別フォルダーにエクスポート, エクスポート先のフォルダー名

画像を別フォルダーにエクスポート させる場合は画像を収めるフォルダーが無ければ作成されます。 この場合の既定の保管先フォルダーの名前は images ですが、 エクスポート先のフォルダー名 の記入欄で他のフォルダー名が指定できます。

例17.2 画像用に別フォルダーを使った例

画像を別フォルダーにエクスポート した結果


テーブル要素間の間隔

この数値は HTML テーブルのセル同士の間隔を指定するcelllspacing属性値になります。 値の範囲は 0 ピクセルから 15 ピクセルまでです。 ここに正の整数を設定すると縦や横のガイドはこの太さをした平行線で現れます。

例17.3 テーブル要素間の間隔

関連している HTML コードの抜粋


ここで気をつけていただきたいことは、 この間隔を拡げても画像の規模は大きくならないことです。 むしろ HTML テーブルで揃えられた画像は消しゴムツールで縦横の線状に消されたように見えることでしょう。

マウスオーバー時とクリック時の Javascript を記述

このオプションを有効にするとこのフィルターは 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>
              

内側のセルだけ (空の) ハイパーリンクがかかる。