目次
HTML DOM Area オブジェクト
Area オブジェクト
エリアオブジェクトのプロパティ
標準プロパティ

HTML Mapタグの使用

Jun 27, 2017 pm 01:37 PM
html 使用 ラベル

今日JD.comでマーケティングキャンペーンを見かけました。左側のfloatingnavigationがHTMLのmapタグを使って書かれていたので、それを記録するためにこの記事を思いつきました。

上の写真は、その中の主な家電製品を直接示しています

HTML Mapタグの使用

<p>
	<img  src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/007/036cb8017291b49666f84f83d250e50f-0.png" class="lazy" map alt="HTML Mapタグの使用" >
	<map>
		<area>
	</map>
</p>
ログイン後にコピー

ちなみに、いくつかの関連情報を抜粋しました:

HTML クリック可能な領域のある画像マッピング。

すべての主要なブラウザは タグをサポートしています。

定義と使用法

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

ヒントと注意事項:

注:

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

注:

HTML Mapタグの使用 の usemap 属性 は、

の id または name 属性を参照できるため、id と name の両方を に追加する必要があります。属性。

HTMLとXHTMLの違い HTMLでは、には終了タグがありません。

XHTML では、 を正しく閉じる必要があります。

エリアプロパティ

プロパティ 説明
coords 座標値 クリック可能な領域(マウスに反応する領域)の座標を定義します。
href URL このゾーンのターゲット URL を定義します。
nohref nohref 画像マップから領域を除外します。領域の形状を定義します。
target
  • _blank

  • _parent

  • _self

  • _top

は、href属性を開く場所を指定します
を意味します


HTML DOM Area オブジェクト


Area オブジェクト

Area オブジェクトは、HTML ドキュメント内の画像マッピングの領域を表します (画像マッピングとは、クリック可能な領域を持つ画像を指します)

タグが出現するたびに、Area オブジェクトが作成されます。


エリアオブジェクトのプロパティ

Property Description
accessKey エリアにアクセスするためのショートカットキーを設定または返します。
alt ブラウザが特定の領域を表示できない場合に、代替テキストを設定または返します。
coords イメージマップ内のクリック可能な領域の座標を設定または返します。
hash リージョン内の URL のアンカー部分を設定または返します。
host 特定のゾーンの URL のホスト名とポートを設定または返します。
href イメージマップ内のリンクの URL を設定または返します。
id 特定のエリアのIDを設定または返します。
noHref 領域をアクティブにするか非アクティブにするかを設定または返します。
pathname ゾーン内の URL のパス名を設定または返します。
protocol 特定のゾーンの URL のプロトコルを設定または返します。
search 特定の領域の URL のクエリ string 部分を設定または返します。
shape イメージマップ内の領域の形状を設定または返します。
tabIndex 特定の領域のタブキー制御順序を設定または返します。
target ゾーン内のリンク URL を開く場所を設定または返します。


標準プロパティ

Property Description
className 要素のクラス属性を設定または返します。
dir テキストの方向を設定または返します。
lang 要素の言語コードを設定または返します。
title 要素のタイトルを設定または返します。

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

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

HTMLの表の境界線 HTMLの表の境界線 Sep 04, 2024 pm 04:49 PM

HTML の表の境界線に関するガイド。ここでは、HTML でのテーブルの境界線の例を示しながら、テーブル境界線を定義する複数の方法について説明します。

HTML のネストされたテーブル HTML のネストされたテーブル Sep 04, 2024 pm 04:49 PM

これは、HTML でのネストされたテーブルのガイドです。ここでは、テーブル内にテーブルを作成する方法をそれぞれの例とともに説明します。

HTML 左マージン HTML 左マージン Sep 04, 2024 pm 04:48 PM

HTML マージン左のガイド。ここでは、HTML margin-left の概要とその例、およびそのコード実装について説明します。

HTML テーブルのレイアウト HTML テーブルのレイアウト Sep 04, 2024 pm 04:54 PM

HTML テーブル レイアウトのガイド。ここでは、HTML テーブル レイアウトの値と例および出力について詳しく説明します。

HTML入力プレースホルダー HTML入力プレースホルダー Sep 04, 2024 pm 04:54 PM

HTML 入力プレースホルダーのガイド。ここでは、コードと出力とともに HTML 入力プレースホルダーの例について説明します。

HTML 順序付きリスト HTML 順序付きリスト Sep 04, 2024 pm 04:43 PM

HTML 順序付きリストのガイド。ここでは、HTML 順序付きリストと型の導入とその例についても説明します。

HTML 内のテキストの移動 HTML 内のテキストの移動 Sep 04, 2024 pm 04:45 PM

HTML でのテキストの移動に関するガイド。ここでは、概要、マーキー タグが構文でどのように機能するか、および実装例について説明します。

HTML の onclick ボタン HTML の onclick ボタン Sep 04, 2024 pm 04:49 PM

HTML オンクリック ボタンのガイド。ここでは、それらの紹介、動作、例、およびさまざまなイベントでの onclick イベントについてそれぞれ説明します。

See all articles