IMG での UserMap の使用例

IMG での UserMap の使用例
usemap は <img> タグの属性であり、使用するイメージ マップの名前を指定するために使用されます。

#Map セクションの Map は、<map> タグで定義されたイメージ マップです。その name 属性は Map であり、次のように定義されています。

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

<map name="マップ">
<area shape=rect 座標="100,100,200,200" href="test1.html">
<area shape=rect 座標="200,100,300,200" href="test2.html">
...
</マップ>

使用する場合:

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

<img src="test.gif" usemap="#マップ">

イメージマップは、画像を複数の領域に分割します。異なる領域をクリックすると、異なるページに移動します。

クライアント イメージを作成するには、次のように新しい属性 USEMAP を追加する必要があります。

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

<IMG SRC="map_name.gif" USEMAP="#section_name">

USEMAP 属性 (イメージの使用) はブロック スタイルのハイパーリンクを受け入れるため、イメージ定義情報を同じ HTML ファイルに保存できます。

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

<IMG src="Images/index-top.jpg" border="0" usemap="#Map" id="IMG1" onclick="return IMG1_onclick()">
<MAP name="マップ">
<AREA 形状="rect" 座標="224,95,307,125" href="default.aspx">
<AREA shape="rect" coords="326,96,407,123" href="Cart.aspx">
<AREA shape="rect" coords="426,96,503,125" href="MemberShip/UserLogin.aspx">
<AREA shape="rect" coords="525,96,609,125" href="Admin/default.aspx">
</MAP>

<<:  WeChat アプレット uniapp は左スワイプによる削除効果を実現します (完全なコード)

>>:  Dockerの核となる原則であるCgroupの詳細な説明

推薦する

Linux で Nginx ロード バランシングを使用して複数の Tomcat を構成する方法

Linux に nginx と複数の tomcat をインストールする方法はここでは紹介しません。不...

React+Koa によるファイルアップロードの実装例

目次背景サーバーの依存関係バックエンド構成クロスドメインバックエンド構成の静的リソースアクセスではk...

mysql MDLメタデータロックの詳細な分析

序文: MySQL で SQL 文を実行すると、予想した時間内に文が完了しません。このような場合、通...

IE ラベル LI テキスト折り返し問題について

私は長い間この問題に悩まされていましたが、検索してみたところ、実際にこの問題を解決した人がいることが...

MySQL 8.0.15 インストール グラフィック チュートリアルとデータベースの基礎

MySQLソフトウェアのインストールとデータベースの基礎は参考用です。具体的な内容は次のとおりです。...

Docker-compose インストール db2 データベース操作

db2 データベースをホストマシンに直接インストールするのは面倒で、ユーザーや権限を巻き込むのも不便...

MySQLのインデックスシステムがB+ツリーを使用する理由の分析

目次1. インデックスとは何ですか? 2. インデックスはなぜ必要なのでしょうか? 3. インデック...

ドラッグフォトウォールを実現するネイティブJS

この記事では、ネイティブ JS で実装されたドラッグ可能な写真ウォールを紹介します。効果は次のとおり...

Tomcat サーバーの応答が遅い場合の解決策

1. 分析的思考1. 機械自身の理由を排除する2. サーバーパフォーマンス分析3. プロジェクト自体...

MySQLカスタム変数の概念と特徴

MySQL カスタム値は、値を保存するための一時的なコンテナです。サーバーへの接続がアクティブである...

SQL における参照整合性の詳細な説明 (1 対 1、1 対多、多対多)

1. 参照整合性参照整合性とは、主に外部キー制約を使用した複数のテーブル間の設計を指します。複数テ...

div画像マーキーシームレス接続実装コード

コードをコピーコードは次のとおりです。 <html> <ヘッド> <ス...

Jsonフォーマットの詳細な説明

目次JSON は次の 2 つの構造に基づいて構築されます。 2. JSON形式1. オブジェクト2....

LAMP ソースコードを使用したエンタープライズレベルのインストールチュートリアル

目次LAMPアーキテクチャ1.ランプの紹介2. WebサービスワークフローWebサーバーのリソースは...

OpenLayers 3 のベクターマップソースの読み込みの問題を解決する

1. ベクターマップベクター グラフィックスは直線と曲線を使用してグラフィックスを表します。これらの...