ウェブ画像のホットリンクと座標値を設定するサンプルコード

ウェブ画像のホットリンクと座標値を設定するサンプルコード

時には、画像上に複数の領域を設定する必要があります。マウスで画像のさまざまな領域をクリックしてさまざまなページに移動したり、画像の特定の領域をクリックして特定のページに移動したりできます。これが Web ページのホット リンクです。

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

<img src="test.jpg" usemap="#testmap" alt="テスト" />
<マップ名="テストマップ" id="テストマップ">
<area shape="circle" coords="180,139,14" href="test1.html" alt="test1" />
<area shape="circle" coords="129,161,10" href="test2.html" alt="test2" />
<area shape="rect" coords="0,0,110,260" href="test3.html" alt="test3" />
</マップ>

注: <img> の usemap 属性は、<map> の id 属性または name 属性のいずれかを参照できます (ブラウザによって決定されます)。そのため、<map> に id 属性と name 属性の両方を追加する必要があります。

では、この座標値を取得するにはどうすればよいでしょうか?

方法 1: 新しい HTML ページを作成し、本文に次のコードを挿入します。

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

<a href="#"><img src="test.jpg" ismap="ismap"></a>

この「 ismap='ismap '」に注意してください。この属性を使用して、この HTML ページを開き、カーソルを画像上の任意の位置に移動します。Web ページの左下隅にあるステータス バーに現在の座標値が表示されます。

この方法で座標値を取得できます。

方法2:

Dreamweverを開いて新しいページを作成し、画像を挿入し、

「長方形」またはその他のホットスポット ツールをクリックし、画像上の位置をドラッグします。

コードエリアを再度開く

これはすでに生成されています。

<<:  CSS 向け SASS スタイル プログラミング ガイド

>>:  MySQL における datetime と timestamp の違いと選択

推薦する

Vue での ref の使用法とデモンストレーション

ref 定義:要素またはサブコンポーネントの参照情報を登録するために使用されます。参照情報は、親コン...

MySQLスローログクエリの詳細な説明

遅いログクエリ機能スロー ログ クエリの主な機能は、設定された時間しきい値を超える SQL ステート...

HTML で margin:0 auto を使用するとページ全体が中央に配置されない問題の解決方法

今日、jsp ページを書きました。<div style="margin:0 auto...

Nginx リバース プロキシと負荷分散の実践

リバースプロキシリバースプロキシとは、プロキシサーバーを介してユーザーのアクセス要求を受信し、ユーザ...

DockerにTensorFlow環境を素早くインストールする方法

Docker に TensorFlow 環境をすばやくインストールし、TensorFlow を使用し...

CentOS で yum を使用して rabbitmq-server をインストールする方法

RabbitMQをインストールする前にSocatをインストールする必要があります。そうしないと、Ra...

Vue.js フロントエンド Web ページ ポップアップ非同期動作例の分析

目次1. 序文2. ポップアップコンポーネントを2つ見つける3. 自分で作る3.1. Promise...

HTML の META タグの使用に関するヒントの例

HTML メタタグHTML メタタグは、Web ページのコンテンツに関する情報をブラウザや検索エンジ...

CN2、GIA、CIA、BGP、IPLC はどういう意味ですか?

CN2ラインとは何ですか? CN2 は、China Telecom Next Carrier Ne...

Windows サーバー ファイルをローカルにバックアップする方法、Windows サーバー データ バックアップ ソリューション

重要なデータはバックアップする必要があり、リアルタイムでバックアップする必要があります。そうしないと...

Linux で Scala 環境を構築し、簡単な Scala プログラムを書く

Linux に Scala 環境をインストールするのは非常に簡単です。Ubuntu 環境であれば、さ...

MySQLクエリ条件におけるonとwhereの配置の違いの分析

導入今日SQLを書いているときに、問題が発生しました。要件は、データを照会し、スコアと過去 1 週間...

Tomcat Nativeを使用してTomcat IO効率を向上させる方法の詳細な説明

目次導入Tomcatへの接続方法APR と Tomcat ネイティブtomcat で APR を使用...

ウェブデザインと制作の一般的な原則をまとめる

<br />関連記事: Web コンテンツ ページ作成に関する 9 つの実用的な提案、W...

Pure CSS3はdivの出入りを順番に実現します

この記事は主に、純粋な CSS3 を使用して div が順番に出入りする効果を紹介します。一定の参考...