HTML-画像リンク

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

例

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

<!DOCTYPE html>
<html>

   <head>
      <title>Image Hyperlink Example</title>
   </head>
	
   <body>
      <p>Click following link</p>
      <a href = "https://www.tutorialspoint.com" target = "_self"> 
         <img src = "/images/logo.png" alt = "Tutorials Point" border = "0"/> 
      </a>
   </body>
	
</html>

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

これは、画像を使用してハイパーリンクを作成する最も簡単な方法でした。次に、マウスに敏感な画像リンクを作成する方法を見ていきます。

マウスに敏感な画像

HTMLおよびXHTML標準は、単一の画像内に多くの異なるリンクを埋め込むことができる機能を提供します。画像で使用可能なさまざまな座標に基づいて、単一の画像にさまざまなリンクを作成できます。さまざまなリンクがさまざまな座標に添付されたら、画像のさまざまな部分をクリックして、ターゲットドキュメントを開くことができます。このようなマウスに敏感な画像は、イメージマップとして知られています。

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

Server-side image maps −これはによって有効になります ismap <img>タグの属性であり、サーバーおよび関連するイメージマップ処理アプリケーションへのアクセスが必要です。
Client-side image maps −これはで作成されます usemap <img>タグの属性、および対応する<map>タグと<area>タグ。

サーバーサイドイメージマップ

ここでは、画像をハイパーリンク内に配置して使用するだけです 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 file 好きなドキュメントをこれらの座標にリンクできます-

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

このようにして、画像のさまざまな座標にさまざまなリンクを割り当てることができ、それらの座標をクリックすると、対応するリンクされたドキュメントを開くことができます。詳細についてはismap属性、画像ismapの使い方を確認できますか？

Note− Perlプログラミングを学ぶときに、CGIプログラミングを学びます。PHPまたはその他のスクリプトを使用して、これらの渡された座標を処理するスクリプトを作成することもできます。今のところ、HTMLの学習に集中しましょう。後で、このセクションに戻ることができます。

クライアント側のイメージマップ

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

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

mapタグ内の<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.htm" alt = "CSS Link" target = "_self" />
         
         <area shape = "rect" coords = "5,5,40,40" alt = "jQuery Link" 
            href = "/jquery/index.htm" target = "_self" />
      </map>
   </body>
   
</html>

これにより、次の結果が生成されます-

座標系

座標の実際の値は、問題の形状に完全に依存します。ここに要約があり、その後に詳細な例が続きます-

rect = x₁ , y₁ , x₂ , y₂

X ₁及びY _1は、矩形の左上隅の座標です。X ₂及びY _2は、右下隅の座標です。
circle = x_c , y_c , radius

X _C及びy _Cは、円の中心の座標であり、半径は円の半径です。中心が200,50で、半径が25の円は、属性coords = "200,50,25"になります。
poly = x₁ , y₁ , x₂ , y₂ , x₃ , y₃ , ... x_n , y_n

さまざまなxyペアがポリゴンの頂点（ポイント）を定義し、あるポイントから次のポイントに「線」が描画されます。頂点が20、20、40ピクセルが最も広い点にあるひし形のポリゴンは、属性coords = "20,20,40,40,20,60,0,40"になります。

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