ホームページ > 記事 > ウェブフロントエンド > 画像ホットスポットと画像マッピング_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,... です) 🎝
不規則多角形