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

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

<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 を統合してリモート展開を実現するための詳細な手順

推薦する

仮想マシン VMware に Kali Linux をインストールする最新の超詳細なグラフィック チュートリアル

目次1. システムイメージファイルをダウンロードする2. 新しい仮想マシンを作成する3. Kali ...

JDカルーセル効果を実現するための純粋なHTMLとCSS

JD カルーセルは、動的な効果を追加せず、主に位置決めの知識を使用して、純粋な HTML と CS...

WeChatアプレットシングルページアプリケーションルーティングを徹底的に理解するための10分

シングルページアプリケーションの特徴「前提:」Web ページには、クリックするとサイト内の他のページ...

MySQLのインデックス

序文早速本題に入りましょう。これからお話しするのは次のマインドマップです。まずは印象をつかんでくださ...

すべてのブラウザとの完全な互換性を実現するために最適なプリセットを選択してください

各ブラウザの select タグのプロパティと各ブラウザのサポートが多少異なるため、各ブラウザでの選...

VMware仮想マシンにLinux(CentOS)をインストールするための詳細な構成手順

CentOS7をダウンロード私がダウンロードしたイメージはCentOS-7-x86_64-DVD-1...

HTMLページ作成に関する私の経験の簡単な要約

Word of Mouth に入社して 3 ~ 4 か月が経ちました。仕事の中で一番の収穫は、ビジュ...

JS でシングルトン モードを実装するための 6 つのソリューションの概要

序文今日は、デザインパターンのクリエーションパターンを見直していたところ、JS でシングルトンパター...

WeChatミニプログラムでトークンの有効期限を処理する方法

目次まず結論から質問解決Promiseを使用してコールバック関数をカプセル化する要約するまず結論から...

CSS flex 複数列レイアウト

基本的な3列レイアウト 。容器{ ディスプレイ: フレックス; 幅: 500ピクセル; 高さ: 20...

スネークゲームを作るための Pygame コード

目次使用されるPygame関数スクリーンの作成ヘビの作成ヘビを動かすゲームオーバーの処理食事を増やす...

Centos6 で 20TB を超えるディスクをパーティション分割してフォーマットするためのサンプル コード

1. サーバー環境の構成: 1. ディスクパーティションを確認します。最近、あるプロジェクト内のサー...

Linux サーバーが処理できる接続数をご存知ですか?

序文まず、TCP 接続を識別する方法を見てみましょう。システムは、(src_ip、src_port、...

CSS 3.0 テキストホバージャンプ特殊効果コード

これは、CSS 3.0 で実装されたテキストのホバーとジャンプ効果です。効果は次のとおりです。 以下...

反応自動構築ルーティングの実装

目次順序1. 集中ルーティング2. ファイルディレクトリ3. CompileRouterを作成する4...