آگهی
article

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

html-marquee

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

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


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

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


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

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


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

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


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

ویژگی behavior


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

ویژگی bgcolor


تگ marquee را می توان با ویژگی bgcolor به صورت سفارشی تنظیم کرد، همانطور که از نام این ویژگی مشخص است برای تعیین رنگ پس زمینه کاربرد دارد که مقادیر کدهای هگز را در خود جای می دهد.
<marquee behavior="slide" bgcolor="#CCCCCC">متن متحرک</marquee>
کدهای رنگی هگز را می توانیم از برنامه های گرافیکی نظیر فتوشاپ یا ابزارهایی که بدین منظور در وب وجود دارد دریافت کنیم، ابزار زیر در سایت بدین منظور در نظر گرفته شده است:
https://webgoo.ir/tool/hex-rgb-color

ویژگی dir


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

ویژگی direction


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

ویژگی height و width


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

ویژگی 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 برای تعیین وقفه ها (به میلی ثانیه) استفاده می شود، برای ایجاد بهینه ترین حالت اسکرول بهتر است برای هر دو خاصیت مقادیر 1 را در نظر بگیریم.
<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', 1, 0)">متن متحرک</marquee>
دقت کنیم مقادیر تعریف شده برای خاصیت های onmouseover و onmouseout به حروف بزرگ و کوچک حساس هستند.

استفاده از CSS و JavaScript برای ایجاد متن متحرک


همان طور که گفتیم علی رغم ساده و سریع بودن استفاده از تگ marquee برای ایجاد متن متحرک در صفحات HTML، کمیسیون جهانی وب W3C به دلایلی استفاده از این تگ را بد و منسوخ شده عنوان کرده است (هرچند مرورگرها در حال حاضر از این تگ تا حدود زیادی پشتیبانی می کنند)، به همین دلیل و به عنوان روش جایگزین می توانیم از قابلیت های CSS و در صورت نیاز کدهای JavaScript برای ایجاد و کنترل متن متحرک استفاده کنیم، یکی از پرکاربردترین این قابلیت ها استفاده از animation و ایجاد فریم های کلیدی (keyframes یا گام های انیمیشن که فرم کار از نقطه ای به نقطه دیگر تغییر می کند) است، برای این منظور چند نمونه زیر بسته به هدف کاربرد دارند:
- کد CSS + HTML متن متحرک (Scrolling Text)، شروع خودکار، حرکت از راست به چپ (مناسب برای نمایش جملات فارسی):
<style>
#marquee-block {
    width: 500px;
    margin: 0 auto;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
    background: #ccc;
    direction: rtl;
}
#marquee-text {
    display: inline-block;
    padding-right: 100%;
    animation: marquee 12s linear infinite;
}
#marquee-text:hover {
    animation-play-state: paused;
}
@keyframes marquee {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(100%, 0);
    }
}
</style>

<div id="marquee-block">
<span id="marquee-text">اين متن متحرک فارسی جهت نمونه است ... برای بررسی امکان توقف انیمیشن ماوس را روی متن ببرید.</span>
</div>
با اعمال تغییرات در قسمت keyframes به صورت نمونه زیر می توانیم حالت انیمیشن را به صورت پینگ پنگی (Bouncing) تغییر دهیم:
@keyframes marquee {
    0% {
        transform: translate(0, 0);
    }
    50% {
        transform: translate(100%, 0);
    }
    100% {
        transform: translate(0, 0);
    }
}
در واقع به جای دو نقطه کلیدی سه نقطه (0، 50، 100 درصد) در نظر گرفته ایم.
- کد CSS + HTML متن متحرک (Scrolling Text)، شروع خودکار، حرکت از چپ به راست (مناسب برای نمایش جملات انگلیسی):
<style>
#marquee-block {
    width: 500px;
    margin: 0 auto;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
    background: #ccc;
    direction: ltr;
}
#marquee-text {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 12s linear infinite;
}
#marquee-text:hover {
    animation-play-state: paused;
}
@keyframes marquee {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(-100%, 0);
    }
}
</style>

<div id="marquee-block">
<span id="marquee-text">this is an English animated text for example ... hover over the text to check the animation pause ability.</span>
</div>
- کد CSS + HTML متن متحرک (Scrolling Text)، شروع خودکار، حرکت از بالا به پائین:
<style>
#marquee-block {
    width: 300px;
    height: 200px;
    margin: 0 auto;
    overflow: hidden;
    box-sizing: border-box;
    background: #ccc;
    direction: rtl;
}
#marquee-text {
    display: inline-block;
    padding-bottom: 100%;
    animation: marquee 8s linear infinite;
}
#marquee-text:hover {
    animation-play-state: paused;
}
@keyframes marquee {
    0% {
        transform: translateY(-10%);
    }
    100% {
        transform: translateY(60%);
    }
}
</style>

<div id="marquee-block">
<span id="marquee-text">اين متن متحرک جهت نمونه است ... برای بررسی امکان توقف انیمیشن ماوس را روی متن ببرید.</span>
</div>
در این حالت برای پارامتر transform از مقدار translateY (حرکت در راستای محور Yها) استفاده کرده ایم.
برای ایجاد حالت اسکرول از پائین به بالا کافی است قسمت keyframes را به صورت زیر تغییر دهیم:
@keyframes marquee {
    0% {
        transform: translateY(60%);
    }
    100% {
        transform: translateY(-10%);
    }
}
با کم و زیاد کردن مقادیر translateY در هر فریم کلیدی می توانیم اثر آن را روی نحوه اسکرول متن بررسی کنیم.
- کد CSS + JavaScript + HTML متن متحرک (Slide-In Text)، شروع با کلیک، حرکت از چپ به راست (مناسب برای نمایش جملات فارسی):
<style>
#marquee-block {
    position: relative;
    width: 500px;
    height: 50px;
    margin: 0 auto;
    overflow: hidden;
    box-sizing: border-box;
    background: #ccc;
    direction: rtl;
}
#marquee-text {
    position: absolute;
    width: 100%;
    height: 100%;
    animation: marquee 3s ease-out infinite;
    animation-play-state: paused;
    text-align: left;
}
@keyframes marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(65%);
    }
}
</style>

<script>
function toggleSlideText(id, type){
    var elm = document.getElementById(id);
    
    if(type == 'run'){
        elm.style.animationPlayState = 'running';
    } else if(type == 'pause'){
        elm.style.animationPlayState = 'paused';
    }
}
</script>
<div id="marquee-block">
<span id="marquee-text">اين متن متحرک فارسی جهت نمونه است.</span>
</div>
برای بررسی حالت اسلاید بر روی دکمه کلیک کنید:
<button onclick="toggleSlideText('marquee-text', 'run');">اسلاید</button>
<button onclick="toggleSlideText('marquee-text', 'pause');">توقف</button>
همان طور که مشخص است در این روش برای کنترل شروع و توقف حالت اسلاید انیمیشن از دکمه (button) و تابع جاوا اسکریپتی (toggleSlideText) استفاده کرده ایم.
- کد CSS + JavaScript + HTML متن متحرک (Slide-In Text)، شروع با کلیک، حرکت از راست به چپ (مناسب برای نمایش جملات انگلیسی):
<style>
#marquee-block {
    position: relative;
    width: 500px;
    height: 50px;
    margin: 0 auto;
    overflow: hidden;
    box-sizing: border-box;
    background: #ccc;
    direction: ltr;
}
#marquee-text {
    position: absolute;
    width: 100%;
    height: 100%;
    animation: marquee 3s ease-out infinite;
    animation-play-state: paused;
    text-align: left;
}
@keyframes marquee {
    0% {
        transform: translateX(50%);
    }
    100% {
        transform: translateX(0);
    }
}
</style>

<script>
function toggleSlideText(id, type){
    var elm = document.getElementById(id);
    
    if(type == 'run'){
        elm.style.animationPlayState = 'running';
    } else if(type == 'pause'){
        elm.style.animationPlayState = 'paused';
    }
}
</script>
<div id="marquee-block">
<span id="marquee-text">this is an English animated text for example.</span>
</div>
برای بررسی حالت اسلاید بر روی دکمه کلیک کنید:
<button onclick="toggleSlideText('marquee-text', 'run');">اسلاید</button>
<button onclick="toggleSlideText('marquee-text', 'pause');">توقف</button>

مثال و پیش نمایش آنلاین


جهت کمک به درک بهتر مبحث، نمونه کدهایی را که در این آموزش درج کردیم با مثال و پیش نمایش آنلاین بررسی می کنیم:
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | ايجاد متن متحرک با تگ marquee، CSS و جاوا اسکريپت</title>
<!-- Webgoo.ir -->
<style>
body {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    direction: rtl;
    line-height: 22px;    
}
#marquee-block-1 {
    width: 200px;
    margin: 0 auto;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
    background: #ccc;
    direction: rtl;
}
#marquee-block-2 {
    width: 500px;
    margin: 0 auto;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
    background: #ccc;
    direction: rtl;
}
#marquee-text-2 {
    display: inline-block;
    padding-right: 100%;
    animation: marquee-2 12s linear infinite;
}
#marquee-text-2:hover {
    animation-play-state: paused;
}
@keyframes marquee-2 {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(100%, 0);
    }
}
#marquee-block-3 {
    position: relative;
    width: 500px;
    height: 50px;
    margin: 0 auto;
    overflow: hidden;
    box-sizing: border-box;
    background: #ccc;
    direction: ltr;
}
#marquee-text-3 {
    position: absolute;
    width: 100%;
    height: 100%;
    animation: marquee-3 3s ease-out infinite;
    animation-play-state: paused;
    text-align: left;
}
@keyframes marquee-3 {
    0% {
        transform: translateX(50%);
    }
    100% {
        transform: translateX(0);
    }
}
</style>
</head>
<body>
<noscript>
جاوا اسکریپت در مرورگر شما غیر فعال است!
</noscript>

متن متحرک با تگ marquee:<br>
<div id="marquee-block-1">
<marquee behavior="scroll" bgcolor="#CCCCCC" dir="rtl" direction="right" height="25" width="200" loop="-1" scrollamount="1" scrolldelay="1" onmouseover="this.setAttribute('scrollAmount', 0, 0)" onmouseout="this.setAttribute('scrollAmount', 1, 0)">متن متحرک</marquee>
</div>
<hr>
متن متحرک به صورت اسکرول با CSS:<br>
<div id="marquee-block-2">
<span id="marquee-text-2">اين متن متحرک فارسی جهت نمونه است ... برای بررسی امکان توقف انیمیشن ماوس را روی متن ببرید.</span>
</div>
<hr>
متن متحرک به صورت اسلاید با CSS:<br>
<script>
function toggleSlideText(id, type){
    var elm = document.getElementById(id);
    
    if(type == 'run'){
        elm.style.animationPlayState = 'running';
    } else if(type == 'pause'){
        elm.style.animationPlayState = 'paused';
    }
}
</script>
<div id="marquee-block-3">
<span id="marquee-text-3">this is an English animated text for example.</span>
</div>
برای بررسی حالت اسلاید بر روی دکمه کلیک کنید:
<button onclick="toggleSlideText('marquee-text-3', 'run');">اسلاید</button>
<button onclick="toggleSlideText('marquee-text-3', 'pause');">توقف</button>
</body>
</html>
پیش نمایش آنلاین
sectionدسته بندی: آموزش کاربردی » HTML
related مطالب بیشتر:
» نحوه پخش فیلم و ویدئوهای FLV در سایت و وبلاگ
» پخش فایل صوتی (آهنگ، موسیقی پس زمینه) در سایت و وبلاگ
» کاربرد متاتگ refresh در صفحات وب (HTML)
» نحوه قرار دادن جستجوی گوگل در سایت یا وبلاگ
» نحوه درج علامت های خاص در HTML
commentنظرات (۱۱۴ یادداشت برای این مطلب ارسال شده است)
more یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.
نویسنده: مازیار
زمان: ۲۰:۰۲:۰۱ - تاریخ: ۱۳۹۲/۰۸/۰۵
سلام نمیدونم چجوری باید بزارمش توی وبلاگم.
پاسخ: 
سلام
در کل کدها و اسکریپت ها را یا باید در قسمت ویرایش قالب وبلاگ درج کنید، یا اینکه در قسمت کدها و اسکریپت های اختصاصی کاربر، همچنین اگر درج کد HTML در مطالب وبلاگ امکانپذیر باشد، این کار را هم می توانید برای هر مطلب انجام دهید.
نویسنده: lili
زمان: ۱۵:۱۵:۰۵ - تاریخ: ۱۳۹۲/۱۰/۰۵
سلام ممنون از آموزشهاتون. یه سوال دارم با توجه به اینکه این تگ دیگه منسوخ شده دنبال یه پلاگین برای جایگزینی این تگ بودم که به این سایت برخوردم :
http://remysharp.com/2008/09/10/the-silky-smooth-marquee/
ولی متاسفانه نتونستم ازش استفاده کنم میشه شما راهنماییم کنید.
ممنون
پاسخ: 
سلام
این امکان مبتنی بر فریم ورک جی کئوری ساخته شده، با مراجعه به صفحه Demo می توانید از سورس آن (به شرط آشنایی مقدماتی با نحوه کار جی کئوری) استفاده کنید، کافی است در سایتتان فایل جی کئوری را وارد کرده باشید، سپس با درج کدها، ابزار مورد نظر کار خواهد کرد.
نویسنده: lili
زمان: ۱۶:۳۶:۱۸ - تاریخ: ۱۳۹۲/۱۰/۰۵
باید 2 تا div داشته باشم؟ توی دمو از مارکویی استفاده کرده ولی نباید از مارکویی استفاده بشه من توی یه div از عکس هایی که لینک هستن استفاده کردم بعد کدهایی که اونجا هست رو اضافه کردم ولی کار نمیکنه
پاسخ: 
این کد بر روی تگ های marquee درون بلاک div با کلاس demo تاثیر می گذارد، یعنی باید یک بلاک با کلاس CSS داشته باشید که کلاس آن در تکه کد جاوا اسکریپتی (که در انتهای تگ head ملاحظه می کنید) تنظیم شده باشد، به فرض در حال حاضر قسمت زیر برای کاس demo تنظیم شده:
       $('div.demo marquee').marquee('pointer').mouseover(function ()
در واقع این کد اسکرول های تگ marquee را حرفه ای تر و به اصطلاح نرم تر (smooth) می کند.
نویسنده: سیامک
زمان: ۰۰:۵۷:۱۰ - تاریخ: ۱۳۹۲/۱۰/۱۴
نحوه آموزشتون هم خلاصه و هم کامله و تنها علت کوتاهی مطلبتون حذف صحبتهای اضافه است.
موفق باشید.
نویسنده: دخترک
زمان: ۱۳:۲۱:۳۲ - تاریخ: ۱۳۹۲/۱۰/۲۶
سلام من یه وبلاگ دارم که کد آیکن ها رو توش به نمایش میذارم.
اما نمیدونم چطور باید این کد ها رو توی جدول قرار بدم
منظورم اینکه شما این کدهایی که گفتید توی یک کادری هست من چطور باید این کار رو بکنم لطفا کمکم کنید .
ممنون
پاسخ: 
سلام
چند راه حل برای این کار وجود دارد، ساده ترین حالت استفاده از تگ textarea است، مثال:
<textarea cols="50" rows="10" readonly="readonly">
کدها را در این قسمت قرار دهید
</textarea>
راه حل حرفه ای تر و البته پیچیده تر استفاده از تگ code و تنظیم استایل آن با CSS است.
نکته: کدها را باید در حالت HTML در قسمت ارسال مطالب درج کنید.
نویسنده: reyhane
زمان: ۰۹:۰۴:۰۵ - تاریخ: ۱۳۹۲/۱۱/۱۳
عالیییییی بود لاااااااایییییک ....
فقط اگه میشه کد اینکه یه مطلبی به حالت چشمک زن در بیاد هم بگید ممنون میشم دوست عزیز
پاسخ: 
برای ایجاد متن چمک زن با استفاده از خاصیت های CSS3 می توانید از کد زیر استفاده کنید:
<style type="text/css">
.blink{
-webkit-animation-name:blinker;
-webkit-animation-duration:1s;
-webkit-animation-timing-function:linear;
-webkit-animation-iteration-count:infinite;
-moz-animation-name:blinker;
-moz-animation-duration:1s;
-moz-animation-timing-function:linear;
-moz-animation-iteration-count:infinite;
animation-name:blinker;
animation-duration:1s;
animation-timing-function:linear;
animation-iteration-count:infinite;
}
@-moz-keyframes blinker{
0% {opacity:1.0;}
50% {opacity:0.0;}
100% {opacity:1.0;}
}
@-webkit-keyframes blinker{
0% {opacity:1.0;}
50% {opacity:0.0;}
100% {opacity:1.0;}
}
@keyframes blinker{
0% {opacity:1.0;}
50% {opacity:0.0;}
100% {opacity:1.0;}
}
</style>
<span class="blink">متن چمک زن</span>
نویسنده: علی
زمان: ۱۶:۵۸:۲۲ - تاریخ: ۱۳۹۲/۱۱/۲۱
سلام
ببخشید وقتی من از این تگ استفاده میکنم کل مطالب داخل صفحه ام متحرک میشن!
کاری میشه کرد که این طور نشه؟؟
البته بگم من این کد رو تو کدهای قالب وبلاگم وارد کردم
یه کمکی بکنید منتظرم.
پاسخ: 
سلام
باید با اصول تگ های HTML آشنا باشید، تگ ها معمولا با عبارتی باز و با عبارتی بسته می شوند و بر روی موارد درون خود تاثیر می گذارند، حال باید ببینید:
1- تگ را به درستی باز و بسته کرده اید.
2- درون تگ چه خروجی ایجاد می شود.
نویسنده: آرزو
زمان: ۲۰:۲۶:۳۸ - تاریخ: ۱۳۹۲/۱۲/۰۶
سلام
استادمون ازمون خواسته که یه کلمه رو با ++notepad متحرک کنیم بطوری که حالت موجی داشته باشه و به هر طرفی حرکت کنه. اما با تگ marquee و سه تا صفتی که داره و direction ها نتونستم همچین کاری رو انجام بدم . شما میتونید کمکم کنید؟ تا هفته دیگه مهلت دارم :(
پاسخ: 
سلام
لطفا در وب به دنبال کدهای جاوا اسکریپت برای زیباسازی جملات و متن ها بگردید، نمونه های زیادی وجود دارد!
نویسنده: Ingenieur
زمان: ۱۴:۵۳:۴۸ - تاریخ: ۱۳۹۳/۰۱/۰۱
با درود
چگونه میتونیم از این کد برای چند جمله استفاده کنیم ؟؟
به طوری که بعد از هر جمله یک وقفه انجام شود
پاسخ: 
سلام
کدهای ساده HTML چنین قابلیتی ندارند، برای اینگونه موارد باید از جاوا اسکریپت استفاده کنید که خود مبحث مفصلی دارد.
نویسنده: رضا
زمان: ۰۰:۰۹:۴۸ - تاریخ: ۱۳۹۳/۰۱/۲۴
سلام اگر بخواهیم تصادفی و دارای لینک باشد متن به چی شکل باید باشد؟؟؟ با تشکر
پاسخ: 
سلام
برای لینک می توانید از تگ a درون تگ marque استفاده کنید، اما برای نمایش تصادفی متن ها، باید از جاوا اسکریپت استفاده کنید، مثال:
<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"><a href="http://webgoo.ir">'+rand_text[i]+'</a></marquee>');
//-->
</script>
نویسنده: میلاد مهدویان
زمان: ۱۸:۳۲:۵۸ - تاریخ: ۱۳۹۳/۰۲/۰۶
سلام
من میخوام متنهای قسمت (مطالب جدید سایت) توی وبلاگم متحرک کنم . لطفا راهنمایی کنید .
اگه ممکنه ، برای اینکه منظورم بهتر متوجه بشید ، به وبلاگم سری بزنید و ببینید .
و اگه ممنکه ، پاسخ منو توی نظرات وبلاگم بدید . ممنون میشم. منتظرتون هستم .
با سپاس
پاسخ: 
سلام
دوست گرامی برای انجام این کار نیاز به ویرایش سورس قالب وبلاگ است که خود نیازمند آشنایی با اصول کدهای HTML است، در این صورت می توانید به راحتی تگ marquee را برای قسمت "مطالب جدید سایت" اعمال کنید (کافی است شروع تگ را در ابتدای بلاک ul و پایان آن را در انتهای بلاک ul مربوط به نمایش مطالب جدید قرار دهید).
نویسنده: نفیسه قاسمی
زمان: ۱۴:۰۰:۱۷ - تاریخ: ۱۳۹۳/۰۲/۲۲
سلام می خواستم بدونم اگر بخواهیم اطلاعات متن از داخل دیتابیس خوانده شود و خلاصه ای از متن را نمایش بده باید چه کار کنم ؟
پاسخ: 
سلام
برای فراخوانی اطلاعات باید با دستور SELECT در MySQL آشنا باشید، همچنین برای نمایش قسمتی از یک پاراگراف، آموزشی مشابه در سایت وجود دارد، کافی است در وب عبارت "نمایش قسمتی از متن و پاراگراف در PHP" را جستجو کنید!
نویسنده: بابک اقراری
زمان: ۱۰:۲۷:۴۵ - تاریخ: ۱۳۹۳/۰۲/۲۳
سلام خیلی ممنون از شما. اگه وقت کردی به وبلاگ من سر بزن ببین درست کار کردم یا نه.
نویسنده: مهران شاگردی
زمان: ۱۰:۵۴:۳۴ - تاریخ: ۱۳۹۳/۰۲/۳۰
با سلام و تشکر فراوان از سایت بسیار خوبتون که کمک خیلی زیادی به من کرده، می‌خواستم بدونم چطور می‌شه یک marquee ایجاد کرد که انتهای متن به ابتدا بچسبه؟؟
پاسخ: 
سلام
چنین قابلیتی در تگ marquee وجود ندارد! شاید بتوانید نمونه های آماده ای در وب پیدا کنید که مبتنی جاوا اسکریپت یا جی کئوری نوشته شده باشند (عبارت continuous marquee را جستجو کنید).
نویسنده: ناشناس
زمان: ۱۷:۱۹:۲۸ - تاریخ: ۱۳۹۳/۰۳/۰۴
بسم الله الرحمن الرحیم
با سلام
اگر بخواهم متن متحرک را در header سایت قرار دهم باید چه کنم؟
حق (جلّ جلاله) یارتان
با تشکّر فراوان
پاسخ: 
سلام
برای این کار الزاما باید با HTML آشنایی داشته باشید، در این صورت می توانید سورس قالب سایتتان را ویرایش کرده و در هر قسمت که مناسب باشد، کدها را بین سایر کدهای موجود قرار دهید.
نکته: با توجه به اینکه از چه برنامه ای برای مدیریت سایتتان استفاده می کنید، روش ویرایش قالب نیز متفاوت خواهد بود.
more لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- مواردی که به کلی خارج از موضوع این مطلب هستند را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم، غیرضروری و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ خاصی داده نخواهد شد.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- تمام یادداشت ها بررسی و برای هر کاربر زمان مشخصی جهت پاسخگویی در نظر گرفته می شود، لذا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.




6 × 7
 refresh
نکته:
با توجه به تاریخ نگارش آموزش های سایت و پیشرفت تکنولوژی های مرتبط با وب در سالیان اخیر، محتوای برخی از مطالب قدیمی ممکن است نیاز به ویرایش و به روزرسانی داشته باشد که این کار هم زمان با تهیه نسخه جدید «وبگو» به مرور در حال انجام است، لطفا در استفاده از مطالب سایت به این نکته دقت داشته و حتی المقدور از چند منبع مختلف استفاده نمائید.
آخرین دیدگاه ها
form حامد
در:
عالی بود
۲۱:۳۸:۳۱ ۱۳۹۸/۱۱/۰۷

form ناشناس
در:
سلام خیلی ممنون بابت پاسخ سریعتون خیلی دنبال همین دو خط کد بودم برای یادگیری سریع ریجکس ولی با سرچ پیدا نکردم و...
۱۸:۰۳:۴۳ ۱۳۹۸/۱۱/۰۷

form فرید
در:
درود بشما، میخواستم بدونم مثل کلمه @، کلمه ایی ساین هم داریم؟ با تشکر
۱۲:۱۹:۰۷ ۱۳۹۸/۱۱/۰۷

form ناشناس
در:
سلام میشه لطفا به سوالم جواب بدید من می خوام با استفاده از عبارات با قاعده تمام تگ های html رو تشخیص بدم...
۱۰:۱۳:۰۵ ۱۳۹۸/۱۱/۰۷

form PewDiePie
در:
سلام چطور می تونم این کد رو یه لینک هم بهش اضافه کنم یعنی این که وقتی عکس رو می بینی طرف بتونه...
۲۳:۳۶:۲۶ ۱۳۹۸/۱۱/۰۶

form رسول
در:
سلام میخوام بجای نمایش متن، متن موجود در یه لینکو بهم نشون بده ممنون میشم کمکم کنید
۱۳:۳۸:۱۸ ۱۳۹۸/۱۱/۰۶

form حسن
در:
من مطابق کد نوشته شده شما میخواستم آدرس
۱۴:۱۰:۱۳ ۱۳۹۸/۱۱/۰۵

form saemrezaei
در:
سلام واقعا عالییه خیلی استفاده کردم به وبلاگم سر بزن لطفا.
۱۳:۳۷:۳۴ ۱۳۹۸/۱۱/۰۵

form نصراله رضایی
در:
سلام در ادمین های گذشته که باز می کنم تصاویر مشاهده نمی شود و من را به آدرس Huge domains.com ارجاع می...
۲۲:۳۹:۵۳ ۱۳۹۸/۱۱/۰۴

form نقدی زاده
در:
واقعا مرسی یه overflow-y:hidden به body دادم اسکرل افقی برای صفحه نمایش تبلت از بین رفت
۱۴:۴۴:۱۳ ۱۳۹۸/۱۱/۰۴

form وحید پوربشیری
در:
سلام لطفا یکی که خوب جاوا اسکریپت بلده بیاد به این آیدی ت.ل.گ.ر.ا.م Alpha2020@ یه کد برام بنویسه پول هم میدم
۱۱:۱۲:۳۲ ۱۳۹۸/۱۱/۰۲

form امین
در:
سلام تشکر بابت راهنماییتون. منظور من این بود که: الان با ثبت نام کاربر a در سایت اطلاعاتش در دیتابیس ثبت میشه و یک پوشه...
۰۳:۱۲:۴۰ ۱۳۹۸/۱۱/۰۲

form شریفی
در:
سلام معنی متن زیر چیست؟
۱۸:۲۸:۰۹ ۱۳۹۸/۱۱/۰۱

form امین
در:
سلام خسته نباشید یه اسکریپت دارم که وقتی کاربر ثبت نام میکنه یه پوشه و محتواش ایجاد میشه. میخوام یه صفحه با هر ثبت نام...
۱۴:۱۸:۵۱ ۱۳۹۸/۱۰/۳۰

form Admin
در:
سلام دوست عزیز. میشه بگویید چگونه میتوان در وبلاگ کادری را باز کرد که بازدید کنندگان بتوانند در آن چیزی بنویسند. ممنون میشم...
۱۱:۲۸:۵۰ ۱۳۹۸/۱۰/۳۰
آگهی