HTML - Image Map: A Friendly Guide for Beginners

こんにちは、Web開発者を目指している皆さん！今日は、HTML Image Mapsのエキサイティングな世界に飛び込みます。初めての方でも心配しないでください。私が_years_にわたって教室で使ってきた同じ忍耐強さで、ステップバイステップガイドします。一緒にこの旅に出発しましょう！

HTML - Image Map

Why Use an Image Map? (为什么使用图像映射？)

ウェブサイトに美しい世界地図の画像があって、訪問者が異なる国をクリックして更多信息を学びたいと思うことがあります。那就是图像映射が役立つところ！単一の画像上にクリック可能なエリアを作成し、インタラクティブな要素にすることができます。

HTML `<map>` Tag (HTML `<map>` タグ)

<map> タグは、インタラクティブなエリアのコンテナのようなものです。ここでマップの名前を定義し、後で画像にリンクするために使用します。

以下のように表示されます：

<map name="worldmap">
<!-- クリック可能なエリアをここに追加します -->
</map>

この例では、私たちはマップを "worldmap" と名付けました。これを、後で使用するユニークなIDとして考えてください。

HTML `<area>` Tag (HTML `<area>` タグ)

さあ、<area> タグについて話しましょう。ここで魔法が起こります！各 <area> タグは、画像マップ内のクリック可能な領域を定義します。

以下の基本構造を見てみましょう：

<area shape="shape_type" coords="coordinates" href="link_url" alt="description">

これを分解すると：

shape: クリック可能なエリアの形状を定義します（rect、circle、またはpoly）
coords: エリアの座標を指定します
href: エリアがクリックされたときに移動するURL
alt: エリアのテキスト説明（アクセシビリティには重要です）

HTML Image Map in Action (HTML画像マップを実行)

さあ、実際の例ですべてをまとめてみましょう。画像のピザを思い浮かべて、それぞれのスライスをクリック可能にしたいとします。

<img src="pizza.jpg" alt="Delicious Pizza" usemap="#pizzamap">

<map name="pizzamap">
<area shape="poly" coords="150,0,97,90,203,90" href="cheese.html" alt="Cheese Slice">
<area shape="poly" coords="0,90,97,90,48,180" href="pepperoni.html" alt="Pepperoni Slice">
<area shape="poly" coords="203,90,300,90,252,180" href="mushroom.html" alt="Mushroom Slice">
<area shape="poly" coords="48,180,148,180,97,90" href="veggie.html" alt="Veggie Slice">
<area shape="poly" coords="152,180,252,180,203,90" href="supreme.html" alt="Supreme Slice">
</map>

これを分解すると：

<img> タグでピザの画像を表示します。
<img> タグの usemap 属性で "pizzamap" という名前のマップにリンクします。
"pizzamap" という名前の <map> を定義します。
各 <area> はピザのスライスを表します：

shape="poly" を使用して多角形（三角形のスライス）を作成します。
coords で各三角形の点を定義します。
各スライスはそのピザの種類に関する別のページにリンクします。

Types of Shapes and Their Coordinates (形状の種類とその座標)

画像マップで使用できる異なる形状を見てみましょう：

Shape	Coordinates	Example
rect	left, top, right, bottom	`<area shape="rect" coords="0,0,82,126" href="square.html" alt="Square">`
circle	center-x, center-y, radius	`<area shape="circle" coords="90,58,3" href="circle.html" alt="Circle">`
poly	x1,y1,x2,y2,...,xn,yn	`<area shape="poly" coords="22,0,66,0,66,44,22,44" href="poly.html" alt="Polygon">`

座標は画像の左上隅からのピクセル単位で測定されます！

Tips and Tricks (コツとヒント)

Use an Image Map Generator: 私が最初にこの授業を始めたとき、座標を計算するために数時間かけていました。今はオンラインツールを使用して簡単に生成します！
Test, Test, Test: 画像マップを異なるデバイスやブラウザで常にテストします。あなたのコンピュータでは完璧に見えるものが、スマートフォンでは狂うかもしれません。
Keep it Simple: 簡単な形状から始めて、徐々に複雑なものに進むようにしましょう。ローマは一日に築かれなかったし、完璧な画像マップもそうではありません！
Accessibility Matters: 各エリアに説明する alt テキストを常に含めてください。これはただの好ましい習慣ではなく、スクリーンリーダーを使用するユーザーには必須です。