دسته بندی
دسترسی سریع
نحوه متحرک ساختن متن با تگ marquee در HTML
تگ marquee چیست و چه کاربردی دارد؟
چرا نباید از تگ marquee استفاده کنیم؟
دلایل و ضرورت استفاده از تگ marquee
نحوه استفاده از تگ marquee
ویژگی behavior
ویژگی bgcolor
ویژگی dir
ویژگی direction
ویژگی height و width
ویژگی loop
ویژگی scrollamount
ویژگی scrolldelay
کنترل اسکرول متن با جاوا اسکریپت
استفاده از CSS و JavaScript برای ایجاد متن متحرک
مثال و پیش نمایش آنلاین
تگ marquee چیست و چه کاربردی دارد؟
چرا نباید از تگ marquee استفاده کنیم؟
دلایل و ضرورت استفاده از تگ marquee
نحوه استفاده از تگ marquee
ویژگی behavior
ویژگی bgcolor
ویژگی dir
ویژگی direction
ویژگی height و width
ویژگی loop
ویژگی scrollamount
ویژگی scrolldelay
کنترل اسکرول متن با جاوا اسکریپت
استفاده از CSS و JavaScript برای ایجاد متن متحرک
مثال و پیش نمایش آنلاین
نحوه متحرک ساختن متن با تگ marquee در HTML
در گستره تگ های مختلف 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>
پیش نمایش آنلایندسته بندی: آموزش کاربردی » HTML
مطالب بیشتر:
پخش فایل صوتی (آهنگ، موسیقی پس زمینه) در سایت و وبلاگ
نمایش فیلد جستجوی گوگل در سایت یا وبلاگ
نحوه درج علامت های خاص در HTML
چگونه در وبلاگ و سایت، لینک دانلود قرار دهیم؟
نحوه نمایش فیلم و کلیپ ویدئویی در سایت و وبلاگ
پخش فایل صوتی (آهنگ، موسیقی پس زمینه) در سایت و وبلاگ
نمایش فیلد جستجوی گوگل در سایت یا وبلاگ
نحوه درج علامت های خاص در HTML
چگونه در وبلاگ و سایت، لینک دانلود قرار دهیم؟
نحوه نمایش فیلم و کلیپ ویدئویی در سایت و وبلاگ
دیدگاه
۱۲۰ دیدگاه برای این مطلب ارسال شده است.
دیدگاه جدید بر اساس تاریخ ارسال در انتهای دیدگاه های موجود نمایش داده می شود.
دیدگاه جدید بر اساس تاریخ ارسال در انتهای دیدگاه های موجود نمایش داده می شود.
منتظر
۰۹:۰۳ ۱۳۹۱/۰۳/۳۱
عالیه کارتون...
توضیحات خیلی مناسبن
ممنون
توضیحات خیلی مناسبن
ممنون
خواهش می کنیم؛ نظر لطف شماست.
۱۸:۴۲ ۱۳۹۱/۰۴/۰۹
با درود فراوان و عرض خسته نباشید .
دوست عزیز در این مبحث شما جای یک آموزش دیگر خالی مونده. دوست عزیز شما در بعضی بحثاتون جای چند چیز رو خالی کرده اید که شاید بعضی ها دچار اشتباه شوند.
اگر شما بتوانید روش حرکت کردن جملات فارسی از چپ به راست را بدون رنگ پشت زمینه یا پس زمینه به صورتی که به صورت مداوم حرکت کند را به کاربران یاد بدهید بسیار ممنون میشم.
در بعضی مطالب شما یا رنگ پشت صفحه است که.... و یا در بعضی از مطالب شما نوع حرکت دادن جملات (منظور از چپ به راست یا از راست به چپ) نبود یا اگر بود رنگیش بود که بازم تطبیق رنگش با رنگ صفحه وبلاگ خودش مکافاته. لطفا آموزشش بدین، لذا خاطر نشان کنم که اکثر وبلاگ نویسان از مخلوط کردن کدها چیزی نمیدانند. پس اگر همین حرکتی که من گفتم را آموزش بدهید بسیار بسیار ممنون میشم.
دوست عزیز در این مبحث شما جای یک آموزش دیگر خالی مونده. دوست عزیز شما در بعضی بحثاتون جای چند چیز رو خالی کرده اید که شاید بعضی ها دچار اشتباه شوند.
اگر شما بتوانید روش حرکت کردن جملات فارسی از چپ به راست را بدون رنگ پشت زمینه یا پس زمینه به صورتی که به صورت مداوم حرکت کند را به کاربران یاد بدهید بسیار ممنون میشم.
در بعضی مطالب شما یا رنگ پشت صفحه است که.... و یا در بعضی از مطالب شما نوع حرکت دادن جملات (منظور از چپ به راست یا از راست به چپ) نبود یا اگر بود رنگیش بود که بازم تطبیق رنگش با رنگ صفحه وبلاگ خودش مکافاته. لطفا آموزشش بدین، لذا خاطر نشان کنم که اکثر وبلاگ نویسان از مخلوط کردن کدها چیزی نمیدانند. پس اگر همین حرکتی که من گفتم را آموزش بدهید بسیار بسیار ممنون میشم.
ضمن تشکر، باید بگوییم که منظور شما کاملا روشن است اما لطفا توجه داشته باشید بر عکس برخی سایت های مربوط به اسکریپت که به قرار دادن کد اکتفا می کنند، در اینجا هدف از آموزش ها صرف ارائه کد آماده نیست، ما سعی می کنیم جزئیات کار و نحوه سفارشی سازی را نیز به کاربران ارائه کنیم طرز استفاده بستگی به خود آنها و نیازشان دارد، متاسفانه خلاء منابع آموزشی مناسب مخصوصا در زمینه وب به زبان فارسی باعث شده است که اکثر کاربران به صرف کپی ساده عادت کرده و سعی نکنند سطح دانش عمومی خود را در این زمینه بالا ببرند. مشکلی که شما در نظرتان مطرح کرده اید با یک کد رنگ هگز ساده قابل تنظیم است که به راحتی می توانید از برنامه هایی نظیر فتوشاپ کد مورد نظر خودتان را به جای CCCCCC جایگزین کنید. در مورد حرکت از چپ به راست نیز در آموزش گفته شده، قسمت مربوط به ویژگی dir را ملاحظه کنید.
۱۲:۴۴ ۱۳۹۱/۰۴/۳۰
سلام تشکر بسیار جالب بود / موفق باشید
۱۸:۲۲ ۱۳۹۱/۰۶/۱۴
سلام ببخشید مزاحم شدم من ی سوالی داشتم اینه که برای اینکه متنی رو متحرک کنم واسه وبلاگم ولی توضیحاتی که اینجا دادین برای من ی خرده سخته شما چند کداینجا نوشتین ولی من نمیدونم این کدهارو کجا بزارم ؟؟؟ بعدش ی سری به وبم بزنین ممنون میشم
کد نهایی یعنی آخرین کد را در قسمت ویرایش قالب وبلاگ خود قرار دهید.
۱۸:۲۴ ۱۳۹۱/۰۶/۲۱
با سلام و خسته نباشید جناب یه سوال داشتم اگر امکان دارد راهنمایی نمایید
اول وبلاگ بنده یه مطلب با عکس قرار دادم الان میخوام عکس را متحرک کنم و نوشته ثابت باشد امکان دارد لطفا به ویلاگ بنده سر بزنید
با تشکر علیرضا
اول وبلاگ بنده یه مطلب با عکس قرار دادم الان میخوام عکس را متحرک کنم و نوشته ثابت باشد امکان دارد لطفا به ویلاگ بنده سر بزنید
با تشکر علیرضا
برای متحرک کردن متن یا عکس کافی است آن را بین تگ های 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) اما جواب نمیده.
اگه امکان داره راهنماییم کنید
ممنونم
من در طراحی از یک 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>
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 استفاده کنید.آخرین دیدگاه ها
برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
سیدعباسی
با سلام من میخوام از متن زیر لینکش رو دربیارم و در آخر مقدار 3088 رو بصورت خروجی نهایی داشته باشم با...۱۴۰۳/۰۷/۰۷
مجتبی
سلام وقت بخیر میخوام یک روز به تاریخ دریافتی اضافه شه ممنون میشم راهنمایی کنید۱۴۰۳/۰۶/۲۰
پرتو
سلام خوبید؟ خسته نباشیذ ببخشید مزاحم شدم می خواستم بگم من به شما ایمیل زدم ولی هنوز شما جواب ندادین می تونم بپرسم چرا سوال...۱۴۰۳/۰۶/۱۵
در انتظار بررسی: ۰
پاسخگویی به سوالات ممکن است تا ۲۴ ساعت زمان ببرد.
پاسخگویی به سوالات ممکن است تا ۲۴ ساعت زمان ببرد.
- به سوالات کلی، زمانبر، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده شده یا به بخش برنامه نویسی اختصاصی ارجاع داده می شوند.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین یا به صورت حساب موقت و آزمایشی قرار دهید تا امکان بررسی دقیق مشکل و خطایابی میسر باشد.
- تمام دیدگاه های ارسالی خوانده شده و برای هر کاربر مدت زمان لازم جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.