ウェブ画像のホットリンクと座標値を設定するサンプルコード
|
時には、画像上に複数の領域を設定する必要があります。マウスで画像のさまざまな領域をクリックしてさまざまなページに移動したり、画像の特定の領域をクリックして特定のページに移動したりできます。これが 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 の違いと選択
推薦する
CSS3 で translate と transition を使用する方法
translate と transition は非常に強力で、習得するのは不可能だといつも感じていま...
Vue はアップロードした画像に透かしを追加できるようになりました (アップグレード版)
vueプロジェクトでは、アップロードした画像に透かしを追加して参照できるようにするアップグレード版...
Nginx で Angular プロジェクトを展開する際の落とし穴
コンパイル後にAngularプロジェクトをNginxにデプロイする方法をオンラインで検索すると、ほと...
Ubuntu LinuxにOracle Java 14をインストールする方法
最近、Oracle は Java 14 (または Oracle JDK 14) の一般公開を発表しま...
数千万のデータを扱うMySQLのページングクエリのパフォーマンスを最適化する
MySQL のデータ量が多い場合、制限ページングが使用されます。ページ数が増えると、クエリの効率が低...
モバイル端末のジャンプ問題を解決する（CSS遷移、ターゲット疑似クラス）
序文モバイル端末に触れたばかりの友人の多くは、クリックジャンプルーティング、特にVueルーティングを...
CSS スクロールバースタイル変更コード
CSS スクロールバースタイル変更コード .scroll::-webkit-scrollbar { ...
JavaScript コンストラクタとプロトタイプの関係
目次1. コンストラクタとプロトタイプ1. コンストラクター2. コンストラクタ問題3. コンストラ...
Linux システムに docker をインストールし、ssh 経由で docker コンテナにログインする方法
注: 私はCentosを使ってdockerをインストールしていますステップ1: Dockerをインス...
HTMLベースの複数画像アップロードのプレビュー機能を実装
最近、Web ページに複数の画像をアップロードするためのスクリプトを作成しました。これは非常に実用的...
js を使用して画像をモザイク化する方法の例
この記事では、主に js を使用して画像をモザイク化する方法の例を紹介し、次のように共有します。効果...
CentOS での MySQL ワークベンチのインストールと設定のチュートリアル
この記事では、MySQL Workbenchのインストールと設定のチュートリアルを参考までに紹介しま...
Vueルーティングルーターの詳細な説明
目次ルーティングプラグインをモジュール方式で使用するルートの使用宣言型ナビゲーションプログラムによる...
MySQL が起動直後にシャットダウンする問題 (ibdata1 ファイルの破損が原因) に対する完璧な解決策
コンピュータ ルームのサーバー上の mysql がしばらく実行されていたのですが、突然、再起動しても...
DockerコンテナでArthasを使用するための詳細な手順
Arthas はあなたのために何ができるでしょうか? Arthas 、開発者に深く愛されている Al...