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

推薦する

Linux CentOS 7.4 で mysql5.7.20 のパスワードを変更する方法

MySQL がバージョン 5.7 にアップグレードされた後、セキュリティが大幅に向上しました。しかし...

MySQLの日付加算と減算関数の詳細な説明

1. 追加時間()指定した秒数を日付に追加する select addtime(now(),1); -...

ビューポートの基本原理と詳細な使用方法

1. ビューポートの概要モバイル ブラウザは通常、画面よりも幅の広い仮想ウィンドウにページをレンダリ...

CSS で縦書きテキスト配置を実装する方法 (概要)

HTML でのテキストのデフォルトの配置は水平ですが、特殊な場合にはテキストを垂直に配置する必要が...

CentOS7にMySQL 8.0.26をインストールする手順

1. まず、お使いのマシンに応じて、MySQL 公式サイトから対応するデータベースをダウンロードしま...

Centos に PHP7.4 と Nginx をインストールする方法

準備する1. 必要なインストールパッケージをダウンロードするhttps://www.php.net/...

MySQL 5.7.18 のインストール中に MySQL サービスの起動に失敗する問題の解決策

MySQL は非常に強力なリレーショナル データベースです。しかし、初心者の中には、インストールや設...

MySQL pt-slave-restart ツールの使い方の紹介

目次MySQL マスター スレーブ レプリケーション環境を設定する場合、マスター データベースとスレ...

Docker インストール rocketMQ チュートリアル (最も詳細)

RocketMQ は、Alibaba が設計した分散型のキューベースのメッセージング ミドルウェア...

MySQLデータベースを別のマシンに移行する方法の詳細な説明

1. まず、移行サーバー上のデータ ファイルを見つけます。MySQL 5.7 とデフォルトのインスト...

MySQLプロセスを安全かつ適切にシャットダウンする方法

序文この記事では、mysqld プロセスをシャットダウンするプロセスと、MySQL インスタンスを安...

HTML でよく使用されるエスケープ文字の概要

HTML でよく使用されるエスケープ文字をまとめると次のようになります。 &nbsp; 改行...

JavaScriptオブジェクトをマージするさまざまな方法の詳細な説明

目次オブジェクトをマージするさまざまな方法(インターフェースを通じてデータを取得し、それをローカル ...

MySQL 5.7 のインストールと設定の詳細な手順

1. MySQLをダウンロードする1. MySQLの公式ウェブサイトにログインし、64ビットシステム...

MySQLデータベースエンジンをInnoDBに変更する

PS: ここではPHPStudy2016を使用しています1. 変更中にMySQLを停止する2. my...