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

HTMLマッピング画像（イメージマップ）とは？基本構文と実装例を解説

HTMLマッピング画像（イメージマップ）とは、HTML文書の中でハイパーリンクとして機能する「クリック可能な領域」を持つ、クライアントサイドの画像マップのことです。1枚の画像の中に複数のリンク先を設定できるため、ナビゲーションバーや図解などに活用できます。

map要素とimg要素を関連付けるには、map要素のname属性の値と、img要素のusemap属性の値を一致させます。

基本構文

HTMLマッピング画像の基本的な構文は以下の通りです。

<img src="" alt="" usemap="#name_value">
<map name="name_value">
<area shape="" coords="" href="" alt="">
<area shape="" coords="" href="" alt="">
</map>

各属性のポイント

  • usemap属性：img要素側で、対応するmap要素を「#名前」の形式で指定します。
  • name属性：map要素側の識別名です。usemap属性で指定した名前と一致させる必要があります。
  • shape属性：クリック領域の形状を指定します。「rect」（長方形）、「circle」（円形）、「poly」（多角形）などが利用できます。
  • coords属性：クリック領域の座標をピクセル単位で指定します。shape属性の値によって指定方法が異なります。

それでは、HTMLマッピング画像の具体的な実装例を見てみましょう。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        color: #000;
        height: 100vh;
        background-color: #FBAB7E;
        background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
        text-align: center;
    }
    img {
        width: 200px;
        height: 200px;
    }
</style>
</head>
<body>
<h1>HTML マッピング画像</h1>
<img src="https://www.tutorialspoint.com/hadoop/images/hadoop-mini-logo.jpg" alt="Hadoopを学ぶ" usemap="#hadoopImg">
<map name="hadoopImg">
<area shape="rect" coords="0,0,400,100" alt="Hadoop ロゴ" href="https://www.tutorialspoint.com/hadoop/images/hadoop.jpg" width="100" height="100">
</map>
<p>上のロゴをクリックしてください</p>
</body>
</html>

表示結果

HTMLマッピング画像（イメージマップ）とは？基本構文と実装例を解説

画像内のHadoopロゴ（象の部分）をクリックしてみてください。HTMLマッピング画像がどのように動作するかを確認できます。

HTMLマッピング画像（イメージマップ）とは？基本構文と実装例を解説


  1. HTML DOMのborderImageRepeatプロパティの使い方と値の解説

    HTML DOMのborderImageRepeatプロパティとはHTML DOMのborderImageRepeatプロパティは、ボーダーイメージ（border-image）の画像スライスをどのように繰り返し表示するかを定義するために使用されます。このプロパティを利用することで、ボーダーイメージを「伸縮（stretch）」「繰り返し（repeat）」「丸め込み（round）」のいずれかの方法で表示するかを、JavaScriptから設定・取得できます。構文borderImageRepeatプロパティを設定する際の構文は以下のとおりです。object.style.borderImageRepea

  2. 【初心者向け】HTML DOMのfilterプロパティとは？使い方とフィルター効果一覧を解説

    HTML DOMのスタイルfilterプロパティは、要素に対してさまざまな視覚効果（フィルター）を適用するために使用されます。ぼかしや明るさの調整、グレースケール変換など、CSSのfilter機能をJavaScriptから動的に操作できるのが特徴です。 構文 filterプロパティを設定する際の基本構文は以下の通りです。 object.style.filter = none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | satu