HTML画像

一般的に私たちが使用するのは、画像を挿入することです。主に画像を背景として使用し、次に画像をリンクとして使用します。関連するタグは <img> 次に、理解を深めていくために HTML ファイルを作成します。まず、ブラウザを使用して、Web ページ上のいくつかの画像をダウンロードします (HTML ファイルと同じフォルダーに置きます)。後で使用します。

1. まず、Webページの背景画像として画像を設定します 背景画像を追加するには、body属性にbackground属性を追加します

QQ截图20161011091200.png

たとえば、次のように画像を挿入します。以下< ;img src="パスとファイル名">

画像を挿入した後:

QQ截图20161011091631.png この時点で、フォントと画像の下端が揃っていることがわかります。配置方法を調整します

3. 画像の配置を調整するための属性を追加します配置を調整するには、align 属性を追加します。演習の上部と下部に相対的に追加できるパラメータは、下、中、上です。デフォルトは、フォントの左と右に相対的に追加できるパラメータです。デフォルトの左は右です

直接比較してみましょう:

<html>
<head>
    <title>image test</title>
    </head>
    <body background="./qwe.gif">
    <p>let's have an example<img src="./julizi.png"></p>
    <p> align top<img src="./julizi.png" align="top" ></p>
    <p>align middle<img src="./julizi.png" align="middle"></p>
    <p>align left<img src="./julizi.png" align="left" ></p>
    </body>
</html>

QQ截图20161011091656.png

4. 挿入された画像のサイズを調整しますほとんどのサイズは、直接挿入するとページ全体の効果が損なわれます。したがって、画像を挿入するときは、幅と高さの属性をタグに追加するだけで簡単に行うことができます。次に、上の写真を制御しましょう

width="80" height="80"

QQ截图20161011091717.png (もちろんフォントサイズも調整しました)

5. 画像マッピングを作成しますその前に、画像をリンクとして使用しようとしましたが、リンクをトリガーする方法は、画像上の任意の場所をクリックしてジャンプアドレスにリンクすることです。画像上の別の場所をクリックすると別の場所にジャンプすることを認識する必要があります。これは、画像から、クリック可能な領域を含む画像マップを作成できることを意味します。各領域はハイパーリンクです。関連するタグは、画像を指定するために使用される <map> タグと、ハイパーリンク領域を指定するために使用される <area> です。

<img src="xx.jpg" usemap="#mp"/>  
<map name="mp" id="mp">  
    <area>
    ...
    ...
    ...
    </area>  
</map>

ここでは、画像をマップとして使用します。<area> タグには、ハイパーリンク領域の形状、ハイパーリンク領域の座標を指定するために使用される、shape、coords、および href 属性が含まれます。とハイパーリンクのジャンプ位置をそれぞれ指定します。

これが具体的な実装内容です

<html>
<head>
    <title>image test</title>
    </head>
    <body background="./qwe.gif">
    <p>tap the li zi </p>
    <img src="./julizi.png" usemap="#lizi"/>
    <map name="lizi">
     <area shape="rect" coords="50,10,100,60" href="img.html" target="_blank"
    </map>  
    </body>
</html>

そして、子リスが育てた栗をクリックすると、複数の栗が表示されます

QQ截图20161011091743.png

shape属性の値は、rect（長方形）、circleです。（円）形状）、ポリ（多角形）、デフォルト（画像領域全体）。ここでは長方形を使用します。

coords 属性長方形の場合、coords にはコンマで区切られた 4 つの値があり、左上隅の x 座標、左上隅の y 座標、右下隅の x 座標、および長方形領域の右下隅の座標を取得する方法は次のとおりです。スクリーンショットツールを使用してください。

学び続ける

新しいファイル

<html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <body background="https://img.php.cn/upload/course/000/000/004/5839303f92197305.jpg"> <h3>图像背景</h3> <p>gif 和 jpg 文件均可用作 HTML 背景。</p> <p>如果图像小于页面，图像会进行重复。</p> </body> </html>

提出するリセットコード

自動運転