parsgreen.com
article

نحوه متحرک ساختن متن با تگ marquee در HTML

html-marquee

در گستره تگ های وب (HTML)، بعضا به مواردی برمی خوریم که علی رغم کارایی و به اصطلاح کار راه انداز بودن، توسط کنسرسیوم جهانی وب یا W3C، غیراستاندارد ارزیابی شده اند، یکی از این موارد که مخصوصا در بین کاربران ایرانی بسیار مورد استفاده قرار می گیرد، تگ متحرک سازی متون در صفحات HTML یا Marquee است، مثلا در وبلاگ ها و سایت های مختلف برای به حرکت درآوردن لیستی از لینک ها در باکس های کناری یا نمایش عناوین اخبار و آخرین مطالب به صورت اسکرول افقی و خیلی ایده های جالب دیگر، از Marquee استفاده می شود، از اینرو با وجود غیر استاندارد بودن این تگ، ولی به جهت کاربرد بسیارش، قصد داریم در این آموزش به آن بپردازیم.

تگ marquee چیست و چه کاربردی دارد؟


marquee نام تگی است که اولین بار توسط مرورگر اینترنت اکسپلورر (Internet Explorer) معرفی شد، این تگ با هدف متحرک سازی متن، تصویر و... در صفحات HTML به صورت های مختلف، از جمله اسکرول در جهت عمودی، افقی، چپ و راست، با قابلیت تنظیم سرعت، رنگ و برخی ویژگی های دیگر ارائه گردید و در حال حاضر توسط اکثر مرورگرهای وب به خوبی پشتیبانی می شود، برخی آن را با تگ مشابه blink مقایسه می کنند که البته marquee با blink تفاوتهای زیادی دارد، چرا که از تگ blink صرفا جهت ایجاد متون و لینک های چشمک زن استفاده می شود، اما تگ marquee، گستره استفاده وسیع تری دارد و برای اسکرول متن یا تصویر با قابلیت های بیشتر، کاربرد دارد؛ با این وجود کنسرسیوم جهانی وب W3C، به دلایلی توصیه می کند که از آن در طراحی صفحات وب، استفاده نشود که خود جای تامل دارد.

چرا نباید از تگ marquee استفاده کنیم؟


چند دلیل برای اینکه نباید از تگ marquee استفاده کنیم ارائه شده است، نخست اینکه متن های متحرک توجه انسان را به خود جلب می کنند و باعث می شوند که تمرکز کاربر از روی محتوای اصلی به موارد جانبی معطوف شود، از طرفی لینک هایی که به صورت متحرک در صفحه در حرکت هستند، قدرت مانور کمتری در اختیار کاربران قرار می دهند، چرا که معمولا آنها، مدت زمان کمی فرصت دارند تا روی یک لینک کلیک کنند یا باید زمانی را در انتظار اسکرول مجدد آن، صبر نمایند، دلیل دیگر می تواند قبیح دانسته شدن این تگ توسط کنسرسیوم جهانی وب یا W3C باشد، اگر می خواهید کدنویسی معتبر از نظر سرویس اعتبار سنجی validator.w3.org داشته باشید، استفاده از این تگ توصیه نمی شود.

دلیل ضرورت استفاده از تگ marquee


علی رغم مواردی که به عنوان معایب این تگ عنوان کردیم، هنوز هم می توان marquee را ساده ترین و سازگارترین روش برای ایجاد متن متحرک در وب لقب داد، از این گذشته گاهی مواقع مثلا در وبلاگ هایی که به تعداد زیادی، لینک خروجی می دهند، استفاده از تگ marquee می تواند به اصطلاح به جمع و جور شدن کار تا حدود زیادی کمک کند، یا در مورد سایت ها و وبلاگ هایی که مسائل مربوط به سئو و بهینه سازی برایشان دارای اهمیت چندانی نیست (مثل پایگاههای اداری، سازمانی، شخصی و...)، استفاده از این تگ، مشکل خاصی محسوب نمی شود، برخی نیز به جهت زیباتر شدن کار، از marquee استفاده می کنند.

نحوه استفاده از تگ marquee


استفاده از این تگ بسیار آسان است، کافی است متن مورد نظر خود را به صورت زیر تنظیم کنید.
<marquee>متن متحرک</marquee>

ویژگی behavior


مثال بالا، تنها حالت پیش فرض یک متن متحرک را ایجاد می کند، اما اگر بخواهیم تنظیمات بیشتری بر روی نحوه حرکت، سرعت، رنگ پس زمینه و ... اعمال کنیم، باید از عناصر بیشتری استفاده کنیم، یکی از این عناصر، behavior است، این ویژگی در واقع نوع اسکرول را نشان می دهد و دارای سه مقدار است:
alternate: متن متحرک با برخورد به انتهای بلاک، در جهت عکس و به صورت پینگ پونگی حرکت می کند.
scroll: متن از یک سمت وارد شده و از سمت دیگر بلاک، خارج می شود.
slide: متن از یک سمت وارد شده و در سمت دیگر، در انتهای بلاک، متوقف می شود.
به مثال زیر توجه کنید.
<marquee behavior="slide">متن متحرک</marquee>

ویژگی bgcolor


تگ marquee را می توان با ویژگی bgcolor به صورت سفارشی تری تنظیم کرد، همانطور که از نام این عنصر مشخص است، از آن برای تعیین رنگ پس زمینه استفاده می شود که مقادیر کدهای هگز را در خود جای می دهد.
<marquee behavior="slide" bgcolor="#CCCCCC">متن متحرک</marquee>

ویژگی dir


اگر متن شما به زبان فارسی یا در کل به زبان هایی است که از راست به چپ نوشته می شوند، باید از ویژگی dir و مقادیر rtl در آن استفاده کنید تا چینش متن به نحو صحیح نشان داده شود، dir دو مقدار ltr (برای حروف انگلیسی و از چپ به راست) و rtl (برای حروف فارسی و از راست به چپ) دارد.
<marquee behavior="slide" bgcolor="#CCCCCC" dir="rtl">متن متحرک</marquee>

ویژگی direction


از direction برای تعیین جهت اسکرول استفاده می شود، چهار جهت اصلی یعنی بالا، پائین، چپ و راست را می توان به صورت مقادیر در نظر گرفت.
down: پائین
up: بالا
left: چپ
right: راست
به مثال زیر توجه کنید.
<marquee behavior="slide" bgcolor="#CCCCCC" dir="rtl" direction="down">متن متحرک</marquee>

ویژگی height و width


برای تعیین ارتفاع و عرض بلاکی که متن متحرک را نشان می دهد، از دو عنصر height و width با مقادیری به پیکسل یا به صورت درصد استفاده می کنیم.
<marquee behavior="scroll" bgcolor="#CCCCCC" dir="rtl" direction="left" height="25" width="200">متن متحرک</marquee>

ویژگی loop


برخی مواقع ممکن است بخواهیم تعداد دفعات اسکرول ها را در چند دور محدود کنیم، بدین منظور از ویژگی loop و یک عدد به عنوان مقادیر استفاده می کنیم، مقادیر 1- در واقع همان حالت پیش فرض است.
<marquee behavior="scroll" bgcolor="#CCCCCC" dir="rtl" direction="left" height="25" width="200" loop="-1">متن متحرک</marquee>

ویژگی scrollamount


برای تعیین سرعت اسکرول از لحاظ طی کردن تعداد پیکسل در هر فِرم، از ویژگی scrollamount با یک عدد (معمولا بین 1 تا 10) به عنوان مقادیر استفاده می شود، هر چه عدد کوچکتر باشد، سرعت اسکرول و تعداد پیکسل کم تر است و هرچه عدد بزرگتر باشد، سرعت اسکرول و تعداد پیکسل در هر فِرم بیشتر است.
<marquee behavior="scroll" bgcolor="#CCCCCC" dir="rtl" direction="left" height="25" width="200" loop="-1" scrollamount="3">متن متحرک</marquee>

ویژگی scrolldelay


ویژگی scrolldelay در واقع تکمیل کننده scrollamount است، از scrolldelay برای تعیین وقفه ها (به میلی ثانیه) استفاده می شود، برای ایجاد بهترین حالت اسکرول، بهتر است برای هر دو عنصر، مقادیر یک را در نظر بگیرید.
<marquee behavior="scroll" bgcolor="#CCCCCC" dir="rtl" direction="left" height="25" width="200" loop="-1" scrollamount="1" scrolldelay="1">متن متحرک</marquee>

کنترل اسکرول متن با جاوا اسکریپت


علاوه بر مواردی که تا این لحظه گفتیم، در marquee از دو ویژگی ساده، مبتنی بر جاوا اسکریپت نیز می توانیم برای کنترل حرکت متن، زمانی که ماوس خود را روی آن می بریم، استفاده کنیم، ویژگی onmouseover و onmouseout سبب می شوند که کنترل رفتار بلاک را در هنگامی که کاربر ماوس خود را جهت کلیک کردن بر روی باکس متحرک می برد، در اختیار داشته باشیم، به اینصورت که پس از بردن ماوس، متن متحرک متوقف شود و با خارج شدن ماوس، دوباره به حرکت اسکرولی خود، ادامه دهد؛ بدین منظور باید مقادیر زیر را برای onmouseover و onmouseout تنظیم کنیم.
<marquee behavior="scroll" bgcolor="#CCCCCC" dir="rtl" direction="left" height="25" width="200" loop="-1" scrollamount="1" scrolldelay="1" onmouseover="this.setAttribute('scrollAmount', 0, 0)" onmouseout="this.setAttribute('scrollAmount', 2, 0)">متن متحرک</marquee>
دقت کنید که مقادیر داخل onmouseover و onmouseout به حروف بزرگ و کوچک حساس هستند.
sectionدسته بندی: آموزش کاربردی » HTML
related مطالب بیشتر:
» آموزش نحوه قرار دادن فیلم و ویدئوهای FLV در وبلاگ و سایت
» چگونه در وبلاگ و سایت، لینک دانلود قرار دهیم؟
» نحوه درج علامت های خاص در HTML
» نحوه قرار دادن جستجوی گوگل در سایت یا وبلاگ
» چگونه رنگ و تصویر پس زمینه سایت یا وبلاگ را تغییر دهیم؟
commentنظرات (۱۰۱ یادداشت برای این مطلب ارسال شده است)
نویسنده: منتظر
زمان: ۰۹:۰۳:۱۴ - تاریخ: ۱۳۹۱/۰۳/۳۱
عالیه کارتون...
توضیحات خیلی مناسبن
ممنون
پاسخ: 
خواهش می کنیم؛ نظر لطف شماست.
نویسنده: شهاب
زمان: ۱۸:۴۲:۳۰ - تاریخ: ۱۳۹۱/۰۴/۰۹
با درود فراوان و عرض خسته نباشید .
دوست عزیز در این مبحث شما جای یک آموزش دیگر خالی مونده. دوست عزیز شما در بعضی بحثاتون جای چند چیز رو خالی کرده اید که شاید بعضی ها دچار اشتباه شوند.
اگر شما بتوانید روش حرکت کردن جملات فارسی از چپ به راست را بدون رنگ پشت زمینه یا پس زمینه به صورتی که به صورت مداوم حرکت کند را به کاربران یاد بدهید بسیار ممنون میشم.
در بعضی مطالب شما یا رنگ پشت صفحه است که.... و یا در بعضی از مطالب شما نوع حرکت دادن جملات (منظور از چپ به راست یا از راست به چپ) نبود یا اگر بود رنگیش بود که بازم تطبیق رنگش با رنگ صفحه وبلاگ خودش مکافاته. لطفا آموزشش بدین، لذا خاطر نشان کنم که اکثر وبلاگ نویسان از مخلوط کردن کد ها چیزی نمیدانند. پس اگر همین حرکتی که من گفتم را آموزش بدهید بسیار بسیار ممنون میشم.
پاسخ: 
سلام
دوست گرامی، ضمن تشکر، باید بگوییم که منظور شما کاملا روشن است، اما لطفا توجه داشته باشید، بر عکس برخی سایت های مربوط به اسکریپت که به قرار دادن کد اکتفا می کنند، در اینجا هدف از آموزش ها، صرف ارائه کد آماده نیست، ما سعی می کنیم جزئیات کار و نحوه سفارشی سازی را نیز به کاربران نشان دهیم، طرز استفاده بستگی به خود آنها و نیازشان دارد، متاسفانه، خلاء منابع آموزشی مناسب مخصوصا در زمینه وب به زبان فارسی باعث شده است که اکثر کاربران به صرف یک کپی پیست ساده عادت کرده و سعی نکنند سطح دانش عمومی خود را در این زمینه بالا ببرند. مشکلی که شما در نظرتان مطرح کرده اید با یک کد رنگ هگز ساده قابل تنظیم است که به راحتی می توانید از برنامه هایی نظیر فتوشاپ، کد مورد نظر خودتان را به جای CCCCCC جایگزین کنید. در مورد حرکت از چپ به راست نیز در آموزش گفته شده، قسمت مربوط به ویژگی dir را ملاحظه کنید.
نویسنده: amir
زمان: ۱۲:۴۴:۲۸ - تاریخ: ۱۳۹۱/۰۴/۳۰
سلام تشکربسیارجالب بود/موفق باشید
نویسنده: الهه
زمان: ۱۸:۲۲:۳۹ - تاریخ: ۱۳۹۱/۰۶/۱۴
سلام ببخشید مزاحم شدم من ی سوالی داشتم اینه که برای اینکه متنی رو متحرک کنم واسه وبلاگم ولی توضیحاتی که اینجا دادین برای من ی خرده سخته شما چند کداینجا نوشتین ولی من نمیدونم این کدهارو کجا بزارم ؟؟؟ بعدش ی سری به وبم بزنین ممنون میشم
پاسخ: 
سلام
کد نهایی یعنی آخرین کد را در قسمت ویرایش قالب وبلاگ خود قرار دهید.
نویسنده: علیرضا
زمان: ۱۸:۲۴:۲۸ - تاریخ: ۱۳۹۱/۰۶/۲۱
با سلام و خسته نباشید جناب یه سوال داشتم اگر امکان دارد راهنمایی نمایید
اول وبلاگ بنده یه مطلب با عکس قرار دادم الان میخوام عکس را متحرک کنم و نوشته ثابت باشد امکان دارد لطفا به ویلاگ بنده سر بزنید
با تشکر علیرضا
پاسخ: 
سلام
برای متحرک کردن متن یا عکس کافی است آن را بین تگ های marquee قرار دهید، به طور مثال برای عکس ها:
<marquee behavior="scroll" bgcolor="#CCCCCC" dir="rtl" direction="left" height="25" width="200" loop="-1" scrollamount="1" scrolldelay="1"><img src="yoursite.com/image/photo.jpg" /></marquee>
این کد را هم باید یا در قسمت ویرایش قالب یا بخش html در هنگام ارسال مطالب یا در بخش اسکریپت های اختصاصی وبلاگ خود قرار دهید.
نویسنده: لاله
زمان: ۰۸:۳۴:۲۲ - تاریخ: ۱۳۹۱/۰۸/۰۷
با سلام
من در طراحی از یک div برای marquee استفاده کردم اما در IE7 به سمت راست صفحه کشیده شده. از style جدا برای این مرورگر هم استفاده کردم (خاصیت left) اما جواب نمیده.
اگه امکان داره راهنماییم کنید
ممنونم
پاسخ: 
سلام
بدون دیدن سورس کدها نمی توان نظر قطعی داد، float با مقادیر left را امتحان کنید، دقت کنید موقعیت یک بلاک ممکن است تحت تاثیر سایر بلاک ها نیز قرار داشته باشد، لذا باید ببینید که فضای کافی برای بلاک فعلی در نظر گرفته اید یا خیر، خاصیت های margin و padding هم گاهی مواقع ممکن است موثر باشند.
نویسنده: الی
زمان: ۱۳:۱۴:۱۸ - تاریخ: ۱۳۹۱/۰۸/۱۱
سلام ممنونم خیلی مفید بود به وبلاگم یه سری بزنید... الی
نویسنده: mehrdad
زمان: ۱۲:۴۲:۱۰ - تاریخ: ۱۳۹۱/۰۸/۱۴
آقا خیلی عالی بود و خیلی کمک کرد من اصلا برنامه نویسی بلد نیستم ولی با این راهنمایی های شما به خوبی تونستم یه جملات متحرک برای سایت فروشگاه اینترنتیم قسمت سوالات متداول بسازم که خیلی کاربرد داره در هر صورت ممنون
نویسنده: شاهد
زمان: ۱۵:۵۵:۰۴ - تاریخ: ۱۳۹۱/۱۰/۲۳
سلام دوست عزیز
برای قرار دادن همین کد متحرک متن در وسط وبلاگ و یا در زیر هدر در وسط وبلاگ چه باید کرد ؟
تشکر
پاسخ: 
سلام
برای اینکه محتوا در وسط قرار بگیرند از تگ زیر در html استفاده کنید:
<center>محتوا</center>
یا اگر با css آشنایی دارید از این خاصیت استفاده کنید:
<div style="text-align:center;">محتوا</div>
نویسنده: Karim
زمان: ۱۲:۰۹:۴۴ - تاریخ: ۱۳۹۱/۱۱/۰۷
دست شما درد نکند بسیار سپاسگذارم
نویسنده: رهرو
زمان: ۱۲:۵۰:۵۶ - تاریخ: ۱۳۹۱/۱۱/۰۸
سلام و خداقوت
اولاً تبريك بابت اين سايت عالي كه دارين
ثانياً يه سؤال دارم؟؟؟؟؟؟؟؟؟؟
چطور ميشه از يه چنين كدي داخل پستها استفاده كرد؟؟
مثلا! عكسهايي را در يك پست پشت سر هم نشون داد يا كل لينكستانمون را به اين شكل متحرك كنيم بدون اينكه پس زمينه تغييري بكنه؟! ممنون ميشم پاسخ بدين♥♥♥
پاسخ: 
سلام
ممنون از نظر لطف شما، در مورد سوال اگر با html آشنا باشید، می توانید به راحتی تگ های تصویر یا هر تگ دیگری را بین دو تگ marquee قرار دهید، به این صورت تنها محتوای داخل این تگ به صورت متحرک نشان داده می شود.
نویسنده: رهرو
زمان: ۱۰:۲۱:۱۷ - تاریخ: ۱۳۹۱/۱۱/۱۱
ممنون بابت پاسختون
مانا باشيد
نویسنده: farshad
زمان: ۱۹:۰۷:۱۴ - تاریخ: ۱۳۹۱/۱۱/۲۴
سلام
میخوام با هر بار رفرش صفحه یک متن به صورت متحرک نمایش داده بشه مثل حدیث تصادفی ولی متحرک
اگه امکانش هست بگید باید چکار کنیم
پاسخ: 
سلام
برای نمایش جملات متحرک اتفاقی، از نمونه کد زیر استفاده کنید:
<script language="JavaScript">
<!--
var rand_text = new Array();
rand_text[0] = "آموزش HTML";
rand_text[1] = "آموزش CSS";
rand_text[2] = "آموزش JavaScript";
rand_text[3] = "آموزش Ajax";
rand_text[4] = "آموزش PHP";
rand_text[5] = "آموزش Mysql";
rand_text[6] = "آموزش SEO";
var i = Math.floor(7 * Math.random());
document.write('<marquee behavior="scroll" bgcolor="#CCCCCC" dir="rtl" direction="left" height="25" width="200" loop="-1" scrollamount="1" scrolldelay="1" onmouseover="this.scrollAmount=0" onmouseout="this.scrollAmount=1">'+rand_text[i]+'</marquee>');
//-->
</script>
نویسنده: farshad
زمان: ۲۲:۴۷:۱۰ - تاریخ: ۱۳۹۱/۱۱/۲۴
سپاس فراواااااااااااااااااان
اصلا ته سایتای آموزشیه اینجا دمتون گرم
نویسنده: baran
زمان: ۰۵:۳۴:۱۲ - تاریخ: ۱۳۹۱/۱۲/۲۹
سلام من ميخوام داخل جدولي كه ايجاد كردم يك عكس بزارم و بعد با دستور marquee يك متن از روي آن رد بشه ولي دستور درست html آن را نميدانم و يه چيزه ديگه اگه بخوام به صورت دستي اندازه هر سطر يا ستون جدول تنظيم كنم بايد از چه دستور يا تگي استفاده كنم؟؟؟
با تشكر
پاسخ: 
سلام
برای قرار دادن تصویر به صورتی که می خواهید باید از css یا خاصیت های مربوط به پس زمینه در html استفاده کنید، مثال:
<td background="yoursite.com/img/bg.jpg">
<td style="background:yoursite.com/img/bg.jpg no-repeat">
برای تغییر اندازه نیز باید با نحوه کار تگ table در html و زیرمجموعه های آن آشنا باشید، در این صورت می توانید از خاصیت هایی مانند width و height استفاده کنید.
paged صفحه 1 از 7




more لطفا دقت کنید که یادداشت های زیر منتشر نشده و حذف خواهند شد:
- یادداشت های خارج از موضوع این مطلب.
- سوالات کلی، غیر ضروری و مشکلاتی که هیچ تلاشی برای رفع آن نکرده باشید.
- نظرات حاوی کدها و اسکریپت های خیلی طولانی (به طور مثال کد کامل قالب وبلاگ).

2 × 1
 refresh
آگهی
seonab.com
طراحی نرم افزار اندروید
رنگین کمان عکس
Ranginkamaan.com

آرشیو عکس های باکیفیت با موضوعات متنوع...