HTML-画像リンク

テキストを使用してハイパーテキストリンクを作成する方法を見てきました。また、Webページで画像を使用する方法も学びました。次に、画像を使用してハイパーリンクを作成する方法を学習します。

例

画像をハイパーリンクとして使用するのは簡単です。以下に示すように、テキストの場所でハイパーリンク内の画像を使用するだけです-

<!DOCTYPE html>
<html>

   <head>
      <title>Image Hyperlink Example</title>
   </head>

   <body>
      <p>Click following link</p>
      <a href = "https://www.finddevguides.com" target = "_self">
         <img src = "/images/logo.png" alt = "Tutorials Point" border = "0"/>
      </a>
   </body>

</html>

これにより、次の結果が生成されます。画像をクリックすると、チュートリアルポイントのホームページにアクセスできます。

これは、画像を使用してハイパーリンクを作成する最も簡単な方法でした。次に、マウスセンシティブ画像リンクを作成する方法を確認します。

マウスセンシティブ画像

HTMLおよびXHTML標準には、1つの画像内にさまざまなリンクを埋め込むことができる機能があります。画像上で利用可能なさまざまな座標に基づいて、単一の画像上にさまざまなリンクを作成できます。異なる座標に異なるリンクをアタッチすると、画像の異なる部分をクリックしてターゲットドキュメントを開くことができます。このようなマウスセンシティブ画像は、イメージマップとして知られています。

イメージマップを作成するには2つの方法があります-

サーバー側のイメージマップ-これは<img>タグの ismap 属性によって有効になり、サーバーおよび関連するイメージマップ処理アプリケーションへのアクセスが必要です。
クライアント側の画像マップ-これは、対応する<map>および<area>タグとともに、<img>タグの usemap 属性を使用して作成されます。

サーバー側の画像マップ

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

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

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

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

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

<!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>

その後、ブラウザは次の検索パラメータをWebサーバーに送信します。これは ismap.cgi スクリプトまたは* mapファイル*で処理でき、これらの座標に任意のドキュメントをリンクできます-

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

この方法で、画像の異なる座標に異なるリンクを割り当てることができ、それらの座標をクリックすると、対応するリンクされたドキュメントを開くことができます。 ismap 属性の詳細については、link：/html/using_html_ismap [Image ismap？

'_注-Perlプログラミングを学習するときに、CGIプログラミングを学習します。 PHPまたは他のスクリプトを使用して、渡された座標を処理するスクリプトを作成することもできます。とりあえず、HTMLの学習に専念しましょう。後でこのセクションをもう一度見てみましょう。_

クライアント側の画像マップ

クライアント側のイメージマップは、<img/>タグの usemap 属性によって有効になり、特別な<map>および<area>拡張タグによって定義されます。

マップを形成する画像は、通常の画像として<img/>タグを使用してページに挿入されますが、 usemap と呼ばれる追加の属性が含まれます。 usemap属性の値は、マップと画像タグをリンクするために<map>タグで使用される値です。 <map>と<area>タグは、すべての画像座標と対応するリンクを定義します。

マップタグ内の<area>タグは、画像で使用可能な各クリック可能なホットスポットの境界を定義するための形状と座標を指定します。これがイメージマップの例です-

<!DOCTYPE html>
<html>

   <head>
      <title>USEMAP Hyperlink Example</title>
   </head>

   <body>
      <p>Search and click the hotspot</p>
      <img src =/images/html.gif alt = "HTML Map" border = "0" usemap = "#html"/>
      <!-- Create  Mappings -->

      <map name = "html">
         <area shape = "circle" coords = "80,80,20"
            href = "/css/index" alt = "CSS Link" target = "_self"/>

         <area shape = "rect" coords = "5,5,40,40" alt = "jQuery Link"
            href = "/jquery/index" target = "_self"/>
      </map>
   </body>

</html>

これは、次の結果を生成します-

座標系

座標の実際の値は、問題の形状に完全に依存しています。詳細な例が続く要約を以下に示します-

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

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

Html-image-links

目次

HTML-画像リンク

例

マウスセンシティブ画像

サーバー側の画像マップ

クライアント側の画像マップ

座標系