ホームページ作成/画像の表示・活用 (HTML,CSS,JavaScript)

イメージマップの作り方 !HTMLで1画像内に複数リンクを設定(3ページ目)

イメージマップの作り方をご紹介。1枚の画像内部に複数個のリンクを設定できるイメージマップ。画像1つを丸ごとリンクにするのではなく、画像内の一部分だけをリンクにしたり、画像の中の座標ごとに移動先の異なる複数のリンクを作ったりできます。HTMLのmap要素とarea要素を使って、画像内を円形や矩形など自由な形で区切るだけです。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

画像内の座標を調べてイメージマップ用のマップを簡単に作る方法

イメージマップを使うためには、リンクにしたい範囲の座標を調べてarea要素を記述する必要があります。しかし、画像内の座標を1つ1つ調べてarea要素を記述するのは手間がかかって面倒です。

そこで便利なサービスとしてお勧めなのが、HTML Imagemap Generator (BUN:Log)です。ブラウザ上だけの簡単なマウス操作で、イメージマップ用のHTMLソースを生成してくれます。
 
イメージマップ用のHTMLソースをブラウザ上で簡単に作成できるサービスが便利

イメージマップ用のHTMLソースをブラウザ上で簡単に作成できるサービスが便利


以下に簡単な使い方を紹介しておきますので、Step.1~3の手順で操作してみて下さい。

 
Step.1 HTML Imagemap Generatorにブラウザでアクセスする
まずは、ブラウザでHTML Imagemap Generatorページにアクセスします。下図のように画像を読み込む初期画面が表示されますから、ここに望みの画像ファイルをドロップして下さい。

※ブラウザのウインドウと、画像のあるフォルダを並べて表示させておき、マウスでドラッグ&ドロップすると良いでしょう。
 
イメージマップの作成対象にしたい画像をブラウザ上に読み込ませる

イメージマップの作成対象にしたい画像をブラウザ上に読み込ませる


 
Step.2 望みの形状を選択してから、画像内部の望みの場所をドラッグする
画像が読み込まれて下図のように表示されたら、画面右上にある3つのボタン「矩形を描く」・「円を描く」・「多角形を描く」の中から望みの形状を選択します。次に、画像内の望みの範囲をマウスで指定します。
 
リンクとして作りたい形状を選択してから、画像内の望みの位置(座標)をマウスで示す

リンクとして作りたい形状を選択してから、画像内の望みの位置(座標)をマウスで示す


このとき、矩形や円形なら画像内をドラッグして範囲を指定できます。多角形の場合は角を1つずつクリックしていき、最後に[ESC]キーを押すことで範囲を確定します。

範囲を指定する度に、画面右側に表示されているHTMLソース領域にarea要素が自動生成されていきます。

 
Step.3 生成できたHTMLソースをコピーして使う
下図のように、画面の右側(緑色矢印部分)にはイメージマップを作るためのimg要素・map要素・area要素が自動生成されていきます。右上に小さく表示されている「RAW」という文字(黄色矢印部分)をクリックすると、HTMLソース全体を範囲選択できるのでコピーしやすくなります。
 
画面右側にイメージマップ用のHTMLソースが生成されていく

画面右側にイメージマップ用のHTMLソースが生成されていく


マップ名は「ImageMap」になっていますので、必要に応じて修正して使って下さい。また、リンク先(href属性値)はすべて「#」になっていますから、望みのリンク先に修正して下さい。

 
このように、とても簡単にイメージマップ用のHTMLソースが生成できます。ブラウザ上だけで完結するとても便利なサービスなので、ぜひ使ってみて下さい。
 

画像が表示されない場合の対策が必須

イメージマップは、画像内の好きな部分だけをリンクにできる便利な仕組みです。しかし、そのままではアクセシビリティ上の問題があります。下図をご覧下さい。
 
画像が表示されないと、イメージマップで用意されたリンクは何も分からなくなる

画像が表示されないと、イメージマップで用意されたリンクは何も分からなくなる


画像の一部分をリンクにするということは、上図のように何らかの事情で画像が表示されなかった場合には、何も把握できずに使いようがなくなってしまうということです。また、画像が表示されている場合でも、マウスなどのポインティングデバイスが使えない環境では利用しにくいでしょう(Tabキーを使って1つずつリンクをたどることは可能なので、使えないわけではありませんが)。

そのため、イメージマップで作ったすべてのリンク先は、同じページ内に別途テキストリンクも用意しておくなどの対策を忘れないようにして下さい。
 

1画像内に複数リンクを設定できるイメージマップの作り方

今回は、画像内の座標を指定してリンク範囲を作ることで、1画像内の一部分だけをリンクにしたり、1画像内に複数個のリンクを設定したりできるイメージマップの作り方をご紹介いたしました。ぜひ、活用してみて下さい。

【関連記事】
【編集部おすすめの購入サイト】
Amazonでホームページ作成の参考書をチェック!楽天市場でホームページ作成関連の書籍をチェック!
  • 前のページへ
  • 1
  • 2
  • 3
※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます