ウェブ画像のホットリンクと座標値を設定するサンプルコード
|
時には、画像上に複数の領域を設定する必要があります。マウスで画像のさまざまな領域をクリックしてさまざまなページに移動したり、画像の特定の領域をクリックして特定のページに移動したりできます。これが 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 の違いと選択
推薦する
MySQL 5.7.18のインストール方法とMySQLサービスの起動手順の詳細な説明
MySQL は非常に強力なリレーショナル データベースです。しかし、初心者の中には、インストールや設...
JavaScript のカンマ式が含まれている場合について
JavaScript の if ステートメントで英語のカンマ「,」が表示されることがあります。これは...
Excelアップロード機能を実現するVue + iViewの完全コード
1. HTML部分 <Col span="2">ファイルをアップロー...
MySQL kill コマンドの使用ガイド
KILL [接続 | クエリ] processlist_id MySQL では、各接続は個別のスレ...
MySQL 8.0 の降順インデックス
序文インデックスが順序付けられていることは誰もが知っていると思いますが、MySQL の以前のバージョ...
Tomcat イメージをインストールして Docker に Web プロジェクトをデプロイする方法を簡単に説明します。
1. Tomcatをインストールする1. Docker HubでTomcatイメージを見つける d...
Vue のプラグインとコンポーネントの違いと使い方のまとめ
このチュートリアルの動作環境: Windows 7 システム、vue 2.9.6 バージョン、DEL...
spanタグのスタイルに幅属性を設定する方法
span タグのスタイルに width 属性を直接設定すると、効果がないことがわかります。 disp...
Vueはドラッグプログレスバーを実装します
この記事では、ドラッグプログレスバーを実現するためのVueの具体的なコードを例として紹介します。具体...
CentOS7環境にMySQL5.5データベースをインストールする
目次1. 現在のシステムにMySQLがインストールされているかどうかを確認する2. インストールされ...
sqlite を mysql スクリプトに移行する方法
さっそく、コードを直接投稿します。具体的なコードは次のとおりです。 パーレル # # https:/...
MySQL での外部キーの作成、制約、削除
序文MySQL バージョン 3.23.44 以降では、InnoDB エンジン タイプのテーブルは外部...
Mac で Docker を使用して Oracle をデプロイする方法
Mac で Docker を使用して Oracle をデプロイする方法まずdockerをインストール...
WINDOWS での MYSQL のインストールに関する詳細なチュートリアル
1. インストールパッケージをダウンロードする- お使いのコンピュータシステムに応じて適切なバージョ...
HTML 5.1 学習: 14 の新機能とアプリケーション例
序文ご存知のとおり、HTML5 はインターネット コミュニティ全体に標準を提供する組織である Wor...