ホームページ > 記事 > ウェブフロントエンド > Javascriptの基本（埋め込み画像の簡単な実装）
Javascriptの基本（埋め込み画像の簡単な実装）
- 亚连オリジナル
- 2018-05-21 09:43:521077ブラウズ
ここで、JavaScript の基本 (画像の埋め込みの簡単な実装) をお届けします。今からそれを皆さんと共有し、皆さんの参考にしてください。
img 要素を使用すると、HTML ドキュメントに画像を埋め込むことができます。
画像を埋め込むには、src 属性と alt 属性を使用する必要があります。コードは次のとおりです。
<img src="../img/example/img-map.jpg" alt="Products Image" width="580" height="266" />
表示効果:
1 ハイパーリンクへの画像の埋め込み
img 要素は、a 要素と組み合わせて作成します。次のコードで画像ベースのハイパーリンクを作成します。
<a href="otherpage.html"> <img src="../img/example/img-map.jpg" ismap alt="Products Image" width="580" height="266" /> </a>
ブラウザがこの画像を表示する方法に違いはありません。したがって、特定の画像がハイパーリンクを表すという視覚的な手がかりをユーザーに提供することが重要です。具体的な方法としてはCSSを利用することも考えられますが、画像コンテンツ内で表現すると良いでしょう。
このような画像をクリックすると、ブラウザは親要素aのhref属性で指定されたURLに移動します。 img 要素に ismap 属性を適用すると、サーバー側の部分応答グラフが作成されます。これは、画像上のクリック位置が URL に追加されることを意味します。たとえば、画像の上端から 8 ピクセル、左端から 10 ピクセルの位置でクリックした場合、ブラウザは次のアドレスに移動します。
https://yexiaochao.github.io/show4cnblogs/otherpage.html?10,8
次のコードは、otherpage.html のコンテンツを示しています。クリック位置の座標を表示するスクリプト:
<body>
<p>The X-coordinate is <b><span id="xco">??</span></b></p>
<p>The 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 = coords[0];
document.getElementById("yco").innerHTML = coords[1];
</script>
</body>ブラウザーがこの画像を表示する方法に違いはありません。したがって、特定の画像がハイパーリンクを表すという視覚的な手がかりをユーザーに提供することが重要です。具体的な方法としてはCSSを利用することも考えられますが、画像コンテンツ内で表現すると良いでしょう。
このような画像をクリックすると、ブラウザは親要素aのhref属性で指定されたURLに移動します。 img 要素に ismap 属性を適用すると、サーバー側の部分応答グラフが作成されます。これは、画像上のクリック位置が URL に追加されることを意味します。たとえば、画像の上端から 8 ピクセル、左端から 10 ピクセルの位置でクリックした場合、ブラウザは次のアドレスに移動します。
https://yexiaochao.github.io/show4cnblogs/otherpage.html?10,8
次のコードは、otherpage.html のコンテンツを示しています。クリック位置の座標を表示するスクリプト:
<body>
<p>The X-coordinate is <b><span id="xco">??</span></b></p>
<p>The 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 = coords[0];
document.getElementById("yco").innerHTML = coords[1];
</script>
</body>マウスクリックの効果を確認できます:
サーバー側のパーティション応答グラフは、通常、ユーザーがクリックした領域に基づいてサーバーが違いを生み出すことを意味します。画像応答 (異なる応答情報を返すなど)。 img要素のismap属性を省略した場合、リクエストURLにマウスクリックの座標は含まれません。
2 クライアント側のパーティション応答グラフを作成する
クライアント側のパーティション応答グラフを作成し、画像上のさまざまな領域をクリックすることでブラウザがさまざまな URL に移動できるようにします。このプロセスはサーバーを介してブートストラップする必要がないため、要素を使用して画像上のさまざまな領域と、それらが表す動作を定義します。クライアント側のパーティション応答グラフの主要な要素は map です。map 要素には 1 つ以上の area 要素が含まれており、それぞれが画像上のクリック可能な領域を表します。
area 要素の属性は 2 つのカテゴリに分類できます。最初のカテゴリは、エリアによって表される画像エリアがユーザーによってクリックされた後にブラウザが移動する URL を扱います。以下の図は、このタイプのプロパティを示しています。これらのプロパティは、他の要素で見られる対応するプロパティに似ています。
2 番目のカテゴリには、さらに興味深い属性 (shape 属性と coords 属性) が含まれています。これらの属性を使用して、ユーザーがクリックできる画像のさまざまな領域を示すことができます。形状と座標のプロパティは連携して機能します。以下の図に示すように、coords 属性の意味は、shape 属性の値によって異なります。
これらの要素を導入した後のコードは、たとえば次のようになります。
<body>
<img src="../img/example/img-map.jpg" ismap alt="Products Image" usemap="#mymap" width="580" height="266" />
<map name="mymap">
<area href="javascript:show_page(1)" shape="rect" coords="'34,60,196,230" alt="product 1" />
<area href="javascript:show_page(2)" shape="rect" coords="'210,60,370,230" alt="product 2" />
<area href="javascript:show_page(3)" shape="rect" coords="'383,60,545,230" alt="product 3" />
</map>
<script type="application/javascript">
function show_page(num){
//通过对话框显示产品，表示对应的跳转页面
alert("This is product "+num);
}
</script>
</body>表示効果は、同様に、対応するをクリックするだけです。製品画像が対応する製品名とともにポップアップ表示され、ジャンプした製品ページが示されます。
上記をあなたのためにまとめました。将来お役に立てば幸いです。
関連記事:
Javascript継承メカニズム(詳細な回答、グラフィックチュートリアル)
以上がJavascriptの基本（埋め込み画像の簡単な実装）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。