HTMLマップタグとは何ですか? htmlマップタグの構造と具体的な使い方を詳しく解説

HTMLマップタグとは何ですか? HTMLマップタグの構造と具体的な使い方は何ですか?次の記事では、html マップ タグの意味と属性の説明、および html マップ タグの具体的な使用方法を主に説明します。

まず、HTML マップ タグとは何かを見てみましょう:

html マップ タグ: クライアント側の画像マッピングを定義します。イメージマップとは、クリック可能な領域のある画像を指します。

マップの定義:

<map id="im_map" name="im_map">
<area shape="rect" coords="0,0,100,100" href="url.html" />
</map>

map タグはマップを定義し、area タグはクリック可能なホットスポット、エリア属性を定義します。

shape: ホットスポットの形状、オプションのパラメーター rect (長方形)、circle (円)、poligon (カスタム形状) を定義します。

座標: 形状パスを定義します。

shape=rect の場合、4 つの数値は次のとおりです: 始点 X、始点 Y、終点 X、終点 Y

shape=circle の場合、3 つの数値は次のとおりです: X 、中心点 Y、半径

shape=poligon の場合、開始点 X、開始点 Y、パス 1X、パス 1Y、パス 2X、パス 2Y...

href の順で複数のパス点を定義できます。クリックしてジャンプするアドレス。

html マップタグの必須属性:

id: unique_name: マップタグの一意の名前を定義します。

HTMLマップタグのオプションの属性:

name:mapname:image-mapに指定された名前。

HTMLのmapタグの構造:

1.対応する座標を変更する必要はなく、JSで比率を変更するだけでOKです。

<div class="map_img">
     <img class="mapImg" usemap="mapName" src="isphoto/abc.png" alt="" style="width: 450px">
     <map name="mapName">
        <!-- 方形区域写法 -->
        <!-- <area shape="rect" coords="605,250,660,305" target="_blank" href ="javascript:alert(1);" alt=""/> -->
         <area shape="circle" coords="633,276,28" target="_blank" href ="javascript:alert(&#39;汽车图标&#39;);" alt=""/>
    </map>
</div>

2. 複数のピクチャがある場合、1 つのピクチャは 1 つのマップに対応し、マップの名前の値と対応する usemap の値を変更するだけで済みます。 name=usemap これらは CP のペアなので、分離せずに同じ値を与えます。

<div class="map_img">
    <img class="mapImg" usemap="mapName" src="isphoto/abc.png" alt="" style="width: 450px">
    <map name="mapName">
         <area shape="circle" coords="633,276,28" target="_blank" href ="javascript:alert(&#39;汽车图标&#39;);" alt=""/>
     </map>
    <!-- 一张图片对应一个name和usemap -->
    <img class="mapImg" usemap="mapName2" src="isphoto/abc.png" alt="" style="width: 450px">
     <map name="mapName2">
         <area shape="circle" coords="633,276,28" target="_blank" href ="javascript:alert(&#39;第二张图的汽车图标&#39;);" alt=""/>
     </map>
</div>

html

使い方は以下の通りです:

<img src ="planets.gif" alt="无法显示此图像" usemap ="#planetmap" />
<map id ="planetmap" name="planetmap">
<area shape ="rect" coords ="0,0,82,126" href ="sun.htm" alt="Sun" />
<area shape ="circle" coords ="90,58,3" href ="mercur.htm" alt="Mercury" />
<area shape ="circle" coords ="124,58,8" href ="venus.htm" alt="Venus" />
</map>

usemap属性は属性はエリア形状を定義し、coords属性は始点座標と終点座標を定義します。リンクエリアの

注: エリア要素は常にマップ要素内にネストされます。 area 要素は、イメージ マップ内のエリアを定義します。

注: の usemap 属性は

【関連おすすめ】

HTML5のタグの意味は何ですか？ HTML5タグの基本的な使い方を詳しく解説

html textareaとはどういう意味ですか？ textareaタグで改行とスペースを取得するにはどうすればよいですか?

以上がHTMLマップタグとは何ですか? htmlマップタグの構造と具体的な使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。