با سلام. امروز یكی از پر كاربرد ترین كدهای موجود در وب را معرفی می كنیم. این كد متن مورد نظر شما را به حركت در می آورد. در ادامه ی مطلب آموزشی بسیار كامل تقدیمتان خواهد شد. پس با ما همراه باشید.
عمل كرد كد در مرورگرها (نرم افزار های تماشای سایت)
| نگارش | مرورگر | عمل می كند/نمی كند |
| 7.0 | Internet Explorer |  |
| 3.0 | Mozilla Firefox (beta) | |
| 9.0 | Netscape | |
نظر یادتون نره
خوب. حالا با همدیگه قدم به قدم می ریم جلو تا با جزئیات این كد بیشتر آشنا بشیم. كد اصلی این شكلیه:| <marquee> TEXT</marquee> |
شما باید توی كد بالا به جای عبارت "TEXT" متنی كه می خواهید حركت كند را وارد نمایید. خروجی كد بالا به شكل زیر است.
حالا امكان داره كه شما بخواهید سرعتی رو برای این متن در نظر بگیرید. پس كد به شكل زیر تغییر می كنه:| <marquee scrollamount="1" scrolldelay="20"> TEXT </marquee> |
در كد بالا در عبارت scrollamount="1" به جای عدد 1 سرعت حركت را مشخص می كنید. هرجه این عدد بزرگتر باشد سرعت حركت بیشتر است. همچنین در عبارت scrolldelay="20" به جای عدد 20 تاخیر لازم برای طی شدن مسیر توسط متن را وارد كنید. در كل باید روی این مقادیر كمی كار كرده و آن را تست كنید تا حركت مورد علاقه را بدست آورید. خروجی كد بالا با مقادیر scrollamount="1" scrolldelay="20" به شكل زیره:
حال شاید بخواهید برای متن متحرك خود اندازه، رنگ و قلم در نظر بگیرید. حالا كد این شكلی میشه:| <marquee scrollamount="1" scrolldelay="20" style="font-family: Tahoma; font-size: 10pt; color: red"> TEXT </marquee> |
خوب… شاید كمی پیچیده به نظر برسه. اما اصلا اینطوری نیست. به جای عبارت های Tahoma و 10pt وred به ترتیب فونت نوشته، سایز نوشته و رنگ نوشته را مشخص نمایید. خروجی كد بالا به شكل زیره:
ممكنه نوشته ی شما فارسی باشه. در این صورت بهتره كه از راست به چپ حركت كنه. یا این كه شاید شما مایل باشید نوشتتونه از بالا به پایین یا از پایین به بالا حركت كنه. پس یك تغییر دیگه توی كد به وجود میاد:| <marquee scrollamount="1" scrolldelay="20" style="font-family: Tahoma; font-size: 10pt; color: red" direction="right"> TEXT </marquee> |
در كد بالا در عبارت direction="right" به جای كلمه ی right جهت حركت را مشخص فرمایید. (up: پایین به بالا، down: بالا به پایین، left: راست به چپ، right: چپ به راست) خروجی كد بالا به شكل زیره:
شاید شما بخواهید دور Marquee مورد نظر خود، به اصطلاح Border بكشید. یعنی خطی دور تا دورش كشیده شود. حالا باز هم یك بخش دیگه به كدتون اضافه میشه:| <marquee scrollamount="1" scrolldelay="20" style="border:1px solid #FF0000; font-family: Tahoma; font-size: 10pt; color: #FF0000" direction="right"> TEXT </marquee> |
در كد بالا به جای عبارات 1px و #FF0000 به ترتیب سایز خط و رنگ خط را مشخص كنید. خروجی كد بالا به شكل زیر است:
حالا شاید مایل باشید كه سایز Marquee خود را با توجه به نیازتان تغییر دهید. مثلا برای لینكدونی و اعلان بالای سایت یا وبلاگ، می بایست سایز های مختلفی در نظر گرفته شود. پس یك بخش دیگه هم اضافه می كنیم:| <marquee scrollamount="1" scrolldelay="20" style="border:1px solid #FF0000; font-family: Tahoma; font-size: 10pt; color: #FF0000" direction="right" width="170" height="100"> TEXT </marquee> |
در كد بالا به جای عدد 170طول Marquee خود را مشخص كنید و به جای عدد 100 عرض Marquee خود را مشخص كنید. (با گذاشتن یكای % در كنار عدد مورد نظر، می توانید كاری كنید كه طول/عرض Marqueeدقیقا N در صد از صفحه را در بر گیرد و همواره با تغییر اندازه ی صفحه به وسیله ی مرورگر، اندازه ی آن نیز تغییر كند.) خروجی كد بالا به شكل زیر است:
و حالا اگر می خواهید با بردن نشانه گر موس روی متن متحرك، Marquee متوقف شود، یك كد به آن اضافه می گردد: (با تشكر از آقا محسن عزیز)
<marquee
scrollamount="1" scrolldelay="20" style="border:1px solid #FF0000; font-family: Tahoma; font-size: 10pt; color: #FF0000" direction="right" width="170" height="100"onmouseover="this.stop()" onmouseout="this.start()"> TEXT </marquee> |
خروجی كد بالا به شكل زیر است:
حال اگر می خواهید Marquee شما در وسط صفحه قرار گیرد، باید دو تگ به اول و آخر كد خود اضافه كنید.| <center> <marquee scrollamount="1" scrolldelay="20" style="border:1px solid #FF0000; font-family: Tahoma; font-size: 10pt; color: #FF0000" direction="right" width="170" height="100" onmouseover="this.stop()" onmouseout="this.start()"> TEXT </marquee> </center> |
خروجی كد بالا به شكل زیر است:
حالا بدون توجه به آموزش بالا فرض كنید كه مقادیر زیر را دارید و خودتان یك كد جدید بنویسید.
| مقادیر | ویرایشگر |
scrollamount="SIZE"
scrolldelay="SIZE" style="border:SIZE solid #COLOR; font-family: FONT; font-size: SIZE; color: #COLOR" direction="جهت حركت متن" width="SIZE" height="SIZE" onmouseover="this.stop()" onmouseout="this.start()" |
موفق باشید
این روش دیگر:
متن متحرک
متون متحرك را حتما در بسياري از سايت ها و وبلاگها ها ديده ايد اين متون به وسيله ي يك كد ساده ساخته ميشوند كه من در اين جا آنرا آموزش ميدهم . اين كد در واقع اين قابليت را دارد كه متن ، تصوير و يا هر دو را در چهار جهت (چپ به راست ، راست به چپ ، بالا به پايين و پايين به بالا به حركت در آورد ، به اين كد در اصطلاح ماركويي ( marquee ) گفته ميشود .
من سعي ميكنم همه چيز را در مورد اين كد توضيح دهم تا بتوانيد از هر جنبه كه مد نظرتان است از اين كد استفاده كنيد و در استفاده از كدها دچار مشكل نشويد و نيز براي هركد مثالي ميزنم كه ميتواند به شما در استفاده از اين كد كمك زيادي كند اگر در اينجا كد آنگونه كه گفته شده نمايش داده نميشود نگران نباشيد زيرا نتيجه كار شما مطابق آموزش خواهد بود.
* به كد زير توجه كنيد تا بتوانيد با توجه به توضيحات و مثالهايي كه در ادامه مياورم كد را مطابق ميلتان ويرايش كنيد
این هم کد:
<marquee direction="right" bgcolor="#C0C0C0" width="400" height="20" style="color: #0000FF; font-size: 12pt" scrollamount="5" behavior="scroll">متن متحرك</marquee>
متن متحرك بالا بطور مستقيم از كپي كردن كد بالا بوجود آمده حال من يكي يكي پارمترهاي موجود در كد بالا را با ذكر مثال تغيير ميدهم تا شما علاوه بر بدست آوردن كد خود تا حدودي به ماهيت اين كد كه به زبان اچ تي ام ال است آشنا شويد و به نوعي من به شما اچ تي ام ال را آموزش داده باشم
1) با تغيير عبارت عبارت right در مقابل عبارت direction در خط او كد به عبارت left متن شما به جا از چب به راست ، از راست به چپ حركت خواهد كرد كه براي متون انگليسي كاربرد دارد و اگر متن شما فارسي است اين پارامتر را تغيير ندهيد
مثال 1 :
حتي با تغيير اين پارامتر به up ميتوانيد متن را از پايين به بالا حركت دهيد
و با تغيير آن به down آنرا از بالا به پايين حركت دهيد
2)پارامتر بعدي كه آنهم در خط اول كد قرار دارد bgcolor است كه مشخص كننده ي رنگ پيش زمينه ي متن متحرك است و من در اينجا براي آن مقدار 008000 را وارد كرده ام كه معادل رنگ نقره اي است و همانطور كه ميبينيد در كدها رنگ پيش زمينه هم به همين رنگ است ولي اگر شما مايل باشيد ميتوانيد كد رنگ ديگري را وارد كنيد براي مثال من اگر در به جاي كد رنگ نقره اي كد صورتي را وارد كنم نتيجه بصورت خواهد بود براي دسترسي به كد رنگها كليك كنيد : ( كليك )
3) اگر بخواهيد عرض متن متحرك را تغيير دهيد در خط دوم در مقابل عبارت width كه همكنون مساوي 400 است و بر حسب پيكسل ميباشد عدد مورد نظر خود را وارد كنيد مثلا اگر ميخواهيد عرض آن كم باشد عدد 100 و اگر ميخواهيد عرض آن زياد باشد عدد500 را وارد كنيد
4) در خط دوم پارامتري بنام height وجود دارد كه اين هم همانند قبلي است با اين تفاوت كه اين پارامتر ارتفاع را مشخص ميكند و تغيير آن در مواقعي نياز است كه بخواهيد متن خود را از بالا به پايين يا از پايين به بالا به نمايش در آوريد . مقدار اين پارامتر در كد بالا مساوي 20 است كه اگر بخواهيد ميتوانيد مقدار بيشتر يا حتي مقدار درصدي را وارد كنيد در ضمن لازم نيست كه عرض و ارتفاع شما هر دو برحسب درصد يا پيكسل باشد بلكه ميتوانيد مثلا براي ارتفاع از مقدار پيكسل يعني وارد كردن عدد بتنهايي و براي عرض مقداري به درصد وارد كنيد مثال اين پارامتر: همان طور كه در مثال ميبينيد من مقدار dirction را مساويup قرار داده ام
5) رنگ متن در كد بالا مساوي آبي يعني FF00FF قرار داده شده كه ميتوانيد در صورت تمايل كد رنگديگري را وارد كنيد
6) اندازه ي قلم را من در كد بالا مساوي 12 قرار داده ام كه آنهم قابل تغيير است
7) اما پارامتري كه شايد برايتان بيشتر از بقيه جالب باشد پارامتر behavior ميباشد كه مشخص كننده ي نوع حركت متن است و ميتواند يكي از مقادير scroll - slide - alternate باشد كه در كد بالا مساوي scroll است و به اين صورت است كه متن از يك جهت وارد و از جهت ديگر خارج ميشود ولي اگر اين مقدار را پاك كنيد و آن را مساوي slide قرار دهيد متن از يك سمت وارد و در سمت ديگر متوقف ميشودو مقدار alternate هم متن را در هر دو جهت به حركت در آورده و متن مانند يك توپ پس از برخورد به ديواره بر ميگردد
8) پارامتر scrollamount مشخص كننده ي سرعت حركت متن است و من آنرا در كد بالا مساوي 5 قرار داده ام كه بايد حداقل عدد يك و پيشنهاد ميكنم عددي بزرگتر از 10 را وارد نكنيد
8) در آخر ميتوانيد به جاي عبارت متن متحرك در كد بالا متن خود را وارد كنيد توجه داشته باشيد كه شما ميتوانيد به جاي متن ساده اگر بخواهيد كدهاي اچ تي ام ال را كه حاوي عكس و ساير عناصري كه ميتوانند در وب به نمايش در آيند باشد را وارد كنيد فقط توجه داشته باشد كه بايد بصورت كد اچ تي ام ال باشند مثلا ميتوانيد ابتدا در بخش پست مطلب جديد مطلب خود را در حالت غير اچ تي ام ال بنويسيد و همه عناصر مانند عكس و متن را وارد كنيد و مشخصه هاي آنها مانند رنگ متن اندازه ي فونت و غيره را مشخص و سپس به حالت اچ تي ام ال برويد و تمام كدها را با كپي و پيست جايگزين عبارت متن متحرك در كد بالا كنيد
منبع:
