IMG要素により、HTMLドキュメントに画像を埋め込むことができます。
画像を埋め込むには、SRCおよびALT属性を使用する必要があります。コードは次のとおりです。
<img src = "../ img/example/img-map.jpg"/>
表示効果：
1ハイパーリンクに画像を埋め込みます
IMG要素の一般的な使用法は、A要素と組み合わせて画像ベースのハイパーリンクを作成することです。コードは次のとおりです。
<a href = "otherpage.html"> <img src = "../ img/example/img-map.jpg" ismap/> </a>
ブラウザがこの画像を表示する方法も同じです。したがって、特定の画像がハイパーリンクを表すという視覚的な手がかりをユーザーに提供することが重要です。特定のアプローチは、CSSを使用することです。これは、画像コンテンツで表現する方が適しています。
この画像をクリックすると、ブラウザは親要素aのHREF属性によって指定されたURLに移動します。 ISMAP属性をIMG要素に適用すると、サーバー側のブランチ応答マップが作成されます。つまり、画像でクリックされた場所がURLに添付されます。たとえば、クリック場所が画像の上部から8ピクセル、左端の10ピクセルの場合、ブラウザは次のアドレスに移動します。
https://yxiaochao.github.io/show4cnblogs/otherpage.html？10,8
次のコードには、otherpage.htmlのコンテンツが表示されます。これには、クリック位置の座標を表示する簡単なスクリプトが含まれています。
<body> <p> X-Coordinate is <b> <span id = "xco"> ?? </span> </b> </p> <p> y-Coordinate is <b> <span id = "yco"> ?? </span> </b> </p> <script type = "application/javascript"> var coords = window.location.href.split（ '？'）[1] .split（ '、'）; document.getElementById（ "xco"）。innerhtml = coordinates [0]; document.getElementById（ "yco"）。innerhtml = coordinates [1]; </script> </body>
ブラウザがこの画像を表示する方法も同じです。したがって、特定の画像がハイパーリンクを表すという視覚的な手がかりをユーザーに提供することが重要です。特定のアプローチは、CSSを使用することです。これは、画像コンテンツで表現する方が適しています。
この画像をクリックすると、ブラウザは親要素aのHREF属性によって指定されたURLに移動します。 ISMAP属性をIMG要素に適用すると、サーバー側のブランチ応答マップが作成されます。つまり、画像でクリックされた場所がURLに添付されます。たとえば、クリック場所が画像の上部から8ピクセル、左端の10ピクセルの場合、ブラウザは次のアドレスに移動します。
https://yxiaochao.github.io/show4cnblogs/otherpage.html？10,8
次のコードには、otherpage.htmlのコンテンツが表示されます。これには、クリック位置の座標を表示する簡単なスクリプトが含まれています。
<body> <p> X-Coordinate is <b> <span id = "xco"> ?? </span> </b> </p> <p> y-Coordinate is <b> <span id = "yco"> ?? </span> </b> </p> <script type = "application/javascript"> var coords = window.location.href.split（ '？'）[1] .split（ '、'）; document.getElementById（ "xco"）。innerhtml = coordinates [0]; document.getElementById（ "yco"）。innerhtml = coordinates [1]; </script> </body>
マウスクリックの効果を確認できます。
サーバー側のパーティション応答グラフは、通常、異なる応答情報の返却など、ユーザーの画像上のクリック領域に応じてサーバーが異なる応答を行うことを意味します。 IMG要素のISMAP属性が省略されている場合、マウスクリックの座標はリクエストURLに含まれません。
2クライアントパーティションの応答図を作成します
クライアントパーティションの応答マップを作成し、画像上のさまざまな領域をクリックして、ブラウザを異なるURLに移動させることができます。このプロセスでは、サーバーを介したブートを必要としないため、要素を使用して、画像上の個々の領域とそれらが表す動作を定義します。クライアントパーティション応答グラフの重要な要素は、1つ以上の領域要素を含むマップであり、それぞれがクリックできる画像上の領域を表しています。
エリア要素のプロパティは、2つのカテゴリに分割できます。最初のカテゴリは、領域で表される画像領域がユーザーによってクリックされた後にブラウザがナビゲートするURLを扱います。次の図は、このタイプの属性を紹介します。これは、他の要素に見られる対応する属性に似ています。
2番目のカテゴリには、より興味深い属性が含まれています：形状と座標属性。これらのプロパティを使用して、ユーザーがクリックできる各画像領域を示すことができます。形状と座標のプロパティは一緒に機能します。 Coords属性の意味は、下の図に示すように、形状属性の値に依存します。
これらの要素を導入した後、例を挙げてください、コードは次のとおりです。
<body> <img src = "../ img/example/img-map.jpg" ismap usemap = "＃mymap"/> <map name = "mymap"> <領域href = "javascript：show_page：show_page：show_page =" rect "coords =" '34,60,196,230 "/> <エリアhref = shape = "rect" coords = "'210,60,370,230" /> <エリアhref = "javascript：show_page（3）" shape = "rect" coords = "' 383,60,545,230" /> < /map> <スクリプトタイプ= "アプリケーション /javascript" Alert（ "これは製品です"+num）; } </script> </body>
ディスプレイ効果は同じですが、対応する製品画像をクリックすると、対応する製品名がポップアップし、ジャンプした製品ページが表示されます。
上記の記事javascript basics_simple埋め込み画像の実装は、私があなたと共有するすべてのコンテンツです。参照を提供できることを願っています。wulin.comをもっとサポートできることを願っています。