Html Map

က်ေနာ္ဆုိဒ္မွာ သုံးထားတဲ့ html map နဲ႔ ပါတ္သက္လုိ႔ က်ေနာ့ကုိ pm ကေနေမးထားတာ ၂ ေယာက္ေလာက္ေတာ့ရွိတယ္။ အခုေတာ့ အဲ့ဒါသုံးပုံေလးကုိ ေရးေပးလုိက္ပါပီ။


<usemap="#Follow" border="0" height="16" width="95">
<map name="Follow" id="Follow">
<area shape="rect" coords="0,0,16,16" href="http://feeds.sawsan.com/rss" target="_blank">
ဒီ ပထမဆုံးပုံအတြက္ coords သက္မွတ္ပုံက

၁။ ပုံရဲ႕ ဘယ္ဘက္ကေန စၿပီး mouse area ဘယ္ေလာက္ခ်န္မလဲလုိ႔ ဆုိလုိတာ အစဦးဆုံးပုံရဲ႕ ဘယ္ဘက္အစျဖစ္တဲ့အတြက္ 0 က စလုိက္ပါတယ္၊
၂။ ပုံရဲ႕ အေပၚကေန စၿပီး mouse area ဘယ္ေလာက္ခ်န္မလဲလုိ႔ ဆုိလုိတာ ပုံရဲ႕ အေပၚပုိင္းမွာ ခ်န္သေလာက္ area ကုိ mouse ေထာက္လုိ႔ မရပါဘူး၊ ဒါေၾကာင့္ top က ပုံတုိင္းမွာ 0

ပဲထားလုိက္ပါတယ္၊ ဒီေနရာမွာ ပုံတည္ေဆာက္ပုံအေပၚ မူတည္ၿပီး ေျပာင္းလဲႏုိင္ပါတယ္။ ပုံရဲ႕ အေပၚပုိင္းမွာ ပုံအသားကေန ေနရာလြတ္ခ်န္ထားခဲ့မယ္ဆုိရင္ ပုံအသားေပၚ ေရာက္မွ ေမာက္ arrow

ေပၚေစခ်င္တာဆုိရင္ ဒီေနရာမွာ area ကုိ ပုံဖန္တီးစဥ္က အေပၚပုိင္းမွာ ခ်န္ခဲ့သေလာက္ area သက္မွတ္ႏုိင္ပါတယ္၊
၃။ ဘယ္ဘက္ကေန စၿပီး mouse ေထာက္ဖုိ႔ရာ ညာဘက္အဆုံး area ဘယ္ေလာက္ထားမလဲလုိ႔ ဆုိလုိတာပါ။ အစဆုံးပုံျဖစ္တာရယ္၊ ပုံကုိ 16 width, 16 height သက္မွတ္ထားတာရယ္ေၾကာင့္ 16

လုိ႔သက္မွတ္လုိက္ပါတယ္၊
၄။ ပုံရဲ႕ အေပၚကေန စၿပီး ေအာက္ကုိ mouse ေထာက္ဖုိ႔ area ဘယ္ေလာက္ထားမလဲလုိ႔ ဆုိလုိတာပါ။ ပုံရဲ႕ height က 16 မုိ႔ 16 ပဲထားလုိက္ပါတယ္။
ပုံတစ္ပုံရဲ႕ coord သက္မွတ္တဲ့ေနရာမွာ ဘယ္၊ ေပၚ၊ ညာ၊ ေအာက္ အဲ့လုိ အစဥ္အတုိင္းသြားပါတယ္။

<area shape="rect" coords="20,0,36,16" href="http://twitter.com/sawsan" target="_blank">
ဒါက၂ ပုံေျမာက္အတြက္..
၁။ ဒီေနရာမွာ coords 20 လုိ႔ သက္မွတ္တာက ဒုတိယပုံအတြက္ mouse စေထာက္ရမယ့္ အကြာအေ၀းကုိဆုိလုိတာပါ။
ဒီလုိဗ်ာ ပထမပုံရဲ႕ width က 16 ရွိတယ္၊ ပုံတစ္ခုနဲ႔ တစ္ခုခုအကြာအေ၀းက 4 သက္မွတ္ထားတာဆုိေတာ့ ဒုတိယပုံရဲ႕အစက 20 နဲ႔ စရေတာ့တာေပါ့။
၂။ 0 ကေတာ့ အေပၚ area မုိ႔ 0 ပဲမေျပာင္းေတာ့ပါဘူး။
၃။ 36 လုိ႔ ထားရသက္မွတ္ရတာက ပုံရဲ႕ ဘယ္ဘက္ကေန mouse ေထာက္လာလုိက္ရင္ ညာဘက္အဆုံးက 36 မွာဆုံးရမွာမုိ႔ေပါ့။
ဒီလုိေလ အစပုံက width 16 ရွိတယ္ ၾကားအကြာအေဝးက  4 ရွိမယ္၊ ခု ဒုတိယပုံရဲ႕ width ကလည္း 16 ရွိမယ္၊ ဒါဆုိေတာ့ ဒုတိယပုံရဲ႕ ညာဘက္အဆုံးက 16+4+16 ဆုိေတာ့ 36 ေပါ့။
၄။ ပုံတစ္ပုံရဲ႕ အေပၚကေန ေအာက္ကုိ mouse သြားလုိ႔ရမယ္ area ကုိ ဆုိလုိတာ၊ ဒါကေတာ့ ပုံတုိင္းကုိ height 16 သက္မွတ္ထားတဲ့အတြက္ အေျပာင္းအလဲ မရွိေတာ့ပါဘူး။ height ကုိ

တစ္ညီတည္းသာ ထားခဲ့ရင္ အေပၚနဲ႔ ေအာက္က ေျပာင္းလဲဖုိ႔ မလုိပါဘူး။ ဘယ္ညာပဲ နည္းနည္းစီျပင္ျပင္သြားရတာ။

<area shape="rect" coords="40,0,56,16" href="http://www.facebook.com/sawsan23" target="_blank">
ဒါက ၃ပုံေျမာက္အတြက္..
၁။ ဒီမွာက် coord ရဲ႕ ဘယ္ အစက မ်ားလာပီ၊ တြက္ၾကည့္ရေအာင္..
ပထမပုံနဲ႔ ဒုတိယပုံက ဒီလုိသြားထားတယ္ 16+4+16+4
ဒါဆုိေတာ့ တတိယပုံရဲ႕ အစက 40 ျဖစ္သြားတယ္။ ရွင္းရဲ႕လားေတာ့ မသိဘူး.. ရႈပ္သြားရင္ ေနာက္တစ္ေခါက္ျပန္ဖတ္ ဟီးး..
၂။ အေပၚပုိင္းကေတာ့ height အညီထားခဲ့တာမုိ႔ 0 ပဲထားပါမယ္။
၃။ ညာဘက္ အဆုံး တတိယပုံရဲ႕ ညာဘက္အဆုံး 56 လုိ႔ သက္မွတ္လုိက္တယ္။ ဘယ္လုိေၾကာင့္လဲ၊ ထပ္တြက္ၾကည့္ေအာင္..
ဒီ တတိယပုံရဲ႕ အစက 40 ေလ ပုံတစ္ပုံျခင္းဆီရဲ႕ width က 16 အညီထားခဲ့တာဆုိေတာ့ 40+16 = 56 ေပါ့ :)
၄။ အေပၚေအာက္ အကြာအေဝးကေတာ့ 16 ပဲေပါ့။ ပုံတုိင္းရဲ႕ height တူတာကိုး။

<area shape="rect" coords="60,0,76,16" href="http://www.youtube.com/user/sawsan23" target="_blank">
ဒါကေတာ့ ၄ပုံေျမာက္အတြက္..
၁။ coord အစက 60 ဘာလုိ႔လဲဆုိေတာ့ တတိယပုံအဆုံးက 56 ေလ ပုံတစ္ခုနဲ႔ တစ္ခုအကြာအေဝးက 4 ဆုိေတာ့ 60 ေပါ့။
၂။ အေပၚအတြက္ေတာ့ 0 ပဲ သက္မွတ္ပါတယ္။
၃။ အခု ၄ ပုံေျမာက္ရဲ႕ ညာဘက္အဆုံးဘယ္ေလာက္လဲဆုိေတာ့ 76 ဆုိတာက အစက 60 ေလ ပုံရဲ႕ width က 16 အဲ့ေတာ့ 76 ေပါ့။
၄။ အေပၚကေန ေအာက္ကုိ 16 ပါပဲ။


<area shape="rect" coords="80,0,96,16" href="http://www.google.com/ig/add?feedurl=http://feeds.sawsan23.tk/" target="_blank">
</map>
ဒါကေတာ့ ေနာက္ဆုံး ၅ ပုံေျမာက္အတြက္ပါ
၁။ corrds မွာအစမွာ 80 သက္မွတ္တာက ၄ ပုံေျမာက္ရဲ႕ အဆုံးက 76 ေလ  ပုံတစ္ခုနဲ႔ တစ္ခုအကြာအေဝးက 4 ဆုိေတာ့ 80 ေပါ့။
၂။ ပုံရဲ႕ အေပၚ area အပုိ မထားခဲ့တဲ့အတြက္ 0 ပါပဲ။
၃။ ဒါက ေနာက္ဆုံးပုံရဲ႕ ညာဘက္အဆုံးဆုိေတာ့ ပုံ width ကုိေရးလုိက္ရင္ရပီပဲ။ ဒါေပသိ ပုံမွန္အတုိင္းေပါင္းလုိက္ရင္ေတာ့
အခု ေနာက္ဆုံးပုံရဲ႕ အစက 80 သက္မွတ္ထားတယ္၊ ပုံရဲ႕ေလးေတြရဲ႕ width က 16 ဆုိေတာ့ 96 ေပါ့။
၄။ ပုံရဲ႕ အေပၚကေန ေအာက္ area ကေတာ့ ပုံ height ကုိ 16 ေတြပဲထားတဲ့အတြက္ 16 ပါပဲ မေျပာင္းလဲပါဘူး။
က်ေနာ္လုပ္ထားတာေတာ့ အဲ့အတုိင္းဗ် စိတ္၀င္စားရင္ လုပ္ၾကည့္ပါဦး မရရင္ေတာ့ ေျပာဗ်။
က်ေနာ့ဆုိဒ္မွာ သုံးထားတဲ့ code အျပည့္အစုံက ..
<img src="https://lh6.googleusercontent.com/-a5UAaGFWfpQ/TkGLCmkuzAI/AAAAAAAAAL4/ZZSK2WVjOqA/h120/rtfeg.png"
usemap="#Follow" border="0" height="16" width="95">
<map name="Follow" id="Follow">
<area shape="rect" coords="0,0,16,16" href="http://sawsan23.com/feed" target="_blank">
<area shape="rect" coords="20,0,36,16" href="https://twitter.com/#%21/sawsan9one" target="_blank">
<area shape="rect" coords="40,0,56,16" href="http://www.facebook.com/pages/Mg-Saw-San/265218380736" target="_blank" "="">
<area shape="rect" coords="59,0,76,17" href="http://www.edinooyin.com/profile/sawsan" target="_blank">
<area shape="rect" coords="79,0,96,16" href="https://plus.google.com/104265228188213408928#104265228188213408928/about" target="_blank">
</map>