Wednesday 15 September 2010

Scrolling Text - Marquee HTML Code တုိ႔ အေၾကာင္း

ဒီအေၾကာင္းကုိ မေျပာခင္ သူ႔မွာ ရွိတဲ့ ကုဒ္ေတြရဲ႕ လုပ္ေဆာင္ခ်က္ေတြကုိအရင္ အတုိခ်ံဳးၿပီး ေျပာပါရေစ။ ဒါမွသာလွ်င္ ဒီကုဒ္ေတြကုိ မိမိလုိသလုိ ျပန္ျပီးေတာ့ လုပ္ေဆာင္ႏုိင္ဖုိ႔ အဆင္ေျပမွာပါ။
Marquee Attributes ေတြျဖစ္တဲ့

behavior ဟာ မိမိလႈပ္ရွားေစခ်င္တဲ့ စာေၾကာင္းရဲ႕ လႈပ္ရွားမႈ ကုိ ရည္ညြန္းတာပါ။ သူ႕ကုိ ဒီလုိပုံစံထားျပီးေတာ့ အသုံးျပဳၾကပါတယ္။

behavior="scroll"
behavior="alternate"
behavior="slide"
တခ်ိဳ႕ေသာ ကုဒ္ေတြဟာ Firefox မွာေတာ့ ျပႆနာမရွိတတ္ၾကေပမဲ့ Internet Explorer မွာေတာ့ တၾကိမ္သာ လႈပ္ျပီးေတာ့ ရပ္တန္႔တတ္ပါတယ္။

direction Attributes ေတြကေတာ့ မိမိေရးသားထားတဲ့ စာေၾကာင္းေလးေတြကုိ မိမိဆႏၵရွိရာသုိ႔ ဦးတည္ရာ ထည့္သြင္းေပးတာပါ။ သူ႔ကုိေတာ့

direction="left"
direction="right"
direction="up"
direction="down"
လုိသုံးျပီးေတာ့ ဘယ္မွညာ၊ ညာမွဘယ္၊ အေပၚမွေအာက္၊ ေအာက္မွ အေပၚဆုိျပီးေတာ့ သုံးတတ္ၾကပါတယ္။

ေနာက္ loop Attributes ကေတာ့ မိမိေရးသားထားတဲ့ စာေၾကာင္းေလးေတြကုိ ဆက္ခါဆက္ခါလုပ္ေဆာင္ဖုိ႔ အတုိင္းအတာ တခုသတ္မွတ္ေပးတဲ့ ေနရာမွာ သုံးပါတယ္။ ဥပမာ သူ႔ကုိ

loop="3"
လုိ႔ထားရင္ သူဟာ ၃ၾကိမ္သာလုပ္ျပီးေတာ့ ရပ္တန္႔သြားပါလိမ့္မယ္။ ဒီ value command ကုိ မထည့္ထားရင္ မိမိလုပ္ေဆာင္ထားတဲ့ စာသားေတြဟာ ဆက္တုိက္ဆုိသလုိ လုပ္ေနပါလိမ့္မယ္။ ထုိနည္းသူစြာဘဲ၊ ဒီ command ဟာ Firefox မွာအလုပ္မလုပ္ဘဲ အဆက္မျပတ္ ခုိင္းေစထားသလုိ ျဖစ္ေနမွာပါ။ ဒါကုိေတာ့ သတိထားရပါလိမ့္မယ္။

ေနာက္တခုကေတာ့ scrollamount နဲ႔ scrolldelay တုိ႔ပါဘဲ။ scrollamount ကေတာ့ pixels အလုိက္သြားတာပါ။ ကုိယ္က

scrollamount="1"
လု႔ိ ၁ ေပးထားလုိက္ရင္ pixels ၁ကြက္ျခင္း သြားမွာျဖစ္ျပီးေတာ့၊ သူ႔ရဲ႕ ပုံမွန္ ႏွန္းထားဟာ ၆ ျဖစ္ပါတယ္။ ၇၊ဂ၊ ၉ စသည္ျဖင့္ သုံးလာရင္ ပုိျမန္လာပါလိမ့္မယ္။

scrolldelay ကေတာ့ scroll လုပ္တဲ့ အခ်ိန္၂ခုၾကား ကာလကုိ ေႏွာင့္ေႏွးေစတာပါ။ ပုံမွန္ႏွန္းက ၈၅ ျဖစ္ျပီးေတာ့၊ သူ႕ထက္မ်ားလာေလ ေႏွးေလျဖစ္ျပီးေတာ့၊ သူ႕ထက္နည္းေလ ျမန္ေလပါဘဲ။ ဒါေပမယ့္ ၆၀ေအာက္ထိ ထားလုိ႔ မရပါဘူး၊ သူက ၆၀ ကုိျပန္လည္ သတ္မွတ္သြားပါလိမ့္မယ္။ ဒါကုိ ၆၀ေအာက္မွာ ထားခ်င္တယ္ဆုိရင္ truespeed ဆုိတာကုိ ထပ္မံသုံးစြဲရပါလိမ့္မယ္။ truespeed ကုိ false သုံးစြဲလုိက္တဲ့အတြက္ browser ေတြက ၆၀ ေအာက္ေရာက္သြားတာေတာင္ လက္ခံေပးပါတယ္။ မပါရင္ေတာ့ ၆၀ ကုိ ျပန္လည္လုိ႔ ေျပာင္းလဲ သတ္မွတ္လုိက္ပါတယ္။ Internet Explorer မွာ မိမိစားသားေတြကုိ zoom ပုံစံ lightning speed လုပ္ခ်င္ရင္ေတာ့ သူ႔ကုိ truespeed ကုိ true လုိ႔ထားေပးျပီးေတာ့ delay ကုိ ၂၀ ေလာက္ေပးရင္ရပါတယ္။ scrolldelay ကုိ ေႏွထားျပီးေတာ့၊ text scroll ကုိျမန္လုိက္တဲ့ အတြက္ေၾကာင့္ ျဖစ္သြားရတာပါ။

truespeed ကုဒ့္ကုိေတာ့ ဒီလုိ

truespeed="true"
truespeed="false"

သတ္မွတ္လုိ႔ သုံးစြဲရပါတယ္။

ေနာက္ခံအေရာက္ကုိေတာ့

bgcolor: rgb(255,0,0)">#အေရာင္ကုဒ့္"
လုိ႔ သုံးႏုိင္ျပီး၊ အက်ယ္နဲ႔အျမင့္ကုိေတာ့

height="50px"
height="80%"
နဲ႔

width="200px"
width="80%"
လုိ႔သုံးစြဲရမွာပါ။ ျပီးရင္ေတာ့ vertical space နဲ႔ horizontal space ကုိညိွရပါမယ့္။ သူ႔ကုိေတာ့ ဒီလုိေလးေပါ့ ...vertical space အတြက္

vspace="20px"
vspace="80%"
horizontal space အတြက္
hspace="20px"
hspace="80%"


vertical space ကေတာ့ အေပၚဘက္နဲ႔ေအာက္ဘက္ မွာရွိတဲ့ scrolling text ရဲ႕ စည္း၊ horizontal space မွာေတာ့ဘယ္ဘက္နဲ႔ ညာဘက္ျခမ္းကစည္းေတြ ကုိ pixels ဒါမွမဟုတ္ percentage သတ္မွတ္ခုိင္းေစလုိက္တာပါ။

ကဲ... အဲဒီကုဒ့္ေတြကုိ ျပန္စုျပီးေတာ့ လုပ္လုိက္ၾကေအာင္ ......

ပထမဆုံးအေနနဲ႔

<marquee bgcolor="#ffffcc">ပုံမွန္သုံးေနက် ညဘက္မွေန၍ ဘယ္ဘက္ျခမ္း</marquee>
ေရးၾကည့္မယ္ဆုိရင္

ပုံမွန္သုံးေနက် ညဘက္မွေန၍ ဘယ္ဘက္ျခမ္း

လုိေလးျမင္ရမွာပါ။ ေနာက္ သူ႕ကုဒ္ကုိ ဒီလုိေျပာင္းလုိက္ရင္




<marquee behavior="alternate" width="80%" bgcolor="#ffffcc">alternate behavior ကုိသုံးျပီးေတာ့ Bouncing textလုပ္တာေပါ့</marquee>


ဒီလုိျဖစ္တာေပါ့...

alternate behavior ကုိသုံးျပီးေတာ့ Bouncing text လုပ္တာေပါ့

ေဘးတုိက္ပုံစံ လုပ္ၾကည့္ျပီးသြားေတာ့ အေပၚကေနေအာက္၊ ေအာက္ကေန အေပၚဆုိရင္ေကာ..... အေပၚက စမ္းေရးထားတဲ့ ကုဒ္ေတြထဲက scrolldelay, direction, width, height ေလးေတြကုိ လုိသလုိ ေျပာင္းျပီးေတာ့


<marquee scrolldelay="150" direction="up" width="300px" height="400px" bgcolor="#ffffcc">စာလုံးေတြအေပၚကုိတတ္သြားမွာပါ။ ေနာက္တေၾကာင္းမွာ မိမိေရးထားေသာ စာေတြကုိေပၚေစခ်င္ရင္<p>နဲ႔</p> ၾကားထဲမွာေရးရပါမယ့္။</marquee>


ဒီလုိ လုပ္ရင္

စာလုံးေတြအေပၚကုိတတ္သြားမွာပါ။ ေနာက္တေၾကာင္းမွာ မိမိေရးထားေသာ စာေတြကုိေပၚေစခ်င္ရင္ <p>နဲ႔</p> ၾကားထဲမွာေရးရပါမယ့္။

အခုလုိေပၚတာေပါ့။ direction="up" မွာ direction="down" လုိ႔ ေျပာင္းျပီးေတာ့ ေရးလုိက္ရင္ေတာ့

စာလုံးေတြ ေအာက္ကုိဆင္းသြားမွာပါ။ ေနာက္တေၾကာင္းမွာ မိမိေရးထားေသာ စာေတြကုိေပၚေစခ်င္ရင္<p>နဲ႔</p> ၾကားထဲမွာေရးရပါမယ့္။


ဒီမွာ ကုိယ္က မိမိလုိရာ စာလုံးပုံစံ၊ အေရာင္၊ အထူ၊ အရြယ္အစား ေတြ ေျပာင္းမယ္ဆုိရင္ေတာ့


<span style="color: rgb(106, 251, 146); font-weight: bold; height="100px" font-family:ZawgyiOne; font-size:xx-large;" ><marquee direction="right" scrollamount="3" bgcolor="#333333">စာလုံးေတြဘယ္မွညာဆီကုိေပါ့</marquee></span>


လုိ႔ခံျပီးေတာ့ ေရးရပါ့မယ္။ ဒါဆုိရင္

စာလုံးေတြဘယ္မွညာဆီကုိေပါ့

ျဖစ္သြားျပီ။

ေနာက္ဆုံးတခုေျပာျပဖုိ႔က်န္ေနေသးတယ္။ အဲဒီေကာင္က Pause/Stop နဲ႔ Start a Scroll ဆုိတာပါ။ Pause/Stop နဲ႔ Start a Scroll ဆုိတာက mouse ကုိ လႈပ္ရွားေနတဲ့ စာလုံးေတြေပၚကုိတင္လုိက္ရင္၊ ထားရင္ အဲဒီ အတင္ခံထားရေသာ၊ အထားခံလုိက္ရတဲ့ စာသားမ်ား ေခတၱ ရပ္တန္႔ ေအာင္ထားရွိေစျပီး၊ mouse ကုိ ေနရာေရႊ႕လုိက္တဲ့အခါက်မွ ျပန္ျပီး အသက္၀င္လႈပ္ရွား ေစတာကုိ ဆုိလုိတာပါ။ သူ႕ကုိေတာ့

onmouseover="this.stop()" onmouseout="this.start()"

ခံျပီးေရးရပါမယ့္။ ဒီလုိေလး


<marquee bgcolor="#ffffcc" onmouseover="this.stop()" onmouseout="this.start()">mouse ကုိ ဒီကုိထားၾကည့္ပါ။</marquee>


ဒါဆုိရင္ အခုလုိျမင္ရျပီေပါ့။wink

mouse ကုိ ဒီကုိထားၾကည့္ပါ။

ရျပီလုိ႔ထင္ပါတယ္။ စမ္းၾကည့္ေပါ့။ လုပ္ရင္းကၽြမ္းက်င္လာမွာပါ။ နားမလည္ေသးရင္ေျပာပါ။ ထပ္ရွင္းျပပါ့မယ္။ ေနာက္မွ Numbered List, Bulleted List တုိ႔ကုိ ဘယ္လုိ ဒီကုဒ္ေတြထဲမွာ ထည့္မလဲ ဆုိတာကုိေပါ့။ အခုေတာ့ အိပ္ရေတာ့မယ္ မနက္ ၂နာရီရွိေတာ့မယ္။ ဂနာရီ class ကုိအမွီေၿပးရအုံးမွာဆုိေတာ့ စာလုံးေပါင္းေတြ၊ ၀ါက်ေတြကုိ ေနာက္မွ ေသခ်ာျပန္ဖတ္ျပီးျပင္ေတာ့မယ္။ အခုေတာ့

0 comments:

Post a Comment