ウェブ画像のホットリンクと座標値を設定するサンプルコード
|
時には、画像上に複数の領域を設定する必要があります。マウスで画像のさまざまな領域をクリックしてさまざまなページに移動したり、画像の特定の領域をクリックして特定のページに移動したりできます。これが 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パスワードを変更するいくつかの方法
序文：データベースを日常的に使用すると、パスワードが単純すぎて変更する必要がある場合、パスワードの有...
MySQL MyISAM デフォルト ストレージ エンジンの実装原則
デフォルトでは、MyISAM テーブルはディスク上に .frm (テーブル構造ファイル)、.MYD ...
JavaScript イベント委任 (プロキシ) の使用例の詳細
目次導入例: イベントの委任記述方法1: イベント委譲書き方2: 各子要素がイベントをバインドする例...
MySQL 起動時に報告される ERROR:2002 の分析と解決方法
序文この記事は主にMySQL起動エラー2002の分析と解決方法を紹介しています。参考と勉強のために共...
Centos 7.4 サーバーの時刻同期設定方法 [NTP サービスに基づく]
この記事では、CentOS 7.4 サーバーで時刻同期を構成する方法について説明します。ご参考までに...
MySQLデータベースパラダイムの詳細な説明
序文：データベースパラダイムについてはよく耳にしていましたが、詳細まで理解したことはありませんでした...
グループフィールドを 1 行に書き込むための mysql group_concat メソッドの例
この記事では、MySQL group_concat を使用してグループ化されたフィールドを 1 つの...
ウェブページのカラーマッチング例分析: 緑色のカラーマッチングウェブページ分析
<br />緑は黄色と青（寒色と暖色）の中間の色で、より穏やかな色です。そのため、緑は最...
CSS ラベルモード表示プロパティの詳細な説明
コードは次のようになります。 <!DOCTYPE html> <html> ...
Vueコンポーネント間の通信の非常に詳細な要約
目次序文1. Props、$emit一方向データフロー2. $親、$子3. $attrs、$list...
CentOS6.5 に glibc-2.14 をインストールした後、ロケールで「そのようなファイルまたはディレクトリはありません」というメッセージが表示される場合の解決策
目次1. 穴に落ちる2. 無駄な努力3. 若さの衝動4. 希望の光5. 問題KO 6. 追記1. 穴...
React.FCとReact.Componentの使用に関する簡単な説明
目次1. React.FC<> 2. クラスxxはReact.Componentを拡張し...
MySQL ステートメントの実行順序と書き込み順序の例の分析
選択ステートメントの完全な構文は次のとおりです。 選択 DISTINCT <選択リスト>...
CSS グリッドレイアウトを使用してレスポンシブな縦棒グラフを作成する方法
私はしばらくの間チャートをいじっていましたが、好奇心から、CSS を使用してチャートを作成するより良...
Zabbix redis 自動ポート検出スクリプトは json 形式を返します
自動検出を行う際には、ポートなどの情報を取得してjson形式で返すスクリプトが必ず存在します。Red...