HTML ရုပ်ပုံမြေပုံများ
HTML ရုပ်ပုံမြေပုံများဖြင့်၊ သင်သည် ပုံတစ်ပုံပေါ်တွင် ကလစ်နှိပ်နိုင်သော နေရာများကို ဖန်တီးနိုင်သည်။
ပုံမြေပုံများ
HTML <map>tag သည် ပုံမြေပုံတစ်ခုကို သတ်မှတ်သည်။ ပုံမြေပုံသည် ကလစ်နှိပ်နိုင်သော နေရာများပါရှိသော ရုပ်ပုံဖြစ်သည်။ <area>ဧရိယာ များကို တဂ် တစ်ခု သို့မဟုတ် တစ်ခုထက်ပို၍ သတ်မှတ်သည် ။
အောက်ပါပုံရှိ ကွန်ပျူတာ၊ ဖုန်း သို့မဟုတ် ကော်ဖီခွက်ကို နှိပ်ကြည့်ပါ။
ဥပမာ
ဤသည်မှာ အထက်ဖော်ပြပါ ပုံမြေပုံအတွက် HTML အရင်းအမြစ်ကုဒ်ဖြစ်သည်
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
<map name="workmap">
<area shape="rect" coords="34,44,270,350"
alt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250"
alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44"
alt="Coffee" href="coffee.htm">
</map>
ဤအရာဘယ်လိုအလုပ်လုပ်လဲ?
ပုံမြေပုံ၏နောက်ကွယ်ရှိ အယူအဆမှာ သင်နှိပ်လိုက်သည့်နေရာတွင် ပုံပေါ် မူတည်၍ ကွဲပြားသောလုပ်ဆောင်ချက်များကို လုပ်ဆောင်နိုင်သင့်သည်။
ပုံမြေပုံတစ်ခုဖန်တီးရန် ရုပ်ပုံတစ်ပုံနှင့် နှိပ်နိုင်သောနေရာများကို ဖော်ပြသည့် HTML ကုဒ်အချို့ လိုအပ်ပါသည်။
ပုံရိပ်
ပုံအား <img>tag ဖြင့် ထည့်သွင်းထားသည်။ အခြားပုံများနှင့် ကွာခြားချက်မှာ သင်သည် usemapattribute တစ်ခုထည့်ရမည်ဖြစ်သည်-
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
တန်ဖိုး သည် ရုပ်ပုံမြေပုံ၏အမည်နောက်တွင် usemapဟက်ဂ်တဂ်တစ်ခုဖြင့် စတင်ပြီး
#ပုံနှင့် ရုပ်ပုံမြေပုံကြား ဆက်စပ်မှုကို ဖန်တီးရန် အသုံးပြုသည်။
အကြံပြုချက်- မည်သည့်ပုံကိုမဆို ပုံမြေပုံတစ်ခုအဖြစ် သင်အသုံးပြုနိုင်ပါသည်။
ပုံမြေပုံဖန်တီးပါ။
ထို့နောက် <map>ဒြပ်စင်တစ်ခုထည့်ပါ။
ရုပ်ပုံ <map>မြေပုံဖန်တီးရန် ဒြပ်စင်ကို အသုံးပြုပြီး လိုအပ်သော name
အရည်အချင်းကို အသုံးပြုခြင်းဖြင့် ပုံနှင့် ချိတ်ဆက်ထားသည်။
<map name="workmap">
attribute သည် 's attribute nameနှင့် တူညီသောတန်ဖိုးရှိရပါမည်
။<img>usemap
နယ်မြေများ
ထို့နောက် နှိပ်နိုင်သော နေရာများကို ပေါင်းထည့်ပါ။
နှိပ်နိုင်သော ဧရိယာကို ဒြပ်စင်တစ်ခု အသုံးပြု၍ သတ်မှတ်သည် <area>။
ပုံသဏ္ဍာန်
နှိပ်နိုင်သော ဧရိယာ၏ ပုံသဏ္ဍာန်ကို သင်သတ်မှတ်ရမည်ဖြစ်ပြီး ဤတန်ဖိုးများထဲမှ တစ်ခုကို သင်ရွေးချယ်နိုင်သည်-
rect- စတုဂံဒေသကို သတ်မှတ်သည်။circle- စက်ဝိုင်းဧရိယာကိုသတ်မှတ်သည်။poly- ဗဟုဂံဒေသကို သတ်မှတ်သည်။default- ဒေသတစ်ခုလုံးကို သတ်မှတ်ပါတယ်။
ပုံပေါ်တွင် ကလစ်နှိပ်နိုင်သော ဧရိယာကို နေရာချနိုင်စေရန် သြဒီနိတ်အချို့ကိုလည်း သင်သတ်မှတ်ရပါမည်။
ပုံသဏ္ဍာန် = မှန်သည်
သြဒိနိတ် shape="rect"များသည် အတွဲများဖြစ်ပြီး၊ x-ဝင်ရိုးအတွက် တစ်ခုနှင့် y-ဝင်ရိုးအတွက် တစ်ခု။
ထို့ကြောင့်၊ သြဒီနိတ် 34,44များသည် ဘယ်ဘက်အနားသတ်မှ 34 pixels နှင့် ထိပ်မှ 44 pixels ရှိသည်-
သြဒီနိတ် 270,350များသည် ဘယ်ဘက်အနားသတ်မှ 270 pixels နှင့် ထိပ်မှ 350 pixels တည်ရှိသည်-
ယခု ကျွန်ုပ်တို့တွင် ကလစ်နှိပ်နိုင်သော စတုဂံဧရိယာကို ဖန်တီးရန် လုံလောက်သောဒေတာရှိသည်။
ဥပမာ
<area shape="rect" coords="34, 44, 270, 350" href="computer.htm">
၎င်းသည် ကလစ်နှိပ်၍ရနိုင်သော ဧရိယာဖြစ်ပြီး အသုံးပြုသူကို "computer.htm" စာမျက်နှာသို့ ပေးပို့လိမ့်မည်-
ပုံသဏ္ဍာန် = "စက်ဝိုင်း"
စက်ဝိုင်းဧရိယာထည့်ရန်၊ စက်ဝိုင်း၏အလယ်ဗဟို၏ သြဒီနိတ်များကို ဦးစွာရှာပါ။
337,300
ထို့နောက် စက်ဝိုင်း၏ အချင်းဝက်ကို သတ်မှတ်ပါ။
44 ပစ်ဇယ်
ယခုတွင် နှိပ်နိုင်သော စက်ဝိုင်းဧရိယာကို ဖန်တီးရန် သင့်တွင် ဒေတာအလုံအလောက်ရှိသည်။
ဥပမာ
<area shape="circle" coords="337, 300, 44" href="coffee.htm">
၎င်းသည် နှိပ်၍ရနိုင်သော ဧရိယာဖြစ်ပြီး အသုံးပြုသူကို "coffee.htm" စာမျက်နှာသို့ ပေးပို့လိမ့်မည်-
ပုံသဏ္ဍာန် = "ပိုလီ"
shape="poly"မျဉ်းဖြောင့်များ (ပိုလီဂွန်) ဖြင့် ဖွဲ့စည်းထားသော ပုံသဏ္ဍာန်ကို ဖန်တီးပေးသည့် သြ ဒီ နိတ်အမှတ်များစွာ ပါရှိသည်။
မည်သည့်ပုံသဏ္ဍာန်ကိုမဆို ဖန်တီးရန် ဤအရာကို အသုံးပြုနိုင်သည်။
croissant ပုံစံကဲ့သို့ ဖြစ်နိုင်သည်။
အောက်ပုံပါ croissant ကို ကလစ်နိုင်သော လင့်ခ်တစ်ခု ဖြစ်လာအောင် မည်သို့ ပြုလုပ်နိုင်မည်နည်း။
croissant ၏အစွန်းအားလုံးအတွက် x နှင့် y သြဒိနိတ်များကို ကျွန်ုပ်တို့ ရှာဖွေရပါမည်-
သြဒီနိတ်များသည် အတွဲများ၊ x-ဝင်ရိုးအတွက် တစ်ခုနှင့် y-axis အတွက် တစ်ခုဖြစ်သည်။
ဥပမာ
<area shape="poly" coords="140,121,181,116,204,160,204,222,191,270,140,329,85,355,58,352,37,322,40,259,103,161,128,147" href="croissant.htm">
၎င်းသည် ကလစ်နှိပ်၍ရနိုင်သော ဧရိယာဖြစ်ပြီး အသုံးပြုသူကို "croissant.htm" စာမျက်နှာသို့ ပေးပို့လိမ့်မည်-
ပုံမြေပုံနှင့် JavaScript
နှိပ်နိုင်သော ဧရိယာသည် JavaScript လုပ်ဆောင်ချက်ကိုလည်း အစပျိုးနိုင်သည်။
JavaScript လုပ်ဆောင်ချက်ကို လုပ်ဆောင်ရန် ဒြပ်စင်သို့ clickဖြစ်ရပ်တစ်ခု ထည့်ပါ -<area>
ဥပမာ
ဤနေရာတွင်၊ ဧရိယာကိုနှိပ်လိုက်သောအခါတွင် JavaScript လုပ်ဆောင်ချက်ကိုလုပ်ဆောင်ရန် onclick attribute ကိုအသုံးပြုသည်-
<map name="workmap">
<area shape="circle" coords="337,300,44"
href="coffee.htm" onclick="myFunction()">
</map>
<script>
function
myFunction() {
alert("You clicked the coffee cup!");
}
</script>
အခန်းအကျဉ်းချုပ်
<map>ပုံမြေပုံတစ်ခုကို သတ်မှတ်ရန် HTML အစိတ်အပိုင်းကို အသုံးပြု ပါ။<area>ပုံမြေပုံရှိ ကလစ်နှိပ်နိုင်သော နေရာများကို သတ်မှတ်ရန် HTML အစိတ်အပိုင်းကို အသုံးပြု ပါ။- ပုံမြေပုံကိုညွှန်ပြရန် element ၏ HTML
usemapအရည်အချင်းကို သုံးပါ။<img>
HTML ပုံတဂ်များ
| Tag | Description |
|---|---|
| <img> | Defines an image |
| <map> | Defines an image map |
| <area> | Defines a clickable area inside an image map |
| <picture> | Defines a container for multiple image resources |
ရနိုင်သော HTML တဂ်များ အားလုံး၏ စာရင်းအပြည့်အစုံအတွက်၊ ကျွန်ုပ်တို့၏ HTML Tag အကိုးအကားကို ဝင်ရောက်ကြည့်ရှု ပါ။