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

HTMLのismap属性で画像をサーバーサイド画像マップとして設定する方法

HTMLのismap属性とは

HTMLでは、<img>タグにismap属性を指定することで、画像をサーバーサイド画像マップ（server-side image map）として設定できます。

この属性が有効になっていると、ユーザーが画像上の任意の位置をクリックした際に、そのクリック座標がURLクエリ文字列としてサーバーに自動的に送信されます。サーバー側では、受信した座標情報をもとに、クリックされた場所に応じた処理を実行することが可能です。

使用例

以下のコードは、ismap属性を実装する基本的な例です。実際にブラウザで実行して動作を確認してみてください。

<!DOCTYPE html>
<html>
   <body>
      <a href="">
         <img src = "https://www.tutorialspoint.com/assets/videotutorials/courses/android_penetration_testing/380_course_203_image.jpg"
            alt="Android Penetration Testing"
            width = "300" height = "250" ismap>
      </a>
      <p>On clicking the coordinates is sent to the server as a URL query string.</p>
   </body>
</html>

動作の仕組み

上記のコードで画像をクリックすると、クリックされた位置のX・Y座標が「?x,y」という形式のURLクエリ文字列として、<a>タグのhref属性で指定されたサーバーへ送信されます。たとえば、画像の中央付近をクリックすれば「?150,125」のような座標データが渡されます。

利用時の注意点

  • <a>タグ内に配置する： ismap属性を持つ<img>タグは、必ずアンカー要素（<a href="...">）の中に記述する必要があります。
  • サーバー側の処理が必要： 送信された座標を受け取り、適切なレスポンスを返すCGIスクリプトなどのサーバーサイドプログラムを用意しておきましょう。
  • alt属性の指定を推奨： アクセシビリティ向上のため、画像の内容を説明するalt属性を忘れずに設定してください。
  1. HTML DOM Mapオブジェクトの使い方を徹底解説！構文・プロパティ・サンプルコード付き

    HTML DOM の Mapオブジェクト は、HTML の <map> 要素を JavaScript から操作するためのインターフェースです。<map> 要素は、1枚の画像上の特定の領域にそれぞれ異なるリンクを設定できる「クリッカブルマップ（イメージマップ）」を作成する際に使用されます。 構文 <map> 要素を新しく作成する場合は、以下のように記述します。 var mapObject = document.createElement(MAP); Mapオブジェクトのプロパティ一覧 mapObject が持つ主なコレクションおよびプロパティは次のとおりです

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

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