15.4. 画像分割...

15.4.1. 概観

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

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

元画像 (ガイドつき)

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

画像分割フィルター適用


This filter is a simple and easy to use helper for creating sensitive images to be used in HTML files. The filter slices up the source image (like the Slice Using Guides command does) along its horizontal and vertical guides, and produces a set of sub-images. At the same time it creates a piece of HTML code for a table saved in a text file. Every table cell contains one part of the image. The text file should then be embedded in an HTML document.

繰り返しますがこのフィルターは実にとても単純な支援ツールです。 書き出される 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属性は省かれている。


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

[ティップ] ティップ

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

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

This filter is found in the image window menu under FiltersWebSlice….

15.4.3. オプション

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

画像分割のオプション

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

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

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

HTML ドキュメント名

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

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

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

This option is particularly useful when you want to create JavaScript for onmouseover and clicked and need different sets of images.

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

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

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

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

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

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


テーブル要素間の間隔

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

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

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


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

JavaScript for onmouseover and clicked

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

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