Gimpを使ったイメージマップの作り方

イメージマップとは、画像にURLを「マッピング」したもの。自分のウェブサイトや個人的なスタートページに、自分の好きなサイトをイメージマップに貼り付けてドレスアップすることができます。いろいろなソフトがありますが、ここではGimpを使います。

1

マッピングする最初のグラフィックを作成します。写真でも画像でも何でもかまいません。ここでは、wikiHow、wikiHowフォーラム、iGoogleを使う。

2

画像を作成したら（または開いたら）、Filters >> Web >> ImageMap と進みます。

• Gimp ImageMapダイアログ画面。

3

画面右の四角をクリックし、使いたい画像をひとつ選ぶ。このスクリーンショットでは、wikiHowが選択されています。出てきたダイアログ画面に必要な情報を入力します。

• 長方形をクリックすると、グラフィックの正確な位置が表示されます。

4

マップの残りの部分についてもこの作業を続けます。

5

すべてのリンク領域を定義し終わったら、イメージマップを保存します。GIMPは自動的にこれを拡張子.mapのファイルとして保存するように指示します。お望みであれば、そのように保存できます。しかし、このファイルには、編集して自分のウェブページにコピーする必要のあるHTMLコード（画像なし）が含まれているので、[ファイル名].htmlとして保存し、ステップ7に直接スキップすることをお勧めします。

6

HTMLファイルとして保存していない場合は、保存したファイルを見つけて拡張子を.htmlに変更してください。ファイル拡張子の変更に関する警告が表示される場合があります。続行するには「はい」をクリックします。

7

テキストエディタでこのHTMLファイルを開きます。このファイルには、単に座標とURLのリストが含まれていることに気づくでしょう。これは、画像のどの部分にどのURLを割り当てるかをブラウザに指示するコードです。

8

で定義されたファイルパスが、URLを割り当てたい画像にリンクしていることを確認してください。正しく画像を指定しないと、画像がまったく表示されない可能性があります。

9

オプション：ブラウザを使ってHTMLファイルを開いてください。すべてがうまくいけば、あなたが定義した領域に従って、すべてのURLがマッピングされた画像が表示されるはずです。

10

イメージマップをウェブページのHTMLに追加します。タグ（ソース画像へのパスを定義しています）と

この記事は、CC BY-NC-SAで公開されている「 How to Create an Image Map Using Gimp 」を改変して作成しました。特に断りのない限り、CC BY-NC-SAで利用可能です。