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

در گستره تگ های وب (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 به حروف بزرگ و کوچک حساس هستند.