نحوه متحرک ساختن متن با تگ marquee در HTML
در گستره تگ های وب (HTML)، بعضا به مواردی برمی خوریم که علی رغم کارایی و به اصطلاح کار راه انداز بودن، توسط کنسرسیوم جهانی وب یا W3C، غیراستاندارد ارزیابی شده اند، یکی از این موارد که مخصوصا در بین کاربران ایرانی بسیار مورد استفاده قرار می گیرد، تگ متحرک سازی متون در صفحات HTML یا Marquee است، مثلا در وبلاگ ها و سایت های مختلف برای به حرکت درآوردن لیستی از لینک ها در باکس های کناری یا نمایش عناوین اخبار و آخرین مطالب به صورت اسکرول افقی و خیلی ایده های جالب دیگر، از Marquee استفاده می شود، از اینرو با وجود غیر استاندارد بودن این تگ، ولی به جهت کاربرد بسیارش، قصد داریم در این آموزش به آن بپردازیم.
تگ marquee چیست و چه کاربردی دارد؟
marquee نام تگی است که اولین بار توسط مرورگر اینترنت اکسپلورر (Internet Explorer) معرفی شد، این تگ با هدف متحرک سازی متن، تصویر و... در صفحات HTML به صورت های مختلف، از جمله اسکرول در جهت عمودی، افقی، چپ و راست، با قابلیت تنظیم سرعت، رنگ و برخی ویژگی های دیگر ارائه گردید و در حال حاضر توسط اکثر مرورگرهای وب به خوبی پشتیبانی می شود، برخی آن را با تگ مشابه blink مقایسه می کنند که البته marquee با blink تفاوتهای زیادی دارد، چرا که از تگ blink صرفا جهت ایجاد متون و لینک های چشمک زن استفاده می شود، اما تگ marquee، گستره استفاده وسیع تری دارد و برای اسکرول متن یا تصویر با قابلیت های بیشتر، کاربرد دارد؛ با این وجود کنسرسیوم جهانی وب W3C، به دلایلی توصیه می کند که از آن در طراحی صفحات وب، استفاده نشود که خود جای تامل دارد.
دلیل ضرورت استفاده از تگ marquee نحوه استفاده از تگ marquee
چند دلیل برای اینکه نباید از تگ marquee استفاده کنیم ارائه شده است، نخست اینکه متن های متحرک توجه انسان را به خود جلب می کنند و باعث می شوند که تمرکز کاربر از روی محتوای اصلی به موارد جانبی معطوف شود، از طرفی لینک هایی که به صورت متحرک در صفحه در حرکت هستند، قدرت مانور کمتری در اختیار کاربران قرار می دهند، چرا که معمولا آنها، مدت زمان کمی فرصت دارند تا روی یک لینک کلیک کنند یا باید زمانی را در انتظار اسکرول مجدد آن، صبر نمایند، دلیل دیگر می تواند قبیح دانسته شدن این تگ توسط کنسرسیوم جهانی وب یا W3C باشد، اگر می خواهید کدنویسی معتبر از نظر سرویس اعتبار سنجی validator.w3.org داشته باشید، استفاده از این تگ توصیه نمی شود.
علی رغم مواردی که به عنوان معایب این تگ عنوان کردیم، هنوز هم می توان marquee را ساده ترین و سازگارترین روش برای ایجاد متن متحرک در وب لقب داد، از این گذشته گاهی مواقع مثلا در وبلاگ هایی که به تعداد زیادی، لینک خروجی می دهند، استفاده از تگ marquee می تواند به اصطلاح به جمع و جور شدن کار تا حدود زیادی کمک کند، یا در مورد سایت ها و وبلاگ هایی که مسائل مربوط به سئو و بهینه سازی برایشان دارای اهمیت چندانی نیست (مثل پایگاههای اداری، سازمانی، شخصی و...)، استفاده از این تگ، مشکل خاصی محسوب نمی شود، برخی نیز به جهت زیباتر شدن کار، از marquee استفاده می کنند.
استفاده از این تگ بسیار آسان است، کافی است متن مورد نظر خود را به صورت زیر تنظیم کنید.
ویژگی behavior
<marquee>متن متحرک</marquee>
مثال بالا، تنها حالت پیش فرض یک متن متحرک را ایجاد می کند، اما اگر بخواهیم تنظیمات بیشتری بر روی نحوه حرکت، سرعت، رنگ پس زمینه و ... اعمال کنیم، باید از عناصر بیشتری استفاده کنیم، یکی از این عناصر، behavior است، این ویژگی در واقع نوع اسکرول را نشان می دهد و دارای سه مقدار است:
alternate: متن متحرک با برخورد به انتهای بلاک، در جهت عکس و به صورت پینگ پونگی حرکت می کند.
scroll: متن از یک سمت وارد شده و از سمت دیگر بلاک، خارج می شود.
slide: متن از یک سمت وارد شده و در سمت دیگر، در انتهای بلاک، متوقف می شود.
به مثال زیر توجه کنید.
ویژگی bgcolor
<marquee behavior="slide">متن متحرک</marquee>
تگ marquee را می توان با ویژگی bgcolor به صورت سفارشی تری تنظیم کرد، همانطور که از نام این عنصر مشخص است، از آن برای تعیین رنگ پس زمینه استفاده می شود که مقادیر کدهای هگز را در خود جای می دهد.
ویژگی dir
<marquee behavior="slide" bgcolor="#CCCCCC">متن متحرک</marquee>
اگر متن شما به زبان فارسی یا در کل به زبان هایی است که از راست به چپ نوشته می شوند، باید از ویژگی dir و مقادیر rtl در آن استفاده کنید تا چینش متن به نحو صحیح نشان داده شود، dir دو مقدار ltr (برای حروف انگلیسی و از چپ به راست) و rtl (برای حروف فارسی و از راست به چپ) دارد.
ویژگی direction
<marquee behavior="slide" bgcolor="#CCCCCC" dir="rtl">متن متحرک</marquee>
از direction برای تعیین جهت اسکرول استفاده می شود، چهار جهت اصلی یعنی بالا، پائین، چپ و راست را می توان به صورت مقادیر در نظر گرفت.
down: پائین
up: بالا
left: چپ
right: راست
به مثال زیر توجه کنید.
ویژگی height و width
<marquee behavior="slide" bgcolor="#CCCCCC" dir="rtl" direction="down">متن متحرک</marquee>
برای تعیین ارتفاع و عرض بلاکی که متن متحرک را نشان می دهد، از دو عنصر height و width با مقادیری به پیکسل یا به صورت درصد استفاده می کنیم.
ویژگی loop
<marquee behavior="scroll" bgcolor="#CCCCCC" dir="rtl" direction="left" height="25" width="200">متن متحرک</marquee>
برخی مواقع ممکن است بخواهیم تعداد دفعات اسکرول ها را در چند دور محدود کنیم، بدین منظور از ویژگی loop و یک عدد به عنوان مقادیر استفاده می کنیم، مقادیر 1- در واقع همان حالت پیش فرض است.
ویژگی scrollamount
<marquee behavior="scroll" bgcolor="#CCCCCC" dir="rtl" direction="left" height="25" width="200" loop="-1">متن متحرک</marquee>
برای تعیین سرعت اسکرول از لحاظ طی کردن تعداد پیکسل در هر فِرم، از ویژگی scrollamount با یک عدد (معمولا بین 1 تا 10) به عنوان مقادیر استفاده می شود، هر چه عدد کوچکتر باشد، سرعت اسکرول و تعداد پیکسل کم تر است و هرچه عدد بزرگتر باشد، سرعت اسکرول و تعداد پیکسل در هر فِرم بیشتر است.
ویژگی scrolldelay
<marquee behavior="scroll" bgcolor="#CCCCCC" dir="rtl" direction="left" height="25" width="200" loop="-1" scrollamount="3">متن متحرک</marquee>
ویژگی 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 به حروف بزرگ و کوچک حساس هستند.
برچسبها: