| 14.2. イメージマップ... | ||
|---|---|---|
 |
14. ウェブフィルタ |  |
| 14.2. イメージマップ... | ||
|---|---|---|
| |
14. ウェブフィルタ | |
感応画像はウェブページ内の特定の領域にマウスポインタをかざしたとき何らかの反応を起こすしかけを作るときよく使われます。 なかでも感応画像の一部にリンクを張り、 クリックされると他のウェブページを開くようにする用途はすぐ思い付かれることでしょう。 このフィルタを使えば一枚の画像の特定の部分だけが感応するように画像を簡単に加工できます。 同様の機能はウェブデザイン専用ソフトにも標準的にありますが、 GIMPを使っても同じことができるわけです。
プラグインは画像を思いのままに区切る創造的な作業を視覚的に分かり易く親切にお手伝いします。 こうして設定した領域の情報を反映した、 HTMLコードにすぐ埋め込める適切なHTMLのタグを書き出してくれます。 さらにリンク部分をマウスオーバーなどに反応させるいろいろな動作設定も可能です。
このツールはこのてびきの1ページで説明し尽くすには複雑過ぎます。 なにしろこの用途では専用のウェブページ作成アプリケーションとほぼ同等な機能がついているからです。 ともかく最新の活用法のいくつかをここで紹介することにしましょう。 すべてを詳細に網羅した説明が必要なら、 Grokking the GIMP[GROKKING02] をご覧ください。
画像ウィンドウのメニューより → →
ウィンドウが小さければ大きくして使ってください。 とくに大事な部分はつぎのところです。
左端の辺で縦に並ぶアイコンはそれぞれ、 一番上の矢印がポインタ、 つぎの青い3つのボタンは形の異なる領域選択ツール、 5番目のボタンは領域の属性設定、 そして最後のゴミ箱アイコンボタンは選択された領域を撤去するはたらきがあります。 なおこれらの機能はすべてこのダイアログの メニューからも呼び出せます。
アイコンの右隣は元画像が表示されており、 ここでいろいろな図形領域をツールを使って描きます。
さらに右側にはアイコンが縦に並んでいます。 ダイアログの右側に表示されている領域の一覧表に関わる操作ができます。 それぞれのはたらきはアイコンを見れば想像できますが、 ポインタをかざすと現れるツールチップが機能の説明をします。
そして最も右端の区画は作成された領域の属性情報を表示する一覧表です。 ここに並ぶ項目はクリックして選択すると左側の画像表示でそれに対応する領域が選択されます。
このメニューバーは画像ウィンドウのメニューバーと似ていますが、 メニューの見出しや項目がところどころ異なっています。
他のフィルタは画像を生成するのにこのプラグインだけは画像を加工せずテキストファイルを生成します。 つまりこのダイアログで行なった操作の成果はテキストファイル形式で保存することになります。
![[ヒント]](images/tip.png)
|
ヒント |
|---|---|
|
ダイアログのメニューより → と進むとプレビューウィンドウが現れ、 現在の設定を反映したテキスト形式のタグ情報が表示されます。 |
このプラグインは保存されているテキストファイルを開いて使えます。 そのファイルで定義されている領域が読み込まれ元の画像と領域に重ねて表示されます。 ファイル作成時とは異なる画像が開かれていたり、 画像の寸法が変わっていた場合にはサイズを合わせるかどうかGIMPが質問します。
このメニューの内容は独特なので詳しく説明します。
Here you can hide or show the selection area.
現れ出るウィンドウでファイルに保存もしくはファイルから読み込まれる生データが見られます。
ここで画像表示モードを切り替えるとプレビュー区画の表示が白黒グレースケールにも変えられます。
めったに使わないメニューかもしれません。 というのもツールを呼び出すなら作業区画の左隣のアイコンをクリックした方が手早く簡単だからです。
ここでの矢印とは移動ツールのことです。 このツールを呼び出したら領域を選択したりその領域を移動したりできます。
多角形の領域ではその角を示す赤いコントロールポイントを矢印ツールで移動できます。 またポイント間の線分を でクリックすると現れるメニューには、 線分上に新たなポイントを追加するコマンドなどがあります。 またポイントは でクリックすると削除できます。
ここらのツールは皆いろいろな形の領域を作成するのに使います。 ツールを呼び出したらプレビュー画面でクリックし、 他の位置でさらにクリックという操作です。 多角形はクリックするたびにポイントが増えてゆきますが、 ダブルクリックすれば領域作成が終わり属性情報のダイアログが開きます。
これは生成されるテキストファイルに書き込まれる僅かな項目を満たすための単純なダイアログです。 作者 と 説明 でコメントが付記できます。 HTMLタグの属性情報は 画像名 と タイトル と デフォルトURL にそれぞれ指定してください。 マップファイル形式はウェブページを置くウェブサーバの一部の機能に依存する NCSA や CERN よりも、 ほぼどんなウェブサーバでも利用可能な CSIM をお勧めします。
メニューを使えばガイドの表示ができ、 きっちり大きさや間隔を整えて矩形領域を描けます。
ここではグリッドを表示するかしないかを選びその姿の種類を選べるほか、 間隔やオフセットが設定できます。 [なおこれらの項目はどういうわけかグリッドにスナップさせる グリッドに付ける を有効にしなければ定義できません。]
ガイドは画像の辺境に作成されますがGIMPのガイドに少し似てそれぞれの線の赤い正方形ポイントをクリックしてドラッグすれば移動できます。 ガイドを使えば画像上に活性化した矩形を作成できます。
活性領域を作成する方法として図形を作成する代わりに、 を呼び出すとできる升目状に並んだ矩形を任意にクリックして領域を作成する方法があります。 ダイアログが開かれますので、 升目の高さと幅や互いの間隔を定め、 縦や横の方向にそれぞれ並ぶ数と、 左上の升目の座標を設定できます。 寸法はいずれもピクセル単位です。 実行後も気に入らなければまた赤い正方形ポイントを移動すれば調節できます。
ここに並ぶ機能はほとんどが既に上述したものばかりですが、 2つだけ残っています。
右の一覧表で領域の項目の順序を変えます。 「前面に移動」で一覧表の一番下に、 「背面に移動」で一覧表の一番上に移動します。 ややこしい。
イメージマップウィンドウの主要部左側は作業区画です。 ここで適宜ツールを使ってあらゆる領域をいろんな形に作成します。
作業区画の左隣にはアイコンが縦に並んでおり、 一番上は指摘や変形を司る矢印、 そのつぎの3つは図形別の領域作成、 続いて領域の属性情報の編集、 最後には選択した領域を撤去するアイコンです。 いずれのツールも メニューからでも呼び出せます。
![[注意]](images/caution.png)
|
注意 |
|---|---|
|
領域が重なり合ってはいけません。 |
