HTML画像マップを作成するにはどうすればよいですか？

リンクがハイパーテキストマークアップ言語（HTML）で画像に追加されると、そのリンクは画像全体に追加されます。 これは、プログラマーが複数の領域またはボタンで単一の画像を作成したい場合で、各領域が異なるリンクに使用される場合に問題になる可能性があります。 HTMLイメージマップを使用すると、プログラマは、リンクが移動する特定の領域を指定して、複数のリンクを1つの画像に埋め込むことができます。 これは、リンクの形状を指定し、リンクに使用される座標をHTMLに伝えることで実行されます。

インターネットに使用される画像はピクセル単位で測定されます。 画像内のピクセル数を知ることは、画像マップを作成するための最初の重要なステップです。 たとえば、高さ400ピクセル、幅250ピクセルの長方形の画像が使用されています。 次に、プログラマーは、HTMLイメージマップが適切に機能するために、座標の形状を正確に測定する方法を知る必要があります。

HTMLイメージマップを使用する場合、左上隅は0,0と呼ばれます。 この場合の右下隅は250,400です。 測定は、最初に幅、次に高さで行われます。 簡単に考えると、最初の測定はHTMLに左端から右へどれだけ遠くに行くかを伝えることであり、2番目の方法は何ピクセル下に行くかをHTMLに伝えることです。 プログラマがマップ上のポイントを左端から10ピクセル下、50ピクセル下にしたい場合、座標は10,50になります。

プログラマーがHTMLイメージマップに対して呼び出すことができる3つの異なる形状があります：rect、circle、polygon。 「四角形」は四角形を表し、プログラマはまず左上隅の座標を入力し、次に右下隅の座標を入力する必要があります。 円は、円が始まる座標を入力して指定し、次に円の半径を入力します。 ポリゴンは、上から右に5つの座標すべてを入力することで作成されます。

HTMLイメージマップのコーディングは次のようになります。
<map name = "test">
<area href = "url.html" shape = rect coords = "10,50,20,60">
<area href = "url.html" shape = circle coords = "10,50,4">
<area href = "url.html" shape = polygon coords = "10,50,12,55,15,60,13,65,8,55">

各HTMLイメージマップには名前が必要です。「url.html」セクションは、ユーザーがクリックしたときにイメージマップのそのセクションがユーザーを導くリンクです。 HTMLを使用して画像をWebサイトに配置する場合、プログラマはusemap = "test。"を記述する必要があります。 これにより、使用するHTMLイメージマップが画像に示されます。