ウェブ画像のホットリンクと座標値を設定するサンプルコード
|
時には、画像上に複数の領域を設定する必要があります。マウスで画像のさまざまな領域をクリックしてさまざまなページに移動したり、画像の特定の領域をクリックして特定のページに移動したりできます。これが 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 の違いと選択
推薦する
Xshell にショートカット コマンドを追加する方法
便利なターミナル エミュレーターである Xshell は、開発者がホスト サーバーをリモート管理する...
JSはプログレスバーのスムーズバージョンの詳細な計画を実装します
進捗バーがスムーズではないフロントエンドを学ぶ学生のほとんどは、オーディオプレーヤーやビデオプレーヤ...
Vue ベースの円形スクロールリスト機能を実装する
注: 親コンテナーに高さと :data='Array' および overfolw:h...
mysql5.7.18 のインストール時にエントリが見つからない問題の解決方法
mysql5.7.18のインストール時に次の問題が発生しました: プログラム入力ポイントfesetr...
フェッチネットワークリクエストのカプセル化例の詳細な説明
エクスポートデフォルト（{ URL、 メソッド = 'GET'、 データ = nu...
dockerコマンドの使用にはsudoは必要ありません
docker デーモンは通常の TCP ポートではなくホストの Unix ソケットにバインドする必要...
JS を使用してファイルを操作する (FileReader は --node の fs を読み取ります)
目次JS はファイルを読み取る FileReader書類イベントとメソッド基本的な使い方イベント処理...
MySQL におけるさまざまな一般的な結合テーブルクエリの例の概要
この記事では、例を使用して、MySQL のさまざまな一般的な結合テーブルクエリについて説明します。ご...
マウス追従ゲームを実現するjs
この記事では、マウス追従ゲームを実装するためのjsの具体的なコードを参考までに共有します。具体的な内...
Deepin で virtualenv をインストールして使用するチュートリアル
virtualenv は、分離された Python 仮想環境を作成するためのツールです。独立したディ...
JavaScript ベースで年・月・日の 3 階層連携を実現
この記事では、年、月、日の3段階のリンクを実現するためのJavaScriptの具体的なコードを参考ま...
JavaScript データ型変換の例 (他の型を文字列、数値型、ブール型に変換する)
序文データ型変換とは何ですか?フォームまたはプロンプトを使用して取得されるデフォルトのデータ型は文字...
Docker を使用した Alibaba Cloud Server のインストールと、仮想マシンへのインストールで遭遇する落とし穴 (問題のまとめ)
Docker インストール (Alibaba Cloud Server) Docker 公式 Ce...
JSベースの手持ち連射機能＋テキスト揺れ特殊効果コードの簡単実装
少し前にTikTokで揺れる連打が流行っていたので真似してみることにしました。さっそく効果をみてみま...
MySQL 8.0.15 のインストールと設定のグラフィックチュートリアルと Linux でのパスワード変更
このブログは、MySQL8.0.15 を正常にインストールしたことを思い出すために書きました。以前は...