ウェブ画像のホットリンクと座標値を設定するサンプルコード
|
時には、画像上に複数の領域を設定する必要があります。マウスで画像のさまざまな領域をクリックしてさまざまなページに移動したり、画像の特定の領域をクリックして特定のページに移動したりできます。これが 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 の違いと選択
推薦する
iframe ページで js 関数を呼び出すには js を使用します
最近、私は毎日論文提案に取り組んでいます。自分のスキルを発揮して、再びWebをデザインしたくてうずう...
MySQL データベースの文字化け問題の原因と解決策
序文データベースのデータを表示すると、文字化けした文字が表示されることがあります。実際、どのようなデ...
JavaScript データ プロキシとイベントの詳細な分析
目次データブローカーとイベントObject.defineProperty メソッドのレビューデータブ...
MySQL でのバイナリ型操作
この記事は主にMySQLデータベースのバイナリ型操作を紹介し、具体的な内容を通して紹介します。MyS...
Linux ファイルとユーザー管理の実践
1. /etc ディレクトリ内の、文字以外の文字で始まり、その後に文字と任意の長さのその他の文字が続...
MySQL のテーブル内のレコード数を制限する方法
目次1. トリガーソリューション2. パーティションテーブルソリューション3. 一般的な表領域ソリュ...
MySQLのジョイントクエリについて詳しく説明します
目次ユニオンクエリ1. 中国の各省のIDと名前を照会する2. 湖南省のすべての地級市のIDと名称3....
SQL 文で OR と AND を混在させる場合のヒント
現在、このような要件があります。ログインした人がカスタマー サービス担当者である場合、注文は「このカ...
HTML をホームページとして設定し、お気に入りに追加_Powernode Java Academy
IE ブラウザで「ホームページとして設定」および「お気に入りに追加」機能を実装する方法解決：指定さ...
MySQL における Datetime と Timestamp の使用の概要
目次1. MySQL で現在の時刻を表現するにはどうすればよいでしょうか? 2. TIMESTAMP...
HTML テーブル タグ チュートリアル (47): ネストされたテーブル
<br />このページでは、テーブルをネストすることで組版を実現しています。つまり、1 ...
MySQL データベース クエリ パフォーマンス最適化戦略
クエリを最適化するExplain ステートメントを使用してクエリ ステートメントを分析するExpla...
MySQL 8.0 再帰クエリの簡単な使用例
序文この記事では、MySQL 8.0 の新機能を使用して再帰クエリを実装します。詳細なサンプル コー...
CSSで検索ボックスを非表示にする機能を実装します（アニメーション順方向と逆方向のシーケンス）
上部のメニュー バーに検索ボックスを配置するのは一般的なシナリオですが、検索機能がそれほど頻繁に使用...
MySQL でのサブクエリの基本的な使用法
目次1. サブクエリの定義2. サブクエリの分類1. スカラーサブクエリ: 2. MySQLサブクエ...