برای ایجاد تیکر یک فایل متنی جدید ایجاد کنید و کدهای زیر را داخل آن وارد کنید و با پسوند js در پوشه images ذخیره کنید :
[HTML]
var theSummaries = new Array(
"به فروشگاه بزرگ پرنس شاپ خوش آمدید." ,
"کلیه محصولات دارای شماره مجوزاز وزارت فرهنگ و ارشاد اسلامی است",
"مشتریان عزیز شما می توانید برای اطمینان از صحت محتوای بازیها کد",
"پنج (5) رقمی درج شده بر روی هولوگرام محصول را به شماره پیامک ",
"(000000) ارسال کنید.",
"کلیه بازیهای رایانه ای و نرم افزارهای فروشگاه به صورت اوریجینال بوده...",
"و با بسته بندی های ضد ضربه برای مشتری ارسال می گردد...",
" آنلاین سفارش دهید ، آنلاین پرداخت کنید...",
"10% تخفیف ویژه برای کسانی که خرید خودرا نقداً انجام می دهند...",
"سیستم همکاری در فروش ، نظر سنجی از مشتریان...",
"امکان رهگیری کالا در روش خرید پستی...",
"پرنس شاپ ، فروشگاهی به وسعت ایــران...",
"ثبت شده در پایگاه سازماندهی وزارت فرهنگ و ارشاد اسلامی."
);
var theSiteLinks = new Array();
// Control parameters
var theCharacterTimeout = 100;
var theStoryTimeout = 2500;
var theWidgetOne = "_";
var theWidgetTwo = "-";
var theWidgetNone = "";
var theItemCount = theSummaries.length;
var NS6=(document.getElementById && !document.all) ? true : false;
// Ticker startup
function startTicker()
{
// Define run time values
theCurrentStory = -1;
theCurrentLength = 0;
// Locate base objects
if (document.getElementById) {
runTheTicker();
}
else {
document.write("<style>.ticki{display:none;}.ticko {border:0px; padding:0px;}</style>");
return true;
}
}
// Ticker main run loop
function runTheTicker()
{
var myTimeout;
// Go for the next story data block
if(theCurrentLength == 0)
{
theCurrentStory++;
theCurrentStory = theCurrentStory % theItemCount;
theStorySummary = theSummaries[theCurrentStory];
theTargetLink = theSiteLinks[theCurrentStory];
}
var textTitle = theStorySummary.substring(0,theCurrentLength) + whatWidget();
if (theTargetLink ) {
if (NS6) {
document.getElementById("theTicker").innerHTML = '<font color="#2692C7"><a href="'+ theTargetLink +'" target="_blank" style="text-decoration: none"><font color="#2692C7">'+textTitle+'</font></a></font>';
}
else {
document.all.theTicker.innerHTML = '<font color="#2692C7"><a href="'+ theTargetLink +'" target="_blank" style="text-decoration: none"><font color="#2692C7">'+textTitle+'</font></a></font>';
}
}
else {
if (NS6) {
document.getElementById("theTicker").innerHTML = '<font color="#2692C7">'+textTitle+'</font>';
}
else {
document.all.theTicker.innerHTML = '<font color="#2692C7">'+textTitle+'</font>';
}
}
// Modify the length for the substring and define the timer
if(theCurrentLength != theStorySummary.length)
{
theCurrentLength++;
myTimeout = theCharacterTimeout;
}
else
{
theCurrentLength = 0;
myTimeout = theStoryTimeout;
}
// Call up the next cycle of the ticker
setTimeout("runTheTicker()", myTimeout);
}
// Widget generator
function whatWidget()
{
if(theCurrentLength == theStorySummary.length)
{
return theWidgetNone;
}
if((theCurrentLength % 2) == 1)
{
return theWidgetOne;
}
else
{
return theWidgetTwo;
}
}
startTicker();
[/HTML]
لازم نیست از نحوه کار کد جاوای فوق سردربیاورید:13:...
خب فابل رو ذخیره کنید ، میریم سراغ style :
[HTML]
#nav{
background : #AEAEAE url(images/nav_bg.jpg) ;
height : 32px ;
width :960px ;
border : 5px solid #E5E4E4 ;
border-width:0 0 5px 0 ;
margin-right : 4px
}
#nav ul {
padding-right: 1px;
padding-left: 5px;
padding-bottom: 0px;
margin: 0px;
padding-top: 0px;
list-style: none
}
#nav ul li {
float: right;
}
#nav ul li A {
padding-right: 0px;
display: block;
padding-left: 5px;
padding-bottom: 5px;
margin: 5px 3px 0px;
font: 11px/14px tahoma;
color: #fff;
padding-top: 0px;
text-align: center;
text-decoration: none
}
#nav ul li A SPAN {
padding-right: 8px;
display: block;
padding-left: 3px;
padding-bottom: 4px;
padding-top: 5px
}
#nav ul li A {
background: url(images/nav_left.png) no-repeat left top
}
#nav ul li A SPAN {
background: url(images/nav_right.png) #fff no-repeat right top;
color: #757575 ;
line-height :1.6
}
#nav ul li A:hover {
background: url(images/nav_left_highlight.png) no-repeat left top
}
#nav ul li A:hover SPAN {
background: url(images/nav_right_highlight.png) #fff no-repeat right top;
color: #429FD2
}
.news {
width: 330px ;
height: 25px ;
margin-top: 6px ;
margin-left: 5px ;
float:left;
text-align:right;
z-index: 1000;
}
H1 {
border: 0px;
padding: 0px;
margin: 0px;
vertical-align: baseline ;
outline: 0 ;
list-style: none;
text-decoration: none ;
font: bold 15px Arial, sans-serif ;
color : #746363
}
H2 {
border: 0px;
padding: 0px;
margin: 0px;
vertical-align: baseline ;
outline: 0 ;
list-style: none;
text-decoration: none ;
font: bold 1.4em/1.6 Arial, sans-serif;
color : #746363
}
H3 {
border: 0px;
padding: 0px;
margin: 0px;
vertical-align: baseline ;
outline: 0 ;
list-style: none;
text-decoration: none ;
font: bold 1.3em/1.6 Arial, sans-serif;
color : #efca9c;
}
H4 {
border: 0px;
padding: 0px;
margin: 0px;
vertical-align: baseline ;
outline: 0 ;
list-style: none;
text-decoration: none ;
font: bold 1.2em/1.6 Arial, sans-serif;
color : #746363
}
[/HTML]
آموزش این درس به پایان رسید. دوستانی که آموزش رو دنبال می کنن ، قالب رو با فایرفاکس تست کنند اگه مشکل داره احتمالا جایی اشتباه کرده اید من کار خودم رو قرار میدم می تونید دانلود کنید و با کار خودتون مقایسه کنید.
[HTML]http://p30link.org/dll/ehsan.zip[/HTML]
در ضمن دوستانی هم که با css آشنایی ندارند این ایبوک رو دانلود کنند :
[HTML]http://dl.parsbook.org/server3/uploads/marja-css.zip
http://www.parsbook.org/1389/02/css.html
[/HTML]
