HTML <img> แบตติก
Paglalarawan at Paggamit
<img> Ang tag ay ginagamit upang imbukod ang imahen sa pahina ng HTML.
Sa teknikal na aspeto, wala talagang inilagay ang imahen sa pahina, kundi inilink ang imahen sa pahina.<img> Ang tag ay gumawa ng isang container na ginagamit upang ipakita ang imahen.
<img> Ang tag ay may dalawang kinakailangang atryibo:
- src - Tinutukoy ang linya ng imahen
- alt - Kung ang imahen ay hindi maipakita ng dahil sa anumang dahilan, tukoy ang alternatibong teksto ng imahen.
Pansin:Bilang karagdagan, palaging kailangang tukoy ang lapad at taas ng imahen. Kung hindi naitutukoy ang lapad at taas, maaaring magblingk bling ang pahina kapag inilagay ang imahen.
Mga payo:Kung nais mong itakpan ang imahen sa ibang dokumento, ilagay lamang ang <img> Ang tag ay nakakabit sa <a> Sa loob ng tag (tingnan ang sumusunod na halimbawa).
Mga ibang basahin:
HTML Tutorial:HTML รูปภาพ
HTML DOM Reference Manual:Image Object
CSS Tutorial:Iset ng estilo ng imahen
Mga dagdag na pagbabasa:Paano maipapakilala nang tama ang imahen
Halimbawa
Halimbawa 1
Sa mga sumusunod na halimbawa, ilagay namin ang larawan ng tulip sa Shanghai Flower Port na ginawa ng mga inhinyero ng CodeW3C.com:
<img src="tulip.jpg" alt="Shanghai Flower Port - Tulip" />
Halimbawa 2
Isa pang halimbawa kung paano ilagay ang imahen:
<img src="dancer.png" alt="Dancer" width="500" height="749">
Mga payo:Nagbibigay ng mas maraming halimbawa sa ibaba ng pahina.
Atryibo
| Atryibo | Halaga | Paglalarawan |
|---|---|---|
| alt | Teksto | Tinutukoy ang alternatibong teksto ng imahen. |
| crossorigin |
|
Pinapayagan ang paggamit ng imahen mula sa pangalawang website na pinapayagan ang cross-origin access kasama ang canvas (canvas). |
| height | Pixel | Tinutukoy ang taas ng imahen. |
| ismap | ismap | Tinutukoy ang imahen bilang imahen na mula sa server-side image mapping. |
| loading |
|
Tinutukoy kung ang browser ay dapat agad na ilagay ang imahen o pagkatapos ng ilang kundisyon. |
| longdesc | URL | Tinutukoy ang URL na naglalayong detalyadong paglalarawan ng imahen. |
| referrerpolicy |
|
Tinutukoy ang mga impormasyon na gagamitin kapag kinukuha ang imahen. |
| sizes | Sukat | Tinutukoy ang sukat ng imaheng gamit ang iba't ibang pormat ng pahina. |
| src | URL | Tinutukoy ang linya ng imaheng. |
| srcset | URL-list | Tuturing ang listahan ng mga file ng imahe na gagamitin sa iba't ibang sitwasyon. |
| usemap | #mapname | Tuturing ang imahe bilang map ng client-side image map. |
| width | Pixel | Tuturing ang lapad ng imahe. |
Mga pangkalahatang katangian
<img> Ang tag ay sumusuporta sa Mga pangkalahatang katangian sa HTML。
Mga katangian ng pangyayari
<img> Ang tag ay sumusuporta sa Mga katangian ng pangyayari sa HTML。
Higit pang mga halimbawa
Halimbawa 3
Pag-aayos ng pagsasama ng imahe (gamit ang CSS):
<img src="flower.gif" alt="[#1#]" width="90" height="90" style="vertical-align:bottom"> <img src="flower.gif" alt="[#1#]" width="90" height="90" style="vertical-align:middle"> <img src="flower.gif" alt="[#1#]" width="90" height="90" style="vertical-align:top"> <img src="flower.gif" alt="[#1#]" width="90" height="90" style="float:right"> <img src="flower.gif" alt="[#1#]" width="90" height="90" style="float:left">
Halimbawa 4
Magdagdag ng pagbukas ng layo sa imahe (gamit ang CSS):
<img src="flower.gif" alt="[#1#]" style="border:5px solid black">
Halimbawa 5
Magdagdag ng magkalabang pagbabahagi ng layo sa imahe (gamit ang CSS):
<img src="flower.gif" alt="[#1#]" style="vertical-align:middle;margin:0px 50px">
Halimbawa 6
Magdagdag ng itaas, pababa at labas na pagbabahagi ng layo sa imahe (gamit ang CSS):
<img src="flower.gif" alt="[#1#]" style="vertical-align:middle;margin:50px 0px">
Halimbawa 7
Kung paano magdagdag ng imahe mula sa ibang folder o sa ibang websayt:
<img src="/photo/flower.gif" alt="Flower" width="180" height="180"> <img src="https://www.codew3c.com/photo/tree.png" alt="Tree" width="150" height="161">
Halimbawa 8
Paano magdagdag ng hyperlink sa imahe:
<a href="https://www.codew3c.com"> <img src="w3logo.png" alt="codew3c.com" width="400" height="225"> </a>
Halimbawa 9
Paano gumawa ng imahe na may clickable na lugar sa image map. Bawat lugar ay isang hyperlink:
<img src="life.png" alt="Life" usemap="#lifemap" width="650" height="451"> <map name="lifemap"> <area shape="rect" coords="10,208,155,338" alt="AirPods" href="airpods.html"> <area shape="rect" coords="214,65,364,365" alt="iPhone" href="iphone.html"> <area shape="circle" coords="570,291,75" alt="Coffee" href="coffee.html"> </map>
Malawak na pagbabasa - Paano maayos na gamitin ang mga imahe
Ang isa sa pinakamalaking katangian ng HTML at XHTML, ay ang kakayahan na kasama ang imahe sa teksto ng dokumento, maaari itong gawing pangloob na bagay ng dokumento (inline imahe), o bilang isang hiwalay na dokumento na ma-download sa pamamagitan ng hyperlink, o bilang background ng dokumento.
Ang pagkatuklas ng imahe (mga static na o may epekto ng animasyon na ikon, litrato, paliwanag, sining, at iba pa) sa laman ng dokumento ay magiging mas mabuhay at mas nakakakuha, at mas maayos na tingnan, mas maikling pagbabasa at mas maipapakita ng impormasyon.
Gayunpaman, kung labis na gamitin ang mga imahe, ang dokumento ay magiging labis na maghihiwalay, magulo at mahirap basahin, at magdagdag ng maraming hindi kinakailangang paghihintay ng mga gumagamit sa pagdownload at pagtingin ng pahina.
Basa ang sumusunod na artikulo, upang matutunan ang dalawang pangunahing format ng imahe sa Web: GIF at JPEG, at kung paano maayos na gamitin ang mga imahe:
Ang default na CSS na setting
Karamihan ang mga browser ay magpapakita ng mga sumusunod na default na halaga <img> องค์ประกอบ：
img {
display: inline-block;
}
การสนับสนุนเบราเซอร์
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| สนับสนุน | สนับสนุน | สนับสนุน | สนับสนุน | สนับสนุน |
