コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > HTMLエリアタグの使い方

HTMLエリアタグの使い方

藏色散人
リリース： 2019-05-25 13:41:56
オリジナル
3126 人が閲覧しました

html area タグは、クリック可能な領域を含む画像のマッピングに使用されます。area 要素は常に タグ内にネストされます。 タグの usemap 属性は、map 要素の name 属性に関連付けられ、画像とマッピングの間に接続が作成されます。

HTMLエリアタグの使い方

#html エリアタグの使い方は？

機能: クリック可能領域を含む画像マッピング

説明:

## の usemap 属性を参照できます< ID または名前;map> の属性 (ブラウザによって決定される) なので、id 属性と name 属性の両方を同時に に追加する必要があります。

注:

タグは、イメージ マップ内の領域を定義します (注: イメージ マップは、クリック可能な領域のある画像を指します)。 area 要素は常に タグ内にネストされます。 タグの usemap 属性は、マップ要素の name 属性に関連付けられ、画像とマップの間にリンクが作成されます。

html エリアタグの例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img src="http://www.php.cn/tpl/Index/Static/img/banner7.jpg" border="0" usemap="#studymap" alt="study" />
<map name="studymap" id="studymap">
    <area shape="circle" coords="180,139,14" href ="http://www.php.cn"  />
    <area shape="circle" coords="129,161,10" href ="http://www.php.cn"  />
    <area shape="rect" coords="0,0,110,260" href ="http://www.php.cn"  />
</map>
</body>
</html>
ログイン後にコピー

以上がHTMLエリアタグの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
html area标签
ソース：php.cn
前の記事：HTMLアプレットタグの使い方 次の記事：ブートストラップをダウンロードする方法
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
SQL Count() にも 0 が必要です テーブルが 1 つだけあり、0 で始まるタグの各エントリをカウントしたいと考えています。今度はこれを試します: SELECT tag,COUNT(start)ASAnzahl,us...
から 2024-04-06 19:48:53
0
1
449
CSS スタイルがサイトに適用されない Bootstrap5を使用してWebサイトを作成していますが、index.cssプロパティがindex.htmlに適用されません。サービス カードの上にマウスを移動すると、背景が変...
から 2024-04-06 17:12:23
0
1
336
hr タグが単色白に設定されているのに半透明になるのはなぜですか? HTML（ブートストラップ付き）とCSSがあり、HTMLにはクラスを持つ<hr>タグがあり、CSSにはその境界線スタイルがあります。半透明で白い色は見えますが、「固体」...
から 2024-04-06 16:13:26
0
1
500
ベンダー固有の疑似要素上の JavaScript ホバー イベント 次の htmlinput タグがあります。 $("input[type='range']::-webkit-slider-thumb").on('hover',...
から 2024-04-06 15:35:24
0
1
274
ページのメインディスプレイに画像を表示するにはどうすればよいですか? 私がやりたいのは、NASAAPI を使用して写真を受信することです。これらの写真は、マイページのサムネイルとメインディスプレイに表示されます。コードがサムネイルから画像を取得してペ...
から 2024-04-06 15:33:12
0
1
433
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート