HTML要素] 画像を埋め込む方法

img 要素は、HTML 文書に画像を埋め込むことができます。 そのため

画像を埋め込むには、src属性とalt属性を使用し、以下のコードを記述する必要があります。

<

イムグ 

src

= "... /img/example/img-map.jpg "です。

 アルト

= "商品画像"

 幅

= "580"

 高さ

= "266"

/>

表示効果。

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

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

この画像の表示方法は、ブラウザでも何ら変わりはありません。したがって、特定の画像がハイパーリンクを表しているという視覚的な合図をユーザーに提供することが重要です。これはCSSを使って行うことができますが、より良い方法は、画像のコンテンツで行うことです。

このような画像をクリックすると、ブラウザは親要素aのhref属性で指定されたURLに移動します。img要素にismap属性を適用すると、サーバー側の分岐応答マップ、つまり画像をクリックした位置がURLに付加されることになります。例として、クリック位置が画像の上端から8ピクセル、左端から10ピクセルの場合、ブラウザは以下のアドレスに遷移します。

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

をマウスでクリックすると、その効果を見ることができます。

画像

サーバーサイドで分割されたレスポンス・マップは、通常、ユーザーが画像をクリックした領域によってサーバーが異なる反応をすることを意味し、例えば、異なるレスポンス・メッセージを返します。img 要素の ismap 属性が省略された場合、マウスでクリックされた座標はリクエスト URL に含まれません。

2 クライアントパーティション応答マップの作成

画像のさまざまな領域をクリックすることで、ブラウザが別のURLに移動できるクライアントサイドのパーティショニングされたレスポンスグラフを作成することができます。このプロセスはサーバーを介する必要がないため、画像上の領域とそれらが表す動作を定義するために要素が使用されます。クライアントサイドのパーティションドレスポンスマップの重要な要素は map 要素で、画像上のクリック可能な領域をそれぞれ表す 1 つ以上の area 要素を含んでいます。

area要素の属性は2つに分類され、1つはareaが表す画像領域がユーザーによってクリックされた場合にブラウザが移動するURLを扱うもので、次の図はこの属性の分類を説明したもので、他の要素に見られるものと類似しています。

2つ目のカテゴリには、より興味深いプロパティであるshapeとcoordsのプロパティが含まれています。これらのプロパティは、ユーザーがクリックできる様々な画像領域を示すために使用することができます。shapeとcordsの属性は一緒に機能する。coords属性の意味は、次の図に示すようにshape属性の値に依存します。

これらの要素を導入した上で、例として以下のようなコードになります。

リンクをクリックすると効果が表示されます： http://yexiaochao.github.io/show4cnblogs/img-map.html

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

以上、[HTML要素]画像埋め込み実装方法をお伝えしましたが、ご参考になれば幸いです、また、スクリプトホームを応援していただければ幸いです。

元記事のアドレス：http://www.cnblogs.com/luka/archive/2016/07/23/5580949.html