HTML ISMAPを使用する

ismap属性で画像を使用するには、画像をハイパーリンク内に配置し、特別な画像にする ismap 属性を使用します。ユーザーが画像内のある場所をクリックすると、ブラウザはマウスポインターの座標をWebサーバーへの<a>タグで指定されたURL。サーバーは、マウスポインターの座標を使用して、ブラウザーに送り返すドキュメントを決定します。

_ismap_を使用する場合、含まれる<a>タグのhref属性には、cgiやPHPスクリプトなどのサーバーアプリケーションのURLが含まれている必要があります。渡された座標に基づいて着信要求を処理します。

マウス位置の座標は、（0,0）で始まる画像の左上隅から数えた画面ピクセルです。疑問符が前に付いた座標は、URLの最後に追加されます。

たとえば、ユーザーが次の画像の左上隅から50ピクセル以上、30ピクセル以上クリックした場合：

次のリンクをクリックしてください

link：/cgi-bin/ismap.cgi [チュートリアルポイント]

次のコードスニペットによって生成されています-

<!DOCTYPE html>
<html>
   <head>
      <title>ISMAP Hyperlink Example</title>
   </head>
   <body>
      <p>Click following link</p>
      <a href = "/cgi-bin/ismap.cgi" target="_self">
         <img ismap src="/images/logo.png" alt="Tutorials Point" border="0"/>
      </a>
   </body>
</html>

次に、ブラウザは次の検索パラメータをウェブサーバーに送信します-

/cgi-bin/ismap.cgi?20,30

今、これらの渡された座標は、次の2つの方法のいずれかで処理することができます-

CGI（またはCGIファイルを使用していない場合はPHPファイル）を使用する
マップファイルを使用する

CGIまたはPHPファイル

上記の例で使用されている ismap.cgi スクリプトのperlコードは次のとおりです-

#!/usr/bin/perl

local ($buffer, $x, $y);
# Read in text
$ENV{'REQUEST_METHOD'} =~ tr/a-z/A-Z/;
if ($ENV{'REQUEST_METHOD'} eq "GET") {
   $buffer = $ENV{'QUERY_STRING'};
}

# Split information into name/value pairs
($x, $y) = split(/,/, $buffer);

print "Content-type:text/html\r\n\r\n";
print "<html>";
print "<head>";
print "<title>ISMAP</title>";
print "</head>";
print "<body>";
print "<h2>Passed Parameters are : X = $x, Y = $y </h2>";
print "</body>";
print "</html>";

1;

渡された座標を解析できるため、* if条件*のリストを配置して、渡された座標を確認し、適切なリンクされたドキュメントをブラウザに送り返すことができます。

マップファイル

マップファイルを使用して、識別された座標の間の領域が「クリック」されたときにリーダーを表示するHTMLファイルの場所を保存できます。

デフォルトのファイルを最初の場所に保持し、以下の ismap.map ファイルに示すように、さまざまな座標に対応する他のファイルを配置します。

default http://www.finddevguides.com
rect    http://www.finddevguides.com/html 5,5 64,141
rect    http://www.finddevguides.com/css  91,5 127,196
circle  http://www.finddevguides.com/javscript  154,150,59

この方法で、画像の異なる部分に異なるリンクを割り当てることができ、それらの座標をクリックすると、リンクされたドキュメントを開くことができます。したがって、 ismap.map ファイルを使用して上記の例を書き換えましょう。

<!DOCTYPE html>
<html>
   <head>
      <title>ISMAP Hyperlink Example</title>
   </head>
   <body>
      <p>Click following link</p>
      <a href = "/html/ismap.map" target="_self">
         <img ismap src = "/images/logo.png" alt="Tutorials Point" border="0"/>
      </a>
   </body>
</html>

上記の例を試す前に、Webサーバーでイメージマップファイルをサポートするための構成が必要であることを確認する必要があります。

座標系

座標の実際の値は、問題の形状に完全に依存しています。以下に要約を示し、その後に詳細な例を示します。 Adobe PhotoshopやMS Paintなどの利用可能なツールを使用して、ISMAPに使用される画像で利用可能なさまざまな座標を検出できます。

＃で始まる行はコメントです。他のすべての非空白行は、以下で構成されています-

rect = x〜1〜、y〜1〜、x〜2〜、y〜2〜 :: x〜1〜およびy〜1〜は、長方形の左上隅の座標です。 x〜2〜およびy〜2〜は、右下隅の座標です。 circle = x〜c〜、y〜c〜、radius :: x〜c〜およびy〜c〜は円の中心の座標で、radiusは円の半径です。半径25の200,50を中心とする円には、属性_coords = "200,50,25" _ poly = x〜1〜、y〜1〜、x〜2〜、y〜2〜、xがあります。〜3〜、y〜3〜、… x〜n〜、y〜n〜* ::さまざまなx-yペアはポリゴンの頂点（ポイント）を定義し、あるポイントから次のポイントまで「線」が描かれます。幅が最も広いポイントが20、20、および40ピクセルの頂点を持つ菱形のポリゴンには、属性_coords = "20,20,40,40,20,60,0,40" _があります。

すべての座標は、画像の左上隅（0,0）を基準にしています。各図形には関連するURLがあります。任意の画像ソフトウェアを使用して、さまざまな位置の座標を知ることができます。

Html-using-html-ismap

目次

HTML ISMAPを使用する

CGIまたはPHPファイル

マップファイル

座標系