| 14.2. イメージマップ... | ||
|---|---|---|
|
14. ウェブフィルター |  |
| 14.2. イメージマップ... | ||
|---|---|---|
|
|
14. ウェブフィルター | |
感応画像はウェブページ内の特定の領域にマウスポインターをかざしたとき何らかの反応を起こすしかけを作るときよく使われます。 なかでも感応画像の一部にリンクを張り、 クリックされると他のウェブページを開くようにする用途はすぐ思い付かれることでしょう。 このフィルターを使えば一枚の画像の特定の部分だけが感応するように画像を簡単に加工できます。 同様の機能はウェブデザイン専用ソフトにも標準的にありますが、 GIMP を使っても同じことができるわけです。
プラグインは画像を思いのままに区切る創造的な作業を視覚的に判り易く親切にお手伝いします。 こうして設定した領域の情報を反映した、 HTML コードにすぐ埋め込める適切な HTML のタグを書き出してくれます。 さらにリンク部分をマウスオーバーなどに反応させるいろいろな動作設定も可能です。
このツールはこのてびきの 1 ページで説明し尽くすには複雑過ぎます。 なにしろこの用途では専用のウェブページ作成アプリケーションとほぼ同等な機能がついているからです。 ともかく最新の活用法のいくつかをここで紹介することにしましょう。 すべてを詳細に網羅した説明が必要なら、 Grokking the GIMP[GROKKING02] をご覧ください。
From an image window, you can find this filter through → →
ウィンドウが小さければ大きくして使ってください。 とくに大事な部分はつぎのところです。
左端の辺で縦に並ぶアイコンはそれぞれ、 一番上の矢印がポインター、 つぎの青い 3 つのボタンは形の異なる領域選択ツール、 5 番目のボタンは領域の属性設定、 そして最後のゴミ箱アイコンボタンは選択された領域を撤去するはたらきがあります。 なおこれらの機能はすべてこのダイアログの メニューからも呼び出せます。
アイコンの右隣は元画像が表示されており、 ここでいろいろな図形領域をツールを使って描きます。
さらに右側にはアイコンが縦に並んでいます。 ダイアログの右側に表示されている領域の一覧表に関わる操作ができます。 それぞれのはたらきはアイコンを見れば想像できますが、 ポインターをかざすと現れるツールチップが機能の説明をします。
そして最も右端の区画は作成された領域の属性情報を表示する一覧表です。 ここに並ぶ項目はクリックして選択すると左側の画像表示でそれに対応する領域が選択されます。
このメニューバーは画像ウィンドウのメニューバーと似ていますが、 メニューの見出しや項目がところどころ異なっています。
他のフィルターは画像を生成するのにこのプラグインだけは画像を加工せずテキストファイルを生成します。 つまりこのダイアログで行なった操作の成果はテキストファイル形式で保存することになります。
![[ティップ]](images/tip.png)
|
ティップ |
|---|---|
|
ダイアログのメニューより → と進むとプレビューウィンドウが現れ、 現在の設定を反映したテキスト形式のタグ情報が表示されます。 |
このプラグインは保存されているテキストファイルを開いて使えます。 そのファイルで定義されている領域が読み込まれ元の画像と領域に重ねて表示されます。 ファイル作成時とは異なる画像が開かれていたり、 画像の寸法が変わっていた場合にはサイズを合わせるかどうか GIMP が質問します。
このメニューの内容は独特なので詳しく説明します。
Here you can hide or show the selection area.
現れ出るウィンドウでファイルに保存もしくはファイルから読み込まれる生データが見られます。
ここで画像表示モードを切り替えるとプレビュー区画の表示が白黒グレースケールにも変えられます。
めったに使わないメニューかもしれません。 というのもツールを呼び出すなら作業区画の左隣のアイコンをクリックした方が手早く簡単だからです。
ここでの矢印とは移動ツールのことです。 このツールを呼び出したら領域を選択したりその領域を移動したりできます。
多角形の領域ではその角を示す赤いコントロールポイントを矢印ツールで移動できます。 またポイント間の線分を でクリックすると現れるメニューには、 線分上に新たなポイントを追加するコマンドなどがあります。 またポイントは でクリックすると削除できます。
ここらのツールは皆いろいろな形の領域を作成するのに使います。 ツールを呼び出したらプレビュー画面でクリックし、 他の位置でさらにクリックという操作です。 多角形はクリックするたびにポイントが増えてゆきますが、 ダブルクリックすれば領域作成が終わり属性情報のダイアログが開きます。
これは生成されるテキストファイルに書き込まれる僅かな項目を満たすための単純なダイアログです。 作者 と 説明 でコメントが付記できます。 HTML タグの属性情報は 画像名 と タイトル と デフォルトURL にそれぞれ指定してください。 マップファイル形式はウェブページを置くウェブサーバーの一部の機能に依存する NCSA や CERN よりも、 ほぼどんなウェブサーバーでも利用可能な CSIM をお勧めします。
メニューを使えばガイドの表示ができ、 きっちり大きさや間隔を整えて矩形領域を描けます。
ここではグリッドを表示するかしないかを選びその姿の種類を選べるほか、 間隔やオフセットが設定できます。 [なおこれらの項目はどういうわけか グリッドにスナップ を有効にしなければ定義できません。]
ガイドは画像の辺境に作成されますが GIMP のガイドに少し似てそれぞれの線の赤い正方形ポイントをクリックしてドラッグすれば移動できます。 ガイドを使えば画像上に活性化した矩形を作成できます。
Instead of creating geometrical shapes to select the active areas you may use an array of rectangles, each representing an active area, by clicking on the 「Create guides」. In the menu popping up you set the width and height of the rectangles, the space between them, the number of rows and columns, and the upper and left startpoint for the array. All measures are in pixels. If you are not satisfied with the result you may adjust each rectangle by moving the red squares as usual.
ここに並ぶ機能はほとんどが既に上述したものばかりですが、 2 つだけ残っています。
右の一覧表で領域の項目の順序を変えます。 「領域を最前面に移動」アイコンボタンで一覧表の一番下に、 「領域を最背面に移動」アイコンボタンで一覧表の一番上に移動します。 ややこしい。
イメージマップウィンドウの主要部左側は作業区画です。 ここで適宜ツールを使ってあらゆる領域をいろんな形に作成します。
作業区画の左隣にはアイコンが縦に並んでおり、 一番上は指摘や変形を司る矢印、 そのつぎの 3 つは図形別の領域作成、 続いて領域の属性情報の編集、 最後には選択した領域を撤去するアイコンです。 いずれのツールも メニューからでも呼び出せます。
![[注意]](images/caution.png)
|
注意 |
|---|---|
|
領域が重なり合ってはいけません。 |
作業区画の右側には作成された領域のそれぞれの属性情報を示す一覧表があります。 ここで項目をクリックして選択すると連動して作業区画上の領域が選択され、 加工ができます。
Beside the display is an icon vertical set; its use is obvious but a help pop-up gives you some information about each function.
上下のボタンは一覧表で項目を移動するためのものですが、 残念ながらどちらも機能しません。 しかし当然ながら領域は重なり合わないよう慎重に作図されたはずですので、 結局のところこの機能はいらないでしょう。
