HTML畫像
一般的に私たちが使用するのは、畫像を挿入することです。主に畫像を背景として使用し、次に畫像をリンクとして使用します。関連するタグは <img> 次に、理解を深めていくために HTML ファイルを作成します。まず、ブラウザを使用して、Web ページ上のいくつかの畫像をダウンロードします (HTML ファイルと同じフォルダーに置きます)。後で使用します。
1. まず、Webページの背景畫像として畫像を設(shè)定します 背景畫像を追加するには、body屬性にbackground屬性を追加します
たとえば、次のように畫像を挿入します。以下< ;img src="パスとファイル名">
畫像を挿入した後:
この時(shí)點(diǎn)で、フォントと畫像の下端が揃っていることがわかります。配置方法を調(diào)整します
3. 畫像の配置を調(diào)整するための屬性を追加します 配置を調(diào)整するには、align 屬性を追加します。 演習(xí)の上部と下部に相対的に追加できるパラメータは、下、中、上です。デフォルトは、フォントの左と右に相対的に追加できるパラメータです。デフォルトの左は右です
直接比較してみましょう:
<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>
4. 挿入された畫像のサイズを調(diào)整します ほとんどのサイズは、直接挿入するとページ全體の効果が損なわれます。したがって、畫像を挿入するときは、幅と高さの屬性を タグに追加するだけで簡単に行うことができます。 次に、上の寫真を制御しましょう
width="80" height="80"
(もちろんフォントサイズも調(diào)整しました)
5. 畫像マッピングを作成します その前に、畫像をリンクとして使用しようとしましたが、リンクをトリガーする方法は、畫像上の任意の場所をクリックしてジャンプ アドレスにリンクすることです。畫像上の別の場所をクリックすると別の場所にジャンプすることを認(rèn)識(shí)する必要があります。これは、畫像から、クリック可能な領(lǐng)域を含む畫像マップを作成できることを意味します。各領(lǐng)域はハイパーリンクです。関連するタグは、畫像を指定するために使用される <map> タグと、ハイパーリンク領(lǐng)域を指定するために使用される <area> です。
<img src="xx.jpg" usemap="#mp"/> <map name="mp" id="mp"> <area> ... ... ... </area> </map>
ここでは、畫像をマップとして使用します。<area> タグには、ハイパーリンク領(lǐng)域の形狀、ハイパーリンク領(lǐng)域の座標(biāo)を指定するために使用される、shape、coords、および href 屬性が含まれます。とハイパーリンクのジャンプ位置をそれぞれ指定します。
これが具體的な実裝內(nèi)容です
<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>
そして、子リスが育てた栗をクリックすると、複數(shù)の栗が表示されます
shape屬性の値は、rect（長方形）、circleです。 （円）形狀）、ポリ（多角形）、デフォルト（畫像領(lǐng)域全體）。ここでは長方形を使用します。
coords 屬性 長方形の場合、coords にはコンマで區(qū)切られた 4 つの値があり、左上隅の x 座標(biāo)、左上隅の y 座標(biāo)、右下隅の x 座標(biāo)、および長方形領(lǐng)域の右下隅の座標(biāo)を取得する方法は次のとおりです。スクリーンショット ツールを使用してください。
