画像ホットスポットと画像マッピング_html/css_WEB-ITnose

画像マッピング

画像マッピングは画像ホットスポットとも呼ばれます。

機能:

同じ画像上の異なる領域に複数の異なるハイパーリンク機能を実現させます。

イラスト:

イメージマッピングの実装には、次の 3 つの側面の連携が必要です:

1. イメージマッピングコンテナーは img タグであり、以下を使用する必要があります。 usemap 属性 マップ タグとの接続を確立します

2. 画像マッピングはマップ タグであり、マップ タグとの接続を確立するには name 属性を使用する必要があります

3. ホットスポット エリアを使用する必要があります。 -tag ホットスポットエリアを確立するマップタグのエリア

構文形式:

< ;map name="マップ">

<エリアshape="ホットスポットの形状" coords="座標" href="リンク" alt="代替テキスト" />

属性の概要:

使用する必須属性:

usemap: #map name

Name: ホットの名前を設定しますスポットエリア

共通属性:

shape: ホットスポットエリアの形状を設定します

rect (長方形)、

circle (円)、

polygon (多角形)

coords: ホットスポットエリアの位置座標は変化します形状に応じて。

長方形の場合、座標は (x1, y1, x2, y2)、(x1, y1) は長方形の左上隅、(x2, y2) は右下隅です

円の場合、座標は (x , y, r), (x , y) 円の中心座標、r は半径です

多角形の場合、座標は (x1, y1, x2, y2,... です) 🎝