htmlチュートリアル

HTML Mapタグの使用

巴扎黑

Jun 27, 2017 pm 01:37 PM

html使用ラベル

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

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

HTML Mapタグの使用

<p class="content">
	<img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/007/036cb8017291b49666f84f83d250e50f-0.png"  class="lazy"   usemap="#Mapslide" alt="HTML Mapタグの使用" />
	<map name="Mapslide" id="Mapslide">
		<area shape="rect" coords="0,66,64,90" href="http://www.5itbao.cn" target="_blank" clstag="sale|keycount|8295365|1" />
	</map>
</p>

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

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

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

定義と使用法

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

ヒントと注意事項:

注:

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

注:

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

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

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

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

エリアプロパティ

プロパティ

値

説明

coords

座標値

クリック可能な領域（マウスに反応する領域）の座標を定義します。

href

URL

このゾーンのターゲット URL を定義します。

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 までご連絡ください。

HTML、CSS、およびJavaScriptの理解：初心者向けガイドApr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、

HTMLの役割：Webコンテンツの構造Apr 11, 2025 am 12:12 AM

HTMLの役割は、タグと属性を使用してWebページの構造とコンテンツを定義することです。 1。HTMLは、読みやすく理解しやすいようなタグを介してコンテンツを整理します。 2。アクセシビリティとSEOを強化するには、セマンティックタグなどを使用します。 3. HTMLコードの最適化により、Webページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。

HTMLとコード：用語を詳しく見るApr 10, 2025 am 09:28 AM

htmlisaspecifictypeofcodefocuseduructuringwebcontent

HTML、CSS、およびJavaScript：Web開発者に不可欠なツールApr 09, 2025 am 12:12 AM

HTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。

HTML、CSS、およびJavaScriptの役割：コアの責任Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

HTMLは初心者のために簡単に学ぶことができますか？Apr 07, 2025 am 12:11 AM

HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。

HTMLでの開始タグの例は何ですか？Apr 06, 2025 am 12:04 AM

Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。

CSSのフレックスボックスレイアウトを使用して、メニューの点線のラインセグメンテーション効果のセンターアラインメントを実現する方法は？Apr 05, 2025 pm 01:24 PM

メニューで点線のラインセグメンテーション効果を設計する方法は？メニューを設計するときは、通常、皿の名前と価格の間に左右に合わせることは難しくありませんが、真ん中の点線またはポイントはどうですか...

See all articles

ホットAIツール

ホットツール

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

ZendStudio 13.5.1 Mac

強力な PHP 統合開発環境

SecLists

SecLists は、セキュリティテスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティテスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティテストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジングペイロード、機密データパターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテストマシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。