Saw San : Blog

ကျနော်ဆိုဒ်မှာ သုံးထားတဲ့ 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>