ホームページ >ウェブフロントエンド >CSSチュートリアル >マップタグとエリアタグの使い方
マップタグとエリアタグの使い方
- php中世界最好的语言オリジナル
- 2018-03-19 09:20:112990ブラウズ
今回は、マップタグとエリアタグの使い方と、マップタグとエリアタグに関する注意点について説明します。実際の事例を見てみましょう。
map タグの目的: は img タグ にバインドされており、クライアント画像の特定の領域に特別な意味を与えるためによく使用されます。この領域をクリックすると、新しいドキュメントにジャンプします。 。
map タグは img タグにバインドされているため、img タグの usemap 属性 が、 map タグ (ブラウザによっては、usemap 属性が 2 つの値のいずれかを受け取るため、通常、name 属性と id 属性の両方に同じ値が書き込まれます) がエリア タグとともに使用されます。 サンプルコードは次のとおりです:
<!doctype html> <html> <head></head> <body> <img src="http://s2.sinaimg.cn/middle/69906822ga1e24ba6e971&690" width="444" height="395" alt="中国地图" usemap="#province"/> <map name="province" id="province"> <area shape="rect" coords="80,112,110,125" alt="新疆" href="https://baike.baidu.com/item/%E6%96%B0%E7%96%86/132263?fr=aladdin"> <area shape="rect" coords="77,209,110,229" alt="西藏" href="https://baike.baidu.com/item/%E8%A5%BF%E8%97%8F/130045"> <area shape="rect" coords="150,176,185,192" alt="青海" href="https://baike.baidu.com/item/%E9%9D%92%E6%B5%B7/31638"> <area shape="rect" coords="197,236,235,261" alt="四川" href="https://baike.baidu.com/item/%E5%9B%9B%E5%B7%9D/212569"> <area shape="rect" coords="170,300,211,325" alt="云南" href="https://baike.baidu.com/item/%E4%BA%91%E5%8D%97/206207"> <area shape="circle" coords="227,200,8" alt="甘肃" href="https://baike.baidu.com/item/%E7%94%98%E8%82%83"> <area shape="circle" coords="240,177,5" alt="宁夏" href="https://baike.baidu.com/item/%E7%94%98%E8%82%83"> <area shape="circle" coords="285,133,8" alt="内蒙古" href="https://baike.baidu.com/item/%E7%94%98%E8%82%83"> </map> </body> </html>表示効果は次のとおりです:
これが単なる
である場合、非常に見栄えがします。単調なのでパスします。マップ タグは各省の地域に意味を与えます。ここでは、以下に示すように、新疆地域をクリックして、新疆の百度百科事典にジャンプします。一つ一つ調べるよりも、各州の歴史や文化を理解したほうが人間的だと思います。 area タグは、特別な意味が与えられる画像内の領域を定義します。その主な値は、alt、cooreds、href、shape、target などです。
1。 定義: 指定された領域のテキストの置換。 
注: href 属性を記述する場合は、alt 属性が必須です
2. Cooreds 属性
定義: 該当する領域の座標を定義します
注: 組み合わせて使用されます形状属性を使用した
(1) 形状属性がrectの場合、関連する領域が長方形であることを意味し、その場合、cooreds属性値は(x1, y1, x2, y2)になります。ここで、x1, y1は左上隅の座標、右下隅の座標がx2、y2 (2) 形状属性が円の場合、当該領域が円であることを意味し、座標属性値は (x, y, radius)、x, y は円の中心座標、radius は円の半径です
(3) 形状属性がポリゴンの場合、該当する領域がポリゴン。cooreds 属性値は (x1, y1, x2, y2, x3, y3...xn ,yn) で、ポリゴンの各頂点の座標を指定します。ブラウザはポリゴン、つまり尾部を自動的に閉じます。座標は最初の座標と同じである必要はありません。
3. href 属性
定義: 該当領域に接続するターゲットを定義します
説明: href 属性には通常 3 つの値があります
(1) 絶対パス: 通常使用されます(href="https://www.baidu.com") のような他の Web サイトを指すため(2) 相対パス: 通常、(href="// など) 自分の Web サイト内のファイルを指すために使用されます。 favicon.ico")
(3) アンカーリンク: 通常、(href="#header") のようにページ内のアンカーを指すために使用されます
4. シェイプ属性
定義: 関連する領域の形状を定義します
説明: (1) デフォルト: すべての領域を指定します
(2) rect: 該当領域を長方形に指定
(3)circle: 該当領域を円に指定
(4) Poly: 該当領域を円に指定多角形
5.target 属性
定義: ターゲットリンクを開く場所を定義します
説明: (1) _blank: リンクされたドキュメントを新しいウィンドウで開きます
(2) _self:デフォルト、同じフレーム内 リンクされたドキュメントを開きます
(3)_parent: リンクされたドキュメントを親フレームセットで開きます
(4) _top: リンクされたドキュメントをウィンドウ全体で開きます
( 5) フレーム名: in 指定されたフレームでリンクされたドキュメントを開きます
注: a タグは a タグを直接ネストできないため、a タグの代わりに area タグを使用できる場合があります。これを使用する必要がある場合は、レイアウトを簡素化するために a タグを area タグに置き換えることができます。
この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。
推奨読書:
jest がネイティブ コンポーネントに反応するための手順は何ですか? js のカスタム トリム関数を使用する方法
以上がマップタグとエリアタグの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。