マップタグパラメータの詳細な紹介と使用例

マップタグパラメータの詳細な紹介と使用例
マップ タグはペアで表示する必要があります。

<map> ....</map>

同時に、マップはエリアと組み合わせて使用​​する必要があります。

img タグ内の usermap 属性値は、map タグ内の id および name 値とまったく同じである必要があります。

area タグ: 画像のクリック領域を定義します。area はペアではなく単一のタグです。

財産:

アクセスキー ショートカットキー

alt 画像ヒントテキスト

coordsはグラフィックとクリック領域の座標を定義します

href リンクアドレス

nohrefは画像をクリックしたときに除外できる領域です。hrefがない場合はnohrefを使用する必要があります。

形状 クリック可能な領域の形状

tabindex タブキートラバーサル

ターゲットリンクターゲット

コード例:

コードをコピー
コードは次のとおりです。

<img src="images/logo.gif" usermap="#map"/>
<マップ id="マップ" 名前="マップ">
<area shape="rect" coords="a,b,c,d" target="_blank" href=""/>
<!-- a、b、c、d はそれぞれ四角形の左上隅と右下隅の座標値です!>
<area shape="circle" coords="a,b" target="_blank" href="" />
<!-- a、bは円の中心の座標値です!>
<area shape="poly" coords="a,b..." target="_blank" href="" />
<!-- a、b はポリゴンの各固定点の座標値です!>
</マップ>

<<:  MySQL 数十億のデータのインポート、エクスポート、移行に関するメモ

>>:  IDEA が Docker を統合してリモート展開を実現するための詳細な手順

推薦する

Tomcat が設定ファイルを外部に配置するためのソリューション

質問通常の開発では、プロジェクトを Tomcat にデプロイする場合、プロジェクトを war パッケ...

HTML のメタタグの簡単な比較

メタ タグは、ファイル情報を定義し、検索エンジンによる検索を容易にするために Web ページ ファイ...

CentOS8でのnmcliの使い方の詳しい説明

RHEL8/CentOS8 に基づく一般的な nmcli コマンド # IP を表示する (ifco...

Ubuntu 上の Apache で SSL (https 証明書) を設定する正しい方法の詳細な説明

まず、Alibaba Cloud の公式チュートリアルをご覧ください。ファイルの説明: 1. 証明書...

vue3.2 で追加された defineCustomElement の基本原理の詳細な説明

目次Webコンポーネントカスタム要素概要HTMLTemplateElement コンテンツ テンプレ...

BootStrap グリッド間に隙間を残す解決策

目次[例を見る]: 【本来の効果は以下の通り】理由は次のとおりです。 【解決】:要約するBootSt...

Linux のさまざまなロックメカニズムの使用方法と違いについて詳しく説明します

序文:この知識を理解する必要がある人は、すでにプロセス間通信とスレッド間通信の基本的な理解を持ってい...

aタグ疑似クラスの機能と記述順序は何ですか?

a タグ疑似クラスの役割: 「:link」: 訪問されていないタグの状態。 「:visited」: ...

divの背景を透明に設定する方法の例

div の背景を透明にする一般的な方法は 2 つあります。 1. 不透明度属性を 0 ~ 1 の値に...

CSS の位​​置属性 (absolute|relative|static|fixed) の概要と応用

まず、CSS3 Api の position 属性の定義を見てみましょう。 static: 特別な配...

ラベルタグの使用時に発生する問題の分析と解決策

最近何かをするときにラベル タグを使用しました。以前はラベル タグをほとんど使用していなかったため、...

ディスク容量不足による MySQL レプリケーション障害の解決方法

目次ケースシナリオ問題を解決するまとめケースシナリオ本日、オンラインで問題が発見されました。監視範囲...

Linux rpm および yum コマンドとその使用法の詳細な説明

RPM パッケージ管理インターネット ダウンロード パッケージのパッケージ化およびインストール ツー...

MySQL 5.7.18 インストールチュートリアルと問題の概要

MySQL 5.7.18 のインストールと問題の概要。今日、新しい MySQL サーバーを導入しまし...

VMWare で Ubuntu を再起動した後、インターネットにアクセスできなくなる問題の解決方法

VMWareでUbuntuを再起動した後、インターネットにアクセスできなくなる問題を解決するには、次...