HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLで画像マップ（イメージマップ）を作成する方法を解説

HTMLの画像マップとは？

HTMLで画像マップ（イメージマップ）を追加するには、<map>タグを使用します。<map>タグは、<img>タグと組み合わせて使用することで、1枚の画像上に複数のクリック可能な領域（リンク領域）を定義できます。

画像マップを使えば、1つの画像の中の特定の場所をクリックしたときに、それぞれ異なるリンク先へ移動させることが可能になります。例えば、地図画像の各都市をクリックして詳細ページへ飛ばす、といった使い方ができます。

<map>タグの主な属性

<map>タグで使用する属性は以下のとおりです。

属性値説明
nameunique_nameマップタグに一意の名前を定義します。この名前を<img>タグのusemap属性で参照します。

<area>タグの主な属性

クリック可能な領域を定義する<area>タグでは、以下の属性がよく使われます。

  • shape：領域の形状を指定します（rect＝長方形、circle＝円形、poly＝多角形）。
  • coords：領域の座標を指定します。形状によって指定方法が異なります。
  • href：クリック時のリンク先URLを指定します。
  • alt：領域の代替テキストを指定します。
  • target：リンクの開き方を指定します（_self、_blankなど）。

画像マップの作成例

以下のコードを実行して、HTMLで画像マップを作成する方法を確認してみましょう。

<!DOCTYPE html>
<html>
   <head>
      <title>HTML map Tag</title>
   </head>
   <body>
      <img src = "/images/html.gif" alt = "HTML Map" border = "0" usemap = "#html"/>
      <!-- マッピングの作成 -->
      <map name = "html">
         <area shape = "circle" coords = "154,150,59" href = "about/about_team.htm"
         alt = "Team" target = "_self" />
      </map>
   </body>
</html>

コードの解説

この例では、以下のような仕組みで画像マップが機能します。

  1. <img>タグのusemap属性に#htmlを指定し、<map>タグと関連付けています。
  2. <map>タグのname属性の値（html）が、usemap属性の値と一致することで紐付けられます。
  3. <area>タグで、画像上の座標（中心X座標154、中心Y座標150、半径59）に円形のクリック領域を定義しています。
  4. その領域をクリックすると、href属性で指定されたページ（about/about_team.htm）へ移動します。

まとめ

画像マップを作成する基本的な手順は次のとおりです。

  1. <img>タグにusemap属性を追加し、マップ名を指定する
  2. <map>タグでマップを定義し、name属性で名前を付ける
  3. <area>タグでクリック可能な領域の形状・座標・リンク先を設定する

座標の指定には画像編集ソフトやブラウザの開発者ツールを活用すると、正確な位置を把握しやすくなります。レスポンシブデザインに対応させたい場合は、CSSやJavaScriptと組み合わせた実装も検討するとよいでしょう。

  1. HTMLで画像をリンクとして使用する方法

    HTMLで画像をリンクとして使用するには、<img>タグと、href属性を持つ<a>タグを組み合わせます。<img>タグはWebページに画像を表示するためのタグであり、<a>タグはリンクを作成するためのタグです。<img>タグのsrc属性には表示したい画像のURLを指定します。あわせてwidth属性とheight属性を指定することで、画像のサイズを明示的に制御でき、レイアウトの崩れを防ぐこともできます。基本的な書き方構造としては、<a>タグの中に<img>タグを入れ子にするだけです。これにより、クリック可能な画

  2. HTMLで参考文献（Bibliography）を作成する方法

    参考文献（Bibliography）とは、執筆時に参照した書籍や資料の一覧をまとめて記載するセクションのことです。HTMLを使えば、こうした参考文献リストを簡単に作成できます。具体的には、<ol>タグで書籍を番号付きリストとして列挙し、<cite>タグで作品のタイトルをマークアップします。 <cite>タグは、書籍のタイトルだけでなく、楽曲、絵画、映画など、さまざまな作品のタイトルを示す際にも使用できます。このタグは「引用」を意味しており、タグ内に記述した内容はすべて作品のタイトルとして扱われます。 サンプルコード それでは、実際にHTMLで参考文献リスト