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

HTMLで画像マップの領域座標を設定する方法【coords属性の使い方】

HTMLで画像マップ（イメージマップ）内のクリック可能な領域の座標を設定するには、<area>要素のcoords属性を使用します。

coords属性の基本

coords属性は、shape属性で指定した形状に応じて、リンク先を持つ領域の座標を定義します。指定できる形状は以下の3種類です。

  • rect（矩形）：左上と右下の2点の座標を「x1,y1,x2,y2」の形式で指定します。
  • circle（円形）：中心の座標と半径を「x,y,半径」の形式で指定します。
  • poly（多角形）：各頂点の座標を「x1,y1,x2,y2,…」の形式で順番に指定します。

コード例

以下のコードは、coords属性を使って円形のクリック領域を設定する実装例です。

<!DOCTYPE html>
<html>
   <head>
      <title>HTML coords属性</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>

コードの解説

この例では、<img>要素のusemap属性によって画像が<map>要素と関連付けられています。<area>要素では、shape="circle"として円形の領域を定義し、coords="154,150,59"により「X座標154px・Y座標150pxの位置を中心とした半径59pxの円」をクリック可能な領域として指定しています。この領域がクリックされると、href属性で指定されたページへ遷移します。

注意点

  • 座標の単位はピクセルで、画像の左上を原点（0,0）として指定します。
  • <map>要素のname属性の値と、usemap属性で指定する値（先頭に#を付ける）は一致させる必要があります。
  • alt属性を必ず設定し、アクセシビリティを確保しましょう。
  1. JavaScriptでinnerHTMLを設定する方法をわかりやすく解説

    JavaScriptでHTML要素の内容を動的に書き換えたい場合に便利なのが、innerHTMLプロパティです。innerHTMLを使えば、指定した要素の中にHTML文字列をそのまま挿入・置き換えることができます。本記事では、innerHTMLを設定する正しい構文と、実際に動作するサンプルコードを初心者向けに解説します。 innerHTMLを設定する正しい構文 innerHTMLを設定する際の正しい構文は以下のとおりです。 document.getElementById(yourIdName).innerHTML=yourValue; この構文では、まずgetElementById()メソッド

  2. HTMLで要素の幅を設定する方法【width属性の使い方を解説】

    HTMLでは、width属性を使用することで要素の幅を設定できます。この属性は、<canvas>、<embed>、<img>、<input>、<video> などの要素と組み合わせて利用可能です。 width属性の基本的な使い方 width属性には、ピクセル単位の数値を指定します。例えば「width=300」と記述すると、要素の幅は300ピクセルに設定されます。高さを指定したい場合は、height属性を併用します。 width属性が使える主な要素 <img> … 画像の表示幅を指定 <video> … 動