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

HTMLでクライアント側のイメージマップとして画像を指定するには？（usemap属性の使い方）

HTMLで画像をクライアント側のイメージマップ（画像マップ）として指定するには、<img>タグにusemap属性を使用します。イメージマップを利用すると、1枚の画像の中に複数のクリック可能な領域を定義でき、クリックした場所に応じて異なるリンク先へ移動させることができます。サーバー側の処理が不要で、ブラウザだけで動作するため「クライアント側」と呼ばれます。

イメージマップの基本的な仕組み

イメージマップは、次の3つの要素を組み合わせて実装します。

  1. <img>タグにusemap属性を追加し、「#マップ名」の形式で対応するマップを指定する
  2. <map>要素を作成し、name属性でマップ名を定義する
  3. <area>要素で、クリック可能な領域の形状（shape）・座標（coords）・リンク先（href）を設定する

コード例

以下のコードを実行して、usemap属性の実装方法を確認してみましょう。

<!DOCTYPE html>
<html>
   <head>
      <title>HTML map Tag</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>

主な属性の解説

  • shape：領域の形状を指定します。「rect（長方形）」「circle（円形）」「poly（多角形）」から選択できます。
  • coords：領域の座標を指定します。上の例のように円形の場合は「中心のX座標，中心のY座標，半径」の順にカンマ区切りで記述します。
  • href：領域がクリックされたときに移動するリンク先のURLを指定します。
  • alt：領域の代替テキストを指定します。アクセシビリティの観点から設定が推奨されます。

このようにusemap属性と<map>・<area>要素を組み合わせることで、1枚の画像から複数のリンクを持つ直感的なナビゲーションを簡単に作成できます。

  1. HTMLページでアニメーション画像（GIF）を表示する方法をわかりやすく解説

    HTMLにおけるアニメーション画像とは、Webページ上で動きのある画像のことです。一般的にはGIF（Graphics Interchange Format／グラフィックス・インターチェンジ・フォーマット）形式のファイルが使用されます。GIFは特別なプラグインやJavaScriptなしでもブラウザ上で自動的に再生されるため、手軽に動きのあるコンテンツを表現できるのが魅力です。 HTMLでアニメーション画像を追加するのはとても簡単です。<img>タグにsrc属性を組み合わせて使用します。src属性には、表示したいGIF画像のURLを指定します。 さらに、height属性とwidth属

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

    HTMLマッピング画像（イメージマップ）とは、HTML文書の中でハイパーリンクとして機能する「クリック可能な領域」を持つ、クライアントサイドの画像マップのことです。1枚の画像の中に複数のリンク先を設定できるため、ナビゲーションバーや図解などに活用できます。 map要素とimg要素を関連付けるには、map要素のname属性の値と、img要素のusemap属性の値を一致させます。 基本構文 HTMLマッピング画像の基本的な構文は以下の通りです。 <img src="" alt="" usemap="#name_value">