【HTML要素】画像の埋め込み方法

【HTML要素】画像の埋め込み方法

img 要素を使用すると、HTML ドキュメントに画像を埋め込むことができます。

画像を埋め込むには、以下に示すように src 属性と alt 属性を使用する必要があります。

 < img src ="../img/example/img-map.jpg" alt ="製品画像" width ="580" height ="266" />

表示効果:

1 ハイパーリンクに画像を埋め込む

img 要素の一般的な使用法は、a 要素と組み合わせて画像ベースのハイパーリンクを作成することです。コードは次のとおりです。

XML/HTML コードコンテンツをクリップボードにコピー
  1. <   href = "その他のページ.html" >   
  2.      <画像  src = "../img/example/img-map.jpg" ismap alt = "製品画像"  = "580"  高さ= "266"   />   
  3. </>   

ブラウザがこの画像を表示する方法に違いはありません。したがって、特定の画像がハイパーリンクを表しているという視覚的な手がかりをユーザーに提供することが重要です。具体的なアプローチとしては、CSS を使用することが考えられますが、画像コンテンツで表現できればさらに良いでしょう。

この画像をクリックすると、ブラウザは親要素 a の href 属性で指定された URL に移動します。 img 要素に ismap 属性を適用すると、サーバー側の部分的なレスポンシブ イメージが作成されます。つまり、イメージのクリック位置が URL に追加されます。たとえば、クリックが画像の上端から 8 ピクセル、左端から 10 ピクセルの場合、ブラウザは次の URL に移動します。

XML/HTML コードコンテンツをクリップボードにコピー
  1. https://yexiaochao.github.io/show4cnblogs/otherpage.html?10,8

次のコードは、クリック位置の座標を表示する簡単なスクリプトを含む otherpage.html の内容を示しています。

XML/HTML コードコンテンツをクリップボードにコピー
  1. <本文>   
  2. < p > X座標は< b > < span   id = "xco" > ?? </ span > </ b > </ p >   
  3. < p > Y座標は< b > < span   id = "yco" > ?? </ span > </ b > </ p >   
  4. <スクリプト タイプ= "アプリケーション/javascript" >   
  5. var coords = window .location.href.split('?')[1].split(',');
  6. document.getElementById("xco") .innerHTML = coords [0];
  7. document.getElementById("yco") .innerHTML = coords [1];
  8. </スクリプト>   
  9. </本文>   

マウスクリックの効果を確認できます。

サーバー側で分割された応答イメージは通常、ユーザーがイメージ上でクリックした領域に応じてサーバーが異なる応答を行い、異なる応答情報を返すことを意味します。 img 要素の ismap 属性を省略すると、マウスクリックの座標がリクエスト URL に含まれません。

2 クライアントパーティションレスポンスマップを作成する

画像のさまざまな領域をクリックすることでブラウザがさまざまな URL に移動できるようにする、クライアント側のレスポンシブ マップを作成できます。このプロセスはサーバーから指示される必要がないため、要素を使用して画像上のさまざまな領域とそれらが表す動作を定義します。クライアント側パーティション応答マップのキー要素はマップです。マップ要素には 1 つ以上のエリア要素が含まれており、各エリア要素は画像上のクリック可能な領域を表します。

area 要素の属性は 2 つのカテゴリに分けられます。最初のカテゴリは、ユーザーが area によって表される画像領域をクリックした後にブラウザーが移動する URL を扱います。次の図は、他の要素で見られる対応するプロパティに類似したこのプロパティのカテゴリを示しています。

2 番目のカテゴリには、より興味深い属性である、shape 属性と coords 属性が含まれます。これらの属性を使用して、ユーザーがクリックできる画像の個々の領域を示すことができます。 shape 属性と coords 属性は連携して機能します。 coords 属性の意味は、次の図に示すように、shape 属性の値によって異なります。

これらの要素を紹介した後、例を見てみましょう。コードは次のようになります。

XML/HTML コードコンテンツをクリップボードにコピー
  1. <本文>   
  2.      <画像  src = "../img/example/img-map.jpg" ismap alt = "製品画像"   usemap = "#mymap"  = "580"  高さ= "266"   />   
  3.   
  4. <地図 名前= "mymap" >   
  5.      <エリア  href = "javascript:show_page(1)"  形状= "長方形"  座標= "'34,60,196,230"   alt = "製品 1"   />   
  6.      <エリア  href = "javascript:show_page(2)"  形状= "長方形"  座標= "'210,60,370,230"   alt = "製品 2"   />   
  7.      <エリア  href = "javascript:show_page(3)"  形状= "長方形"  座標= "'383,60,545,230"   alt = "製品 3"   />   
  8. </マップ>   
  9.   
  10. <スクリプト タイプ= "アプリケーション/javascript" >   
  11. 関数 show_page(num){
  12. //ダイアログボックスで製品を表示し、対応するジャンプページを示します
  13. alert("これは製品 "+num です);
  14. }
  15. </スクリプト>   
  16. </本文>   

効果を見るにはリンクをクリックしてください: http://yexiaochao.github.io/show4cnblogs/img-map.html

表示効果は同じですが、対応する製品画像をクリックすると、対応する製品名がポップアップ表示され、ジャンプ先の製品ページが示されます。

上記[HTML要素]画像埋め込み実装方法は、エディターが皆様に共有する内容の全てです。皆様の参考になれば幸いです。また、123WORDPRESS.COMを応援していただければ幸いです。

オリジナルURL: http://www.cnblogs.com/luka/archive/2016/07/23/5580949.html

<<:  Linux リモート管理と sshd サービス検証の知識ポイントの詳細な説明

>>:  el-table カプセル化に基づくドラッグ可能な行と列、および選択列コンポーネントの実装

推薦する

WeChatアプレットにおけるデータ保存実装方法

目次グローバル変数 globalDataページプライベート変数データストレージ非同期ストレージ(デバ...

proxy_pass がパス パスに従って転送する場合の "/" 問題の詳細な説明

nginx で proxy_pass を設定するときに、^~ に従ってパスを一致させる場合は、pro...

Vueのレスポンシブシステムの原理の詳細な説明

目次Vueのレスポンシブシステムの基本原則1. Object.definePropertyの使い方を...

jQueryアニメーションを理解するのに役立つ記事

目次1. 要素の表示と非表示を制御する show() hide() 2. 要素の透明度を制御する f...

CSSを使用してアダプティブスクエアを実装する方法の例

伝統的な方法は、正方形を固定形式で書くことです。長さ=幅を直接書き、次のように固定値を書きます。 。...

Linux で PyCurl のエラーを解決する方法

「curl-config を実行できませんでした」の解決策 pycurl のダウンロード/解凍 (p...

Mysql ファジークエリが大文字と小文字を区別するかどうかの詳細な調査

序文最近、私は小さな個人ブログ プロジェクトを書くのに忙しくしています。 「グローバル検索」機能を実...

異なるブラウザ間で互換性のあるテキスト配置を実現する CSS

フォームのフロントエンド レイアウトでは、テキスト ボックスのプロンプト テキストを両端に揃える必要...

ブラインドの特殊効果を実現するネイティブJS

この記事では、ネイティブ JS で実装されたブラインドの特殊効果を紹介します。効果は次のとおりです。...

CSS3は、ズームと回転を実現するためにscale()とrotate()を使用します。

1. scale() メソッドズームとは「縮小」と「拡大」を意味します。 CSS3 では、scal...

MYSQL の解凍版における中国語の文字化け問題の解決方法

MYSQLの解凍バージョンがインストールされます1: 解凍後、my.ini ファイルをコピーし、バイ...

Linux での i3 ウィンドウ マネージャーの設定と使用に関するチュートリアル

この記事では、Fedora 28 に i3 をインストールして簡単に設定する方法を説明します。 1....

MySQLは現在の日付と時刻を取得する関数

現在の日付 + 時刻 (日付 + 時刻) を取得する関数: now() mysql> now(...

nginxで静的リソースを公開する方法

ステップ準備した静的リソースファイルを指定されたフォルダに配置しますnginx 設定ファイルを変更す...