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 インデックスの設計と最適化の方法

推薦する

CSS フォントの新しい使い方: カラーフォントの実装

デザイナーが特別なイベントのタイトルフォントとして以下のフォントを使用したい場合はどうすればよいでし...

Vue は better-scroll を使用して水平スクロール方法の例を実現します

1. スクロールの実装原理better-scroll のスクロール原理は、ブラウザのネイティブスクロ...

VMware vSAN 入門概要

1. 背景1. vSphere の共有ストレージの背景を簡単に紹介するvSphere の重要な機能は...

実用的なクイックスタートReactルーティング開発

インストールインストールするには、次のコマンドを入力します。 // ネプ npm で react-r...

MySQLトランザクションとSpring分離レベルの実装原理の詳細な説明

1. トランザクションはACID特性を持つ原子性: トランザクションは、トランザクションによって分割...

nginxを使用して取得したIPアドレスが127.0.0.1である問題を解決する

IPツールを取得 lombok.extern.slf4j.Slf4j をインポートします。 org....

JavaScript の数値および数学オブジェクトの概要

目次1. JavaScript における数値2. Javascript の Math オブジェクト1...

docker compose の記述ルールについての簡単な説明

この記事ではクラスタの展開に関連する内容は紹介しませんバージョン制約Docker エンジン >...

ウェブページのメモリ使用量とCPU使用量を削減する方法

一部の Web ページは大きく見えなくても開くのに非常に時間がかかる場合があります。一方、他の We...

WeChatアプレットでのwxsファイルの素晴らしい使い方をいくつか紹介します

目次序文応用フィルタードラッグファイル間での参照の受け渡しwxsはjsロジック層にパラメータを渡しま...

CSS のオーバーフロー:hidden エラーの解決方法

失敗の原因今日、カルーセルを書いていたときに、overflow;hidden; が失敗する可能性があ...

複数のdiv内のテーブルのtdwidth設定は同じで、揃えることができません

最近、複数のdivにあるテーブルのTDを同じ幅に調整しても、揃えることができず、幅にパターンがないこ...

MySQL データベースのホットスタンバイにおける問題点の分析

以前、MySQL データベースのデュアルマシン ホット スタンバイの設定方法を紹介しました。ご興味の...

LinuxにNginxをインストールする正しい手順

序文私のように、Java バックエンドに勤勉な人であれば、多数のプロジェクト機能を実装することに加え...