【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 カプセル化に基づくドラッグ可能な行と列、および選択列コンポーネントの実装

推薦する

MySQLにおけるテーブルインデックスの定義方法と導入

概要インデックスは、テーブル内の 1 つ以上の列に基づいて DBMS によって特定の順序で作成される...

CentOS8 ネットワークカード設定ファイル

1. はじめにCentOS8 システムの更新、新しいバージョンは人々に非常に快適に感じさせます。 こ...

VueでEchartsチャートの幅と高さの適応を実現する実践

目次1. インストールとインポート2. 手ぶれ補正機能を定義する3. チャートコードを描くinit ...

HTML メタビューポート属性の説明

ビューポートとはモバイル ブラウザは、Web ページを仮想の「ウィンドウ」(ビューポート) に配置し...

Dockerイメージ内のファイルを表示する方法

Dockerイメージ内のファイルを表示する方法1. すでに実行中の場合すでに実行中のイメージについて...

CSS3で作成した画像スクロール効果

成果を達成する実装コードhtml <base href="https://s3-us...

Win10 構成 Tomcat 環境変数チュートリアル図

設定する前に、次の操作を行う必要があります。 1. まずjdk bloggerをインストールします。...

Reactは、読み込み、読み込み完了、読み込み失敗の3つの段階の原則分析を実装します。

最近ブログに書いたのですが、プロジェクトリストの中に写真がたくさんあり、最初は読み込みが遅いので、ス...

2級コンピュータ試験のMySQL知識ポイント mysql alterコマンド

テーブル構造を編集するための MySQL の alter コマンドの使用。具体的な内容は以下のとおり...

CSS マスクを使用して PNG 画像のサイズを大幅に最適化します (推奨)

この記事は共有および集約することを歓迎します。全文を転載する必要はありません。著作権を尊重してくださ...

さまざまなHTTPリターンステータスコードの詳細な説明

サイト上のページを表示するためのリクエストがサーバーに送信されると(たとえば、ユーザーがブラウザでペ...

Vue大画面表示適応方法

この記事では、vueの大画面表示適応の具体的なコードを参考までに紹介します。具体的な内容は以下のとお...

ミニプログラムにより、製品属性の選択や仕様の選択が可能

この記事では、ミニプログラムで製品属性選択または仕様選択を実装するための具体的なコードを参考までに共...

Vueはタブ切り替えの虫眼鏡効果を実装します

この記事では、タブ切り替えの虫眼鏡効果を実現するためのVueの具体的なコードを例として紹介します。具...

Ubuntu システムログで /var/log/messages を設定する方法

1. 問題の説明今日、システム ログ ファイルを確認する必要がありますが、/var/log/mess...