【HTML要素】画像の埋め込み方法-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

【HTML要素】画像の埋め込み方法

高洛峰

Feb 18, 2017 pm 03:14 PM

img 要素を使用すると、HTML ドキュメントに画像を埋め込むことができます。

画像を埋め込むには、src 属性と alt 属性を使用する必要があります。コードは次のとおりです:

<img  src="/static/imghwm/default1.png" data-src="../img/example/img-map.jpg" class="lazy" alt="【HTML要素】画像の埋め込み方法" >

表示効果:

【HTML 元素】嵌入图像的实现方法

1 画像を埋め込みます

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

XML/HTML コードコンテンツをクリップボードにコピーします

<a href="otherpage.html">  
    <img src="/static/imghwm/default1.png"  data-src="../img/example/img-map.jpg"  class="lazy"   ismap alt="Products Image"    style="max-width:90%"  style="max-width:90%" />  
</a>

ブラウザがこの画像を表示する方法は異なります。したがって、特定の画像がハイパーリンクを表すという視覚的な手がかりをユーザーに提供することが重要です。具体的な方法としてはCSSを利用することも考えられますが、画像コンテンツ内で表現すると良いでしょう。

このような画像をクリックすると、ブラウザは親要素aのhref属性で指定されたURLに移動します。 img 要素に ismap 属性を適用すると、サーバー側の部分応答グラフが作成されます。これは、画像上のクリック位置が URL に追加されることを意味します。たとえば、画像の上端から 8 ピクセル、左端から 10 ピクセルの位置でクリックした場合、ブラウザは次のアドレスに移動します:

XML/HTML コードコンテンツをクリップボードにコピー

https://yexiaochao.github.io/show4cnblogs/otherpage.html?10,8

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

XML/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(&#39;?&#39;)[1].split(&#39;,&#39;);   
    document.getElementById("xco").innerHTML = coords[0];   
    document.getElementById("yco").innerHTML = coords[1];   
</script>  
</body>

マウスクリックの効果を確認できます:

【HTML 元素】嵌入图像的实现方法

サーバー側のパーティション応答グラフ通常、サーバーは、ユーザーが画像上でクリックしたさまざまな領域に応じて、さまざまな応答情報を返すなど、さまざまな反応をすることを意味します。 img要素のismap属性を省略した場合、リクエストURLにマウスクリックの座標は含まれません。

2 クライアント側のパーティション応答グラフを作成する

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

area 要素の属性は 2 つのカテゴリに分類できます。最初のカテゴリは、エリアによって表される画像エリアがユーザーによってクリックされた後にブラウザが移動する URL を扱います。以下の図は、このタイプのプロパティを示しています。これらのプロパティは、他の要素で見られる対応するプロパティに似ています。

【HTML 元素】嵌入图像的实现方法

2 番目のカテゴリには、さらに興味深い属性 (shape 属性と coords 属性) が含まれています。これらの属性を使用して、ユーザーがクリックできる画像のさまざまな領域を示すことができます。形状と座標のプロパティは連携して機能します。以下の図に示すように、coords 属性の意味は、shape 属性の値によって異なります。

【HTML 元素】嵌入图像的实现方法

これらの要素を導入した後のコードは、たとえば次のようになります。

XML/HTMLコード内容をクリップボードにコピー

<body>  
    <img src="/static/imghwm/default1.png"  data-src="../img/example/img-map.jpg"  class="lazy"   ismap alt="Products Image" usemap="#mymap"    style="max-width:90%"  style="max-width:90%" />  
  
<map name="mymap">  
    <area href="javascript:show_page(1)" shape="rect" coords="&#39;34,60,196,230" alt="product 1" />  
    <area href="javascript:show_page(2)" shape="rect" coords="&#39;210,60,370,230" alt="product 2" />  
    <area href="javascript:show_page(3)" shape="rect" coords="&#39;383,60,545,230" alt="product 3" />  
</map>  
  
<script type="application/javascript">  
     function show_page(num){   
         //通过对话框显示产品，表示对应的跳转页面   
         alert("This is product "+num);   
     }   
</script>  
</body>

表示効果は同じですが、対応する製品画像をクリックすると、対応する製品名がポップアップし、ジャンプした製品ページを示します。

上記の【HTML要素】への画像埋め込みの実装方法は、全てエディターで共有した内容ですので、ご参考になれば幸いです、PHP中国語サイトを応援していただければ幸いです。

埋め込み画像の[HTML要素]実装方法と関連記事の詳細については、PHP中国語Webサイトに注目してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。