マップタグとエリアタグの使い方-CSSチュートリアル-php.cn

マップタグとエリアタグの使い方

php中世界最好的语言

リリース： 2018-03-19 09:20:11

オリジナル

2929 人が閲覧しました

今回は、マップタグとエリアタグの使い方と、マップタグとエリアタグに関する注意点について説明します。実際の事例を見てみましょう。

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: 該当領域を円に指定