عالی نیوز به نقل از پارس تولز: امروز یکی از پر کاربرد ترین کدهای موجود در وب را معرفی می کنیم. این کد متن مورد نظر شما را به حرکت در می آورد. در ادامه ی مطلب آموزشی بسیار کامل تقدیمتان خواهد شد. پس با ما همراه باشید.
عمل کرد کد در مرورگرها (نرم افزار های تماشای سایت)
| نگارش | مرورگر | عمل می کند/نمی کند |
| 7.0 | Internet Explorer |  |
| 3.0 | Mozilla Firefox (beta) | |
| 9.0 | Netscape | |
خوب. حالا با همدیگه قدم به قدم می ریم جلو تا با جزئیات این کد بیشتر آشنا بشیم. کد اصلی این شکلیه:
| <marquee> TEXT </marquee> |
شما باید توی کد بالا به جای عبارت "TEXT" متنی که می خواهید حرکت کند را وارد نمایید. خروجی کد بالا به شکل زیر است.
TEXT
حالا امکان داره که شما بخواهید سرعتی رو برای این متن در نظر بگیرید. پس کد به شکل زیر تغییر می کنه:
| <marquee scrollamount="1" scrolldelay="20"> TEXT </marquee> |
در کد بالا در عبارت scrollamount="1" به جای عدد 1 سرعت حرکت را مشخص می کنید. هرجه این عدد بزرگتر باشد سرعت حرکت بیشتر است. همچنین در عبارت scrolldelay="20" به جای عدد 20 تاخیر لازم برای طی شدن مسیر توسط متن را وارد کنید. در کل باید روی این مقادیر کمی کار کرده و آن را تست کنید تا حرکت مورد علاقه را بدست آورید. خروجی کد بالا با مقادیر scrollamount="1" scrolldelay="20" به شکل زیره:
TEXT
حال شاید بخواهید برای متن متحرک خود اندازه، رنگ و قلم در نظر بگیرید. حالا کد این شکلی میشه:
| <marquee scrollamount="1" scrolldelay="20" style="font-family: Tahoma; font-size: 10pt; color: red"> TEXT </marquee> |
خوب… شاید کمی پیچیده به نظر برسه. اما اصلا اینطوری نیست. به جای عبارت های Tahoma و 10pt و red به ترتیب فونت نوشته، سایز نوشته و رنگ نوشته را مشخص نمایید. خروجی کد بالا به شکل زیره:
TEXT
ممکنه نوشته ی شما فارسی باشه. در این صورت بهتره که از راست به چپ حرکت کنه. یا این که شاید شما مایل باشید نوشتتونه از بالا به پایین یا از پایین به بالا حرکت کنه. پس یک تغییر دیگه توی کد به وجود میاد:
| <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: چپ به راست) خروجی کد بالا به شکل زیره:
TEXT
شاید شما بخواهید دور 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 به ترتیب سایز خط و رنگ خط را مشخص کنید. خروجی کد بالا به شکل زیر است:
TEXT
حالا شاید مایل باشید که سایز 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 در صد از صفحه را در بر گیرد و همواره با تغییر اندازه ی صفحه به وسیله ی مرورگر، اندازه ی آن نیز تغییر کند.) خروجی کد بالا به شکل زیر است:
TEXT
و حالا اگر می خواهید با بردن نشانه گر موس روی متن متحرک، Marquee متوقف شود، یک کد به آن اضافه می گردد: (با تشکر از آقا محسن عزیز)
<marquee |
خروجی کد بالا به شکل زیر است:
TEXT
حال اگر می خواهید 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> |
خروجی کد بالا به شکل زیر است:
TEXT
حالا بدون توجه به آموزش بالا فرض کنید که مقادیر زیر را دارید و خودتان یک کد جدید بنویسید.
| مقادیر | ویرایشگر |
scrollamount="SIZE" |
موفق باشید