ホームページ > 記事 > ウェブフロントエンド > HTML要素に画像を埋め込む方法
今回はHTML要素に画像を埋め込む方法と、HTML要素に画像を埋め込む際の注意点を紹介します。実際の事例を見てみましょう。
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>
<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>表示効果は同じで、クリックするだけです。該当商品画像上に該当商品名がポップアップ表示され、ジャンプした商品ページが表示されます。 これらの事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 関連書籍:
HTML の順序付きリスト、順序なしリスト、定義リストの使用方法
以上がHTML要素に画像を埋め込む方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。