img usemap 属性 中国地図リンク

img usemap 属性 中国地図リンク
HTML img タグ: Web ページに導入される画像を定義します。興味深い usemap 属性もあります。
51dituのホームページを見ると、真ん中に中国の地図がある地図があります。右クリックしてダウンロードすると、普通の画像であることがわかります。
しかし、地図上の州をクリックすると、さまざまなイベントがトリガーされる(またはさまざまなリンクが開く)ので、非常に興味深いです。 usemap属性が使用されていることがわかります。
もちろん、マップ タグを定義する必要があります。コード全体は次のようになります。



ヒント: 実行前にコードの一部を変更することができます

マップ タグ内のエリア タグのいくつかの属性の意味については、http://www.w3school.com.cn/tags/tag_area.asp を参照してください。

ここでも、エリアの形状属性に注目してください。オプションは、長方形、円、多角形です。 coords 属性には特に注意してください。この属性は shape と組み合わせて使用​​する必要があります。画像の左上隅の座標は「0,0」です。

<<:  dockerにmysqlをインストールした後にNavicatが接続できない問題に対する完璧な解決策

>>:  MySQL インデックスの設計と最適化の方法

推薦する

js データ型とその判定方法の例

js データ型基本データ型: 数値、文字列、ブール値、未定義、null、シンボル、参照データ型: オ...

Webpackプラグインを書いてnpmに公開するための80行のコード

1. はじめに最近、 Webpackの原理を勉強しています。これまでは Webpack の設定方法し...

Linux での tcpdump コマンドの詳細な分析と使用方法

導入簡単に言えば、tcpdump は、ネットワーク上のトラフィックをダンプし、ユーザーの定義に従って...

MySQL データベースの大文字と小文字の区別の問題

MySQL では、データベースはデータ ディレクトリ内のディレクトリに対応します。データベース内の各...

Vue グローバル フィルターの概念、注意事項、基本的な使用方法

目次1. フィルターの概念1. グローバルフィルターのフォーマットをカスタマイズする2. フィルター...

HTML 名 ID とクラスの違い_PowerNode Java アカデミー

名前タグの名前を指定します。形式 <input type="text" n...

MySQL の全体的なアーキテクチャの紹介

MySQL の全体的なアーキテクチャは、サーバー層とストレージ エンジン層に分かれています。サーバー...

HTMLテーブルタグの詳しい解説(初心者向け)

表> <TR> <TD> <TH> <キャプション&...

Docker ケース分析: MySQL データベース サービスの構築

目次1 設定ディレクトリとデータディレクトリを作成する3 イメージからホストに構成ファイルをコピーす...

Vue+EChartsは、中国の地図の描画と省の自動回転と強調表示を実現します。

目次成果を達成する完全なコード + 詳細なコメントまとめ成果を達成する完全なコード + 詳細なコメン...

mysql5.7.19 解凍版の詳細なインストール チュートリアル (純粋なクラックされた中国語版 SQLYog を使用)

Mysql5.7.19バージョンは今年リリースされた新しいバージョンです。最近のMySQLのバージ...

IE8 開発者ツール メニューの説明

<br />この記事では、開発者ツールのさまざまなメニューについて簡単に説明しました。こ...

vue_drf は SMS 認証コードを実装します

目次1. 需要1. 需要2. SDKパラメータ設定1. ディレクトリ構造3. コードの実装1. バッ...

MySql バージョンの問題に対する完璧なソリューション sql_mode=only_full_group_by

1. sql_modeを確認する @@sql_mode を選択照会された値は次のとおりです。 ON...

MySQLのロックについて理解しておくべきこと

1. はじめにMySQL ロックは、その範囲に応じて、グローバル ロック、テーブル ロック、行ロック...