【HTML】クリティカルマップ(イメージマップ)を作成する

HTMLで複雑なクリティカルマップ(イメージマップ)を作成する方法について説明します。

クリティカルマップ(イメージマップ)の基本
複雑なイメージマップの作成手順
クリティカルマップのサンプルコード
注意点・ポイント
まとめ

クリティカルマップ(イメージマップ)の基本

イメージマップは、1つの画像の中に複数のクリック可能な領域を設定できるHTML機能です。以下の要素を使用します:

<img>: マップの基となる画像を指定
<map>: イメージマップを定義
<area>: クリック可能な領域を指定

コードの説明

<img> 要素:
- src: イメージマップの基となる画像ファイルを指定します。
- usemap: 使用するマップの名前を指定します（#を付けて指定）。
- alt: 画像の代替テキストを提供します。
<map> 要素:
- name: マップの名前を定義します。これは<img>のusemap属性と一致させる必要があります。
<area> 要素:
- shape: クリック可能な領域の形状を指定します（rect: 長方形、circle: 円、poly: 多角形）。
- coords: 領域の座標を指定します。形状によって指定方法が異なります。
- href: クリック時のリンク先を指定します。
- alt: 領域の代替テキストを提供します。

座標の指定方法

rect: 左上と右下の座標を指定 (x1,y1,x2,y2)
circle: 中心の座標と半径を指定 (x,y,r)
poly: 多角形の各頂点の座標を順に指定 (x1,y1,x2,y2,…,xn,yn)

このサンプルコードでは、地図の画像上に、北海道（長方形）、東京（円）、大阪（多角形）といった3つのクリック可能な領域を作成しています。実際の使用時は、画像のサイズや内容に合わせて座標を適切に調整する必要があります。

複雑なイメージマップの作成手順

基となる画像を用意する
イメージマップジェネレーターツールを使用して領域を設定
- 「Image Map Generator」などのオンラインツールが便利です。
生成されたHTMLコードを編集・調整
レスポンシブ対応のためのJavaScriptを追加

クリティカルマップのサンプルコード

<img src="map.jpg" usemap="#imagemap" alt="マップ画像">
<map name="imagemap">
  <area shape="poly" coords="10,10,50,30,30,50" href="link1.html" alt="領域1">
  <area shape="circle" coords="100,100,50" href="link2.html" alt="領域2">
  <area shape="rect" coords="200,200,300,300" href="link3.html" alt="領域3">
</map>

<script src="jquery.min.js"></script>
<script src="jquery.rwdImageMaps.min.js"></script>
<script>
$(document).ready(function() {
  $('img[usemap]').rwdImageMaps();
});
</script>

HTMLの部分

<img src="map.jpg" usemap="#imagemap" alt="マップ画像">
<map name="imagemap">
  <area shape="poly" coords="10,10,50,30,30,50" href="link1.html" alt="領域1">
  <area shape="circle" coords="100,100,50" href="link2.html" alt="領域2">
  <area shape="rect" coords="200,200,300,300" href="link3.html" alt="領域3">
</map>

<img> 要素:
- src="map.jpg": イメージマップの基となる画像ファイルを指定しています。
- usemap="#imagemap": 使用するマップの名前を指定しています。
- alt="マップ画像": 画像の代替テキストを提供しています。
<map> 要素:
- name="imagemap": マップの名前を定義しています。これは<img>のusemap属性と一致しています。
<area> 要素:
- 3つの異なる形状の領域が定義されています。
  a. 多角形（poly）: 座標 (10,10), (50,30), (30,50) で三角形を形成
  b. 円（circle）: 中心座標 (100,100)、半径50の円
  c. 長方形（rect）: 左上 (200,200) から右下 (300,300) の長方形
- 各領域にはそれぞれ異なるリンク先（href）と代替テキスト（alt）が設定されています。

JavaScriptの部分

<script src="jquery.min.js"></script>
<script src="jquery.rwdImageMaps.min.js"></script>
<script>
$(document).ready(function() {
  $('img[usemap]').rwdImageMaps();
});
</script>

外部スクリプトの読み込み:
- jQuery本体とrwdImageMapsプラグインを読み込んでいます。
スクリプトの実行:
- $(document).ready(): ページの読み込みが完了したときに実行されます。
- $('img[usemap]').rwdImageMaps();: usemap属性を持つすべての<img>要素に対してrwdImageMaps()メソッドを適用します。
rwdImageMaps()の役割:
- このプラグインは、イメージマップをレスポンシブ（画面サイズに応じて適切に調整される）にします。
- 画像のサイズが変更されても、クリック可能な領域が正しく機能するよう自動的に調整します。