Audio

2. پخش موزیک همراه با دکمه های کنترل برای کاربر.

تبصره 1: دقت داشته باشید که در این کد آدرس فایل خود را باید در دو جا وارد کنید، آن هم به جای هر دو گزینه ی YOUR URL باید جایگزین شود.
تبصره 2: این کد بر خلاف کد فوق باید در مکان مشخصی در قسمت بدن، یعنی ما بین دو تگ <body></body> قرار گیرد.
تبصره 3: من توصیه میکنم برای فایلهایی که حجم آنها از 200 کیلوبایت بیشتر است از این کد استفاده کنید.

3. انتخاب موزیک توسط کاربر از روی هارد دیسک خود همراه با تایمر پخش.

تبصره: همانطور که در این کد ملاحضه می کنید، تگهای سر و بدن ( <head></head> و <body></body> ) آمده است. من توصیه میکنم شما محتویات ما بین هر دو تگ را تک تک کپی بگیرید و در قسمت های سر و بدن کد خود بچسبانید تا از تکرار مجدد این دو تگ جلوگیری شود. البته تکرار این دو تگ ممانعتی ندارد ولی بهتر است یکبار تکرار شوند.

Select All

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Language" content="fa">
<script language="javascript">
function da(form){
ut=new Date()
h=ut.getHours()
m=ut.getMinutes()
if (h<10) h="0"+h
if (m<10) m="0"+m
time=h+":"+m
document.frm.txt.value=time
setTimeout("da(this.form)",1000)
}
function alermon(){
hr=document.frm.se1.selectedIndex
mn=document.frm.se2.selectedIndex
tim=document.frm.se1.options[hr].value+":"+document.frm.se2.options[mn].value
if (h>12) time="0"+(h-12)+":"+m
if (h=00) time="12"+":"+m
if (time==tim){
document.all.sound.src=document.frm.alermsound.value
}
else setTimeout("alermon()",1000)
}
function alermoff(){
document.all.sound.src=""
tim=0
}
</script>
<bgSound src="" id="sound">
</head>
<body onload="da(this.form)">
<p align="right"><font color="red" size="6">Alerm Clock</font><form name="frm">
<span dir="rtl"><font face="Tahoma" size="2">ساعت فعلی کامپیوتر 
شما:</font><input dir="ltr" type="text" name="txt" size="5"></span>
<span dir="rtl"><br /><br /><font face="Tahoma" size="2" color="#0000FF">تنظیم 1:</font>
<font face="Tahoma" size="2">این ساعت چه زمانی فعال شود؟ لطفاً ساعت مورد نظر را 
وارد کنید:</font><select dir="ltr" name="se1" size="1">
<option selected value="01">01 or 13</option><option value="02">02 or 14</option>
<option value="03">03 or 15</option><option value="04">04 or 16</option>
<option value="05">05 or 17</option><option value="06">06 or 18</option>
<option value="07">07 or 19</option><option value="08">08 or 20</option>
<option value="09">09 or 21</option><option value="10">10 or 22</option>
<option value="11">11 or 23</option><option value="12">12 or 24</option>
</select>  <font size="2" face="Tahoma">لطفا دقیقه ی مورد نظر را وارد کنید:</font>
<select dir="ltr" name="se2" size=1><option selected value="00">00</option>
<option value="01">01</option><option value="02">02</option>
<option value="03">03</option><option value="04">04</option>
<option value="05">05</option><option value="06">06</option>
<option value="07">07</option><option value="08">08</option>
<option value="09">09</option><option value="10">10</option>
<option value="11">11</option><option value="12">12</option>
<option value="13">13</option><option value="14">14</option>
<option value="15">15</option><option value="16">16</option>
<option value="17">17</option><option value="18">18</option>
<option value="19">19</option><option value="20">20</option>
<option value="21">21</option><option value="22">22</option>
<option value="23">23</option><option value="24">24</option>
<option value="25">25</option><option value="26">26</option>
<option value="27">27</option><option value="28">28</option>
<option value="29">29</option><option value="30">30</option>
<option value="31">31</option><option value="32">32</option>
<option value="33">33</option><option value="34">34</option>
<option value="35">35</option><option value="36">36</option>
<option value="37">37</option><option value="38">38</option>
<option value="39">39</option><option value="40">40</option>
<option value="41">41</option><option value="42">42</option>
<option value="43">43</option><option value="44">44</option>
<option value="45">45</option><option value="46">46</option>
<option value="47">47</option><option value="48">48</option>
<option value="49">49</option><option value="50">50</option>
<option value="51">51</option><option value="52">52</option>
<option value="53">53</option><option value="54">54</option>
<option value="55">55</option><option value="56">56</option>
<option value="57">57</option><option value="58">58</option>
<option value="59">59</option></select></span><p align="right">
<span dir="rtl"><font face="Tahoma"><font size="2" color="#0000FF">تنظیم 2:</font><font size="2"> 
فایل خود را انتخاب کنید:</font></font><input dir="ltr" type="file" size=36 name="alermsound"></span><p align="right">
<span dir="rtl"><font color="#0000FF" size="2" face="Tahoma">تنظیم 3:</font><font size="4" color="#0000FF">
</font><input type="button" value="on" onclick="alermon()">  <input type="button" value="off" onclick="alermoff()"></span><p align="right">
<span dir="rtl"><font size="2" face="Tahoma">توجه داشته باشید که هنگامی که این 
صفحه در حالت Minimize باشد صدای موزیک شنیده نخواهد شد.</font>
</span></p></form></body>

Links

Designs By: Nazanin Studio

4. کد اصلی پیوند (لینک) دادن.

تبصره 1: آدرس صفحه ی مورد نظرتان را جهت لینک دادن باید به جای YOUR URL جایگزین کنید.
تبصره 2: در خصیصه ی title باید به جای واژه ی TOOLTIP توضیح کوتاهی درباره ی مقصد لینک وارد کنید. (حذف این خصیصه ممانعتی ندارد.)
تبصره 3: در خصیصه ی target که مقدار خصیصه اش در حال حاضر self_ است، میتوانید از مقدار blank_ هم استفاده کنید. فرق این دو مقدار در هدف لینک است یعنی اگر این مقدار بر روی self_ باشد مقصد لینک در همان صفحه اجرا و اگر blank_ مقدار دهی شده باشد مقصد لینک در یک صفحه ی جدید باز خواهد شد.
تبصره 4: به جای واژه های YOUR NAME LINK باید اسمی از لینک وارد کنید. (این اسم در صفحه قابل رویت و برای رفتن به مقصد لینک فعال میشود.) در کل هر تگی مثل تگ <img> بین دو تگ <a></a> قرار گیرد برای لینک فعال خواهد بود. (تگ <img> برای گذاشتن عکسها بکار میرود)

5. رفتن به مقصد لینک بدون کلیک!

تبصره 1: این کد زمانی فعال میشود که نشانگر موس کاربر بر روی اسم لینک یا تصویر لینک شده قرار گیرد.
تبصره 2: شما فقط باید به جای YOUR URL آدرس مقصد و به جای YOUR NAME LINK اسم لینک را جایگزین کنید.

6. سفارشی کردن رنگ لینکها توسط شیوه ها. (CSS)

تبصره 1: این کد را بهتر است در قسمت سر یعنی ما بین دو تگ (<head></head>) قرار دهید.
تبصره 2: من توصیه میکنم که اگر در لیست کد صفحه ی شما دو تگ (<style></style>) وجود دارد فقط کدهای میانی را کپی بگیرید و ما بین آنها بچسبانید. (در صورت که لینکهای شما از قبل سفارشی (فرمت) شده است، میتوانید آنها را حذف و اینها را جایگزین کنید.)

7. حذف زیر خط لینکها توسط شیوه ها. (CSS)

8. جعبه ی لینک همراه با دکمه ی تایید.

تبصره 1: در این کد آدرس لینکهای خود را به جای واژه های YOUR URL جایگزین کنید. (YOUR URL2 , YOUR URL1 و ....)
تبصره 2: اسم لینکها هم باید به جای واژه های YOUR NAME URL جایگزین شود. (YOUR NAME URL2 , YOUR NAME URL1 و ....)
تبصره 3: در این کد من جای شش لینک را باز کردم، در صورتی که لینکهای شما بیشتر است میتوانید با اضافه کردن کد زیر در مکان مربوطه به تعداد نیاز از این جعبه لینک به راحتی استفاده کنید. <option value="YOUR URL">YOUR NAME URL</option>

9. جعبه ی لینک بدون دکمه ی تایید.

تبصره 1: در این کد بجای واژه ی YOUR TEXT اسمی در نظر گرفته و جایگزین کنید. به عنوان مثال: (انتخاب نمایید)
تبصره 2: آدرس لینکهای خود را به جای واژه های YOUR URL جایگزین کنید. (YOUR URL2 , YOUR URL1 و ....)
تبصره 3: اسم لینکها هم باید به جای واژه های YOUR NAME URL جایگزین شود. (YOUR NAME URL2 , YOUR NAME URL1 و ....)
تبصره 4: در این کد من جای شش لینک را باز کردم، در صورتی که لینکهای شما بیشتر است میتوانید با اضافه کردن کد زیر در مکان مربوطه به تعداد نیاز از این جعبه لینک به راحتی استفاده کنید. <option value="YOUR URL">YOUR NAME URL</option>

10. رقص نور دادن به لینکها.

تبصره 1: این کد را بهتر است در قسمت سر یعنی ما بین دو تگ (<head></head>) کد خودتون بچسبانید.
تبصره 2: در قسمتی از این کد با کمی دقت متوجه خواهید شد که نام بعضی از رنگها به انگلیسی نوشته شده که میتوانید آنها را به دلخواه خود تغییر دهید. (از کد رنگها هم میتوانید استفاده کنید)

11. لینکهای متحرک.

تبصره 1: آدرس لینکهای خود را به جای واژه های YOUR URL و اسم لینکها را به جای واژه های YOUR NAME LINK جایگزین نمایید.
تبصره 2: در این کد لینکها از پائین به سمت بالا حرکت میکنند، در صورتی که خلاف این را خواستارید میتوانید در خصیصه ی direction که در این کد با واژه ی up مقدار دهی شده است، با واژه ی down مقدار دهی کنید که در این صورت لینکها از بالا به پائین حرکت می کنند.

12. نمایش اطلاعات مقصد لینک روی نوار وضعیت.

تبصره 1: همانطور که در این کد ملاحضه می کنید، تگهای سر و بدن ( <head></head> و <body></body> ) آمده است. من توصیه میکنم شما محتویات ما بین هر دو تگ را تک تک کپی بگیرید و در قسمت های سر و بدن کد خود بچسبانید تا از تکرار مجدد این دو تگ جلوگیری شود. البته تکرار این دو تگ ممانعتی ندارد ولی بهتر است یکبار تکرار شوند.
تبصره 2: بعد از کپی، در قسمت بدن این کد با یک تگ لینک (<a></a>) برخورد خواهید کرد که باید آدرس مقصد لینک را به جای واژه ی YOUR URL و اسم لینک را به جای واژه ی YOUR NAME LINK جایگزین کنید.

13. لینک پرینت (چاپ صفحه).

14. منوی لغزان لینک (باز شو).

تبصره 1: همانطور که در این کد ملاحضه می کنید، تگهای سر و بدن ( <head></head> و <body></body> ) آمده است. من توصیه میکنم شما محتویات ما بین هر دو تگ را تک تک کپی بگیرید و در قسمت های سر و بدن کد خود بچسبانید تا از تکرار مجدد این دو تگ جلوگیری شود. البته تکرار این دو تگ ممانعتی ندارد ولی بهتر است یکبار تکرار شوند. دقت داشته باشید که در این کد در تگ بدن ( <body> ) خصیصه ای به نام OnLoad وجود دارد که شما باید (در صورت رعایت عدم تکرار تگ سر و بدن) این خصیصه را با مقدار تعیین شده اش در تگ ( <body> ) بگنجانید.
تبصره 2: در ادامـه ی کد به چـنـد تـگ لیـنـک، در قسـمـت بـدن خـواهـیـد رسـید که به جای آدرس URL لینک آدرس مربوطه را وارد و در ما بــیــن دو تگ (<a></a>) اسم لینک مربوطه را وارد می کنید.

Select All

<head>
<script language="JavaScript">
<!-- // Begin
function setVariables() {
if (navigator.appName == "Netscape") {
v = ".top=";
h = ".left=";
dS = "document.";
sD = "";
y = "window.pageYOffset";
x = "window.pageXOffset";
iW = "window.innerWidth";
iH = "window.innerHeight";
}

else {
h = ".pixelLeft=";
v = ".pixelTop=";
dS = "";
sD = ".style";
y = "document.body.scrollTop";
x = "document.body.scrollLeft";
iW = "document.body.clientWidth";
iH = "document.body.clientHeight";
}
xyz = 500;
innerX = eval(iW) - 115;
innerY = eval(iH) - 110;
object = "logo";
checkLocationA();
}
movex = 0;
movey = 0;
xdiff = 0;
ydiff = 0;
ystart = 0;
xstart = 0;

function checkLocation() {
yy = eval(y);
xx = eval(x);
ydiff = ystart - yy;
xdiff = xstart - xx;
if ((ydiff < (-1)) || (ydiff > (1))) movey = Math.round(ydiff / 10), ystart -= movey;
if ((xdiff < (-1)) || (xdiff > (1))) movex = Math.round(xdiff / 10), xstart -= movex;
eval(dS + object + sD + v + (ystart + innerY));
eval(dS + object + sD + h + (xstart + innerX));
setTimeout("checkLocation()", 10);
}

function checkLocationA() {
ystart = eval(y);
xstart=eval(x);
}

function switchLogo(abc) {
if (abc == "menu") {
eval(dS + object + sD + v + 0);
eval(dS + object + sD + h + (-200));
object = abc;
}
else xyz = setTimeout("delayLogo()", 2000)
}

function delayLogo() {
eval(dS + object + sD + v + 0);
eval(dS + object + sD + h + (-200));
object = 'logo';
}
//  End -->
</script>
</head>
<body OnLoad="setVariables();checkLocation()">
<div id="logo" style="position:absolute; visibility:show; left:0px; top:-200px; z-index:2">
<table border=0 cellspacing=10 cellpadding=0 width=100><tr><td><center><br><br><br>

</center></td></tr></table></div>
<div id="menu" style="position:absolute; visibility:show; left:0px; top:-200px; z-index:2">
<table border=0 cellspacing=10 cellpadding=0 width=100><tr><td><center>

</center></td></tr><tr><td><center>

</center></td></tr><tr><td><center>

<a href="http://www.your-web-site-address-here.com/page-three.html"; onmouseover="clearTimeout(xyz)"; onmouseout="switchLogo('logo')">Page Three</a>

</center></td></tr></table></div>

</body>

15. ایجاد ثانیه شمار برای مقصد یک لینک بدون دخالت کاربر.

تبصره 1: این کد را باید در قسمت بدن یعنی ما بین ( <body></body> ) بچسبانید.
تبصره 2: در قسمتی از کد به عبارتی به نام targetURL برخورد خواهید کرد که مقابل آن آدرس وبلاگ من وجود دارد که شما با حذف آدرس من و درج آدرس جدید میتوانید از این کد استفاده کنید.
تبصره 3: در سطری بائین تر از عبارتی در تبصره ی فوق ذکر شد عبارت دیگری به نام countdownfrom=40 وجود دارد که عدد 40 مقدار ثانیه ای است که شمارش شده و بعد از اتمام به مقصد لینک خواهد رفت، شما میتوانید این عدد را کم و یا زیاد معرفی کنید.

Images

Designs By: Nazanin Studio

16. کد اصلی گذاشتن عکس در صفحه ی وب.

تبصره 1: آدرس عکس خود را باید به جای YOUR URL جایگزین کنید.
تبصره 2: در خصیصه ی alt باید به جای واژه ی TOOLTIP توضیح کوتاهی درباره ی عکس خود وارد کنید. پر کردن این خصیصه سبب می شود که اگر عکس به هر دلیلی باز (Load) نشد، مقدار خصیصه به صورت نوشته درون کادر عکس ظاهر میشود. دقت داشته باشید که این خصیصه در IE به صورت ToolTip هم ظاهر خواهد شد. (حذف این خصیصه ممانعتی ندارد.)
تبصره 3: بعد از خصیصه ای در تبصره ی فوق ذکر شد خصیصه ی دیگری به نام Border وجود دارد که این خصیصه اگر مقدارش صفر نباشد کادری برای عکستان در نظر گرفته خواهد شد که پهنای این کادر بنا به عددی که مقدار دهی میکنید بستگی دارد که بر حسب پیکسل است.
تبصره 4: همانطور که ملاحضه می فرمائید این کد فاقد تگ بسته یعنی <img/> می باشد. در برنامه نویسی Html بعضی از تگ هایی که محدوده ای را در بر ندارند (مانند تگ <img>) فاقد تگ بسته ی جدا مانند <img/> می باشند و باید آنها را در انتهای تگ بست. (</ img>) دقیقاً همانند کد زیر. (حذف این عبارت " / " ممانعتی ندارد. ولی توصیه می شود که استفاده شود.)

17. لینک دادن همراه با تغییر تصویر در هنگام نشانه گیری با موس.

تبصره 1: آدرس صفحه ی مورد نظرتان را جهت لینک دادن باید به جای YOUR URL جایگزین کنید.
تبصره 2: آدرس عکسی که در هنگام نشانه گیری موس باید نشان داده شود را به جای http://URL 1 جای گزین و آدرس عکس اصلی را به جاهای http://URL 2 جایگزین کنید. (دقت داشته باشید که آدرس عکس اصلی در دو جای کد آمده است.)

18. منوی باز شو همراه با تغییر تصویر در هنگام نشانه گیری موس و انتخاب گزینه.

تبصره 1: همانطور که در این کد ملاحضه می کنید، تگهای سر و بدن ( <head></head> و <body></body> ) آمده است. من توصیه میکنم شما محتویات ما بین هر دو تگ را تک تک کپی بگیرید و در قسمت های سر و بدن کد خود بچسبانید تا از تکرار مجدد این دو تگ جلوگیری شود. البته تکرار این دو تگ ممانعتی ندارد ولی بهتر است یکبار تکرار شوند.
تبصره 2: من توصیه میکنم که اگر در لیست کد صفحه ی شما دو تگ (<style></style>) وجود دارد فقط کدهای میانی را کپی بگیرید و ما بین آنها بچسبانید.
تبصره 3: در این کد در هر جایی که با واژه های URL PIC 2 برخورد کردید باید آدرس عکسی که با نشانه گیری موس نشان داده میشود را جایگزین نمایید و در هر جایی که با واژه های URL PIC 1 برخورد می کنید باید آدرس عکس اصلی را جایگزین کنید.

Select All

<head>
<style>
.curhand{cursor:hand}
</style>
<script language="javascript">

function displayit(paragraph,title,imgmenu){
if (document.all[paragraph].style.display=='none')
{document.all[paragraph].style.display="block";
document.all[imgmenu].src="URL PIC 2"}
else {document.all[paragraph].style.display="none";
document.all[imgmenu].src="URL PIC 2"}
}

function setoverstyles(paragraph,imgmenu,title){
if (document.all[paragraph].style.display=='none')
{document.all[imgmenu].src="URL PIC 2";
document.all[title].style.textDecorationUnderline='true'}
else {document.all[imgmenu].src="URL PIC 2";
document.all[title].style.textDecorationUnderline='true'}
}

function setoutstyles(paragraph,imgmenu,title){
if (document.all[paragraph].style.display=='none')
{document.all[title].style.textDecoration='none';
document.all[imgmenu].src="URL PIC 1"}
else {document.all[imgmenu].src="URL PIC 2";
document.all[title].style.textDecoration='none'}
}

sw=0;
function displayall(){
if (sw==0) {swall.innerText="Hide all";document.all['x'].style.display='block';sw=1;
for (i=1;i<=5;i++)
{ xmenu='menu'+i ; ximg='imgmenu'+i ;
if (document.all[xmenu].style.display=='none') 
   {document.all[xmenu].style.display="block";document.all[ximg].src="URL PIC 2"}}}

else {swall.innerText="Show all";document.all['x'].style.display='none';sw=0;
for (i=1;i<=5;i++)
{xmenu='menu'+i;ximg='imgmenu'+i;
if (document.all[xmenu].style.display=='block') 
   {document.all[xmenu].style.display="none";document.all[ximg].src="URL PIC 1"}}}
}

function displayinline(text){
if (document.all[text].style.display=="none"){document.all[text].style.display="inline"}
else {document.all[text].style.display="none"}
}

</script>
</head>

<body>

</tr>
  </table><br>
<p id='x' style="display:none"></p>
<div onmouseover="setoverstyles('menu1','imgmenu1','title1')" onmouseout="setoutstyles('menu1','imgmenu1','title1')" class="curhand" onclick="displayit('menu1','title1','imgmenu1')" id="title1" style="position:static; width:150; height:15">
  <img id="imgmenu1" border="0" src="URL PIC 1" width="12" height="12" /> 
  Persian Musics</div>
<blockquote>
  <span id="menu1" style="display:none;">
  Item 1<br />
  Item 2<br />
  Item 3<br />
  Item 4<br />
  Item 5<br />
  Item 6<br />
  Item 7</span>
</blockquote>
<div onmouseover="setoverstyles('menu2','imgmenu2','title2')" onmouseout="setoutstyles('menu2','imgmenu2','title2')" class="curhand" onclick="displayit('menu2','title2','imgmenu2')" id="title2" style="position:static; width:150; height:15">
  <img id="imgmenu2" border="0" src="URL PIC 1" width="12" height="12" /> 
  Kharegi Musics</div>
<blockquote>
  <span id="menu2" style="display:none;">
  Item 1<br />
  Item 2<br />
  Item 3<br />
  Item 4<br />
  Item 5<br />
  Item 6<br />
  Item 7</span>
</blockquote>
<div onmouseover="setoverstyles('menu3','imgmenu3','title3')" onmouseout="setoutstyles('menu3','imgmenu3','title3')" class="curhand" onclick="displayit('menu3','title3','imgmenu3')" id="title3" style="position:static; width:150; height:15">
<img id="imgmenu3" border="0" src="URL PIC 1" width="12" height="12" /> 
  Persian Videos</div>
<blockquote>
  <span id="menu3" style="display:none;">
  Item 1<br />
  Item 2<br />
  Item 3<br />
  Item 4<br />
  Item 5<br />
  Item 6<br />
  Item 7</span>
</blockquote>
<div onmouseover="setoverstyles('menu4','imgmenu4','title4')" onmouseout="setoutstyles('menu4','imgmenu4','title4')" class="curhand" onclick="displayit('menu4','title4','imgmenu4');" id="title4" style="position:static; width:150; height:15">
<img id="imgmenu4" border="0" src="URL PIC 1" width="12" height="12" /> 
  Kharegi Videos</div>
<blockquote>
  <span id="menu4" style="display:none;">
  Item 1<br />
  Item 2<br />
  Item 3<br />
  Item 4<br />
  Item 5<br />
  Item 6<br />
  Item 7</span>
</blockquote>
<div onmouseover="setoverstyles('menu5','imgmenu5','title5')" onmouseout="setoutstyles('menu5','imgmenu5','title5')" class="curhand" onclick="displayit('menu5','title5','imgmenu5')" id="title5" style="position:static; width:150; height:15">
<img id="imgmenu5" border="0" src="URL PIC 1" width="12" height="12" />
  Funyy Videos</div>
<blockquote>
  <span id="menu5" style="display:none;">
  Item 1<br />
  Item 2<br />
  Item 3<br />
  Item 4<br />
  Item 5<br />
  Item 6<br />
  Item 7</span>
</blockquote>
</body>

19. نمایش تصویر به صورت شفاف که در هنگام نشانه گیری موس شفافیت را از دست می دهد.

تبصره 1: همانطور که در این کد ملاحضه می کنید، تگهای سر و بدن ( <head></head> و <body></body> ) آمده است. من توصیه میکنم شما محتویات ما بین هر دو تگ را تک تک کپی بگیرید و در قسمت های سر و بدن کد خود بچسبانید تا از تکرار مجدد این دو تگ جلوگیری شود. البته تکرار این دو تگ ممانعتی ندارد ولی بهتر است یکبار تکرار شوند.
تبصره 2: در این کد به یک تگ لینک هم بر خورد خواهید کرد که باعث میشود عکس شما برای مقصد لینک فعال باشد. در صورت نیاز میتوانید آدرس صفحه ی مقصد را به جای واژه های YOUR URL LINK جایگزین نمایید یا اینکه کلاً تگ لینک را حذف نمایید. (<a></a>)
تبصره 3: آدرس عکس خود را به جای واژه های URL PIC جایگزین نمایید.

Mouse

Designs By: Nazanin Studio

20. قفل کردن راست کلیک بدون پیام.

تبصره: این کد را بهتر است که در قسمت سر، یعنی ما بین دو تگ <head></head> قرار دهید.

21. قفل کردن راست کلیک با پیام.

تبصره: این کد را بهتر است که در قسمت سر، یعنی ما بین دو تگ <head></head> قرار دهید.

22. تصویر به دنبال نشانگر موس با قابلیت غیر فعال کردن.

تبصره 1: این کد را بهتر است که در قسمت سر، یعنی ما بین دو تگ <head></head> قرار دهید.
تبصره 2: در قسمت اول این کد به دو عدد چهل دقت کنید این دو عدد اندازه ی عکسهایی است که در کد نقش دکمه ی روشن و خاموش را بر عهده دارد که شما باید در صورت نیاز آن را تغییر دهید.
تبصره 3: بجای واژه های URL PIC ON باید آدرس عکسی را جایگزین کنید که نشان دهد کد فعال است و بجای واژه های URL PIC OFF آدرس عکسی را جایگزین کنیید که نشان دهد کد غیر فعال است.
تبصره 4: بجای واژه های URL PIC که من آنها را شماره گذاری کردم، باید آدرس عکسهایی را جایگزین کنید که می خواهید به دنبال نشانگر موس حرکت کنند. (میتوانید همه ی URL PIC های شماره گذاری شده را از آدرس یک عکس استفاده کنید و یا بلعکس.)

Select All

<script>
<!--
var ns = (document.layers)?1:0;
var Anim=new Array();
var imgwidth=40; // Image width
var imgheight=40; // Image height
var button = Array(); // to pre-cache images
button[0]=new Image();
button[0].src="URL PIC ON";
button[1]=new Image();
button[1].src="URL PIC OFF";

var text="<table width=10 bgcolor=#ffffff><td><a href='javascript:showhideAnimation()'><center><img name='Button' src='"+button[0].src+"' width='"+imgwidth+"' height='"+imgheight+"' border='0'></center></a></font></td></table>" // A bit of HTML code to display the button

//Initialize some variables to make the button always to appear on the frame's bottom-right corner
if (ns) {
document.write("<LAYER NAME='FlyOnOff' LEFT=0 TOP=0>"+text+"</LAYER>");
horz=".left";
vert=".top";
docStyle="document.";
styleDoc="";
innerW="window..innerWidth";
innerH="window.innerHeight";
offsetX="window.pageXOffset";
offsetY="window.pageYOffset";
}else {
document.write("<div id='FlyOnOff' style='position:absolute; visibility:show; left:235px; top:-50px; z-index:2'>"+text+"</div>");
horz=".pixelLeft";
vert=".pixelTop";
docStyle="";
styleDoc=".style";
innerW="document.body.clientWidth";
innerH="document.body.clientHeight";
offsetX="document.body.scrollLeft";
offsetY="document.body.scrollTop";
}

// Moves the button in the right position
function checkLocation() {
objectXY="FlyOnOff";
var availableX=eval(innerW);
var availableY=eval(innerH);
var currentX=eval(offsetX);
var currentY=eval(offsetY);
x=availableX-(imgwidth+30)+currentX;
y=availableY-(imgheight+20)+currentY;
eval(docStyle + objectXY + styleDoc + horz + "=" + x);
eval(docStyle + objectXY + styleDoc + vert + "=" + y);
}

Anim[0]=setInterval('checkLocation()', 10);

(document.layers)?window.captureEvents(Event.MOUSEMOVE):0;
(document.layers)?window.onMouseMove=getMousePosition:document.onmousemove=getMousePosition;

var Dot_Ro=60; //Dot's distance from the mouse pointer
var Dot_Theta=0; //Dot's initial angle
var Dot_Speed; //Dot's absolute Angular speed
var Dot_Direction=1; //Dot's direction (1=clockwise)
var Dot_x=0; //Dot's original position
var Dot_y=0;

var alpha; //Angle from the fly to the mouse
var mult; //Ausiliary variable to define the angle

var picX = 20; //Fly's coords.
var picY = 100;
var mouseX = 0; //Mouse coords.
var mouseY = 0;
var step = 10; //Pixels
var speed = 100;//u-seconds

// Dir specifies the right picture;
// img pre-caches images.
var dir = Array();
dir[-4]="URL PIC 1";
dir[-1]="URL PIC 2";
dir[-2]="URL PIC 3";
dir[-3]="URL PIC 4";
dir[3]="URL PIC 1";
dir[4]="URL PIC 2";
dir[1]="URL PIC 3";
dir[2]="URL PIC 4";
dir[0]="";

var img = Array();
for (var i=-4; i<5; i++){
img[i]=new Image();
img[i].src=dir[i];
}

// Some HTML code to show the fly.
if (ns) {
document.write("<LAYER NAME='FlyDiv' LEFT=0 TOP=0><img src="+dir[1]+" name='pic'></LAYER>");
}else {
document.write("<div id='FlyDiv' style='position:absolute'>");
document.write("<img name='pic' src=" + dir[1] + "></div>");
}

// Shows the proper image for the fly.
function display(direction) { //direction must be from -4 to 4, but not 0.
if (ns) {
document.pic.src = dir[direction];
}else{
pic.src = dir[direction];
}
}

function getMousePosition(e) {
mouseY=(ns)?e.pageY:window.event.y + document.body.scrollTop;
mouseX=(ns)?e.pageX:window.event.x + document.body.scrollLeft;
}

//Calculate new position
function calcNewPos() {

var dist=Math.sqrt(Math.pow(mouseY-picY,2) + Math.pow(mouseX-picX,2));
Dot_Speed=Math.PI/15;
Dot_Theta+=Dot_Direction*Dot_Speed;
Dot_x=mouseX+Dot_Ro*Math.cos(Dot_Theta);
Dot_y=mouseY+Dot_Ro*Math.sin(Dot_Theta);
var arg = (Dot_y-picY) / (Dot_x-picX);
mult = (Dot_x - picX < 0)? mult = -1:1;
alpha = Math.atan(arg);
var dx = mult * step * Math.cos(alpha);
var dy = mult * step * Math.sin(alpha);
picX += dx;
picY += dy;
}

//Shows or hides the fly when the "button" is pressed
function showhideAnimation() {
if (ns) {
document.layers['FlyDiv'].visibility=document.layers['FlyDiv'].visibility=="hide"?"show":"hide";
document.Button.src = document.layers['FlyDiv'].visibility=="hide"?button[1].src:button[0].src;
}else {
FlyDiv.style.visibility=="hidden"?FlyDiv.style.visibility = "visible":FlyDiv.style.visibility = "hidden";
Button.src = FlyDiv.style.visibility=="hidden"?button[1].src:button[0].src;
}
}

// Moves the fly around the screen
function moveFly() {
// moves the fly in a new position...
calcNewPos();
if (ns) {
document.layers['FlyDiv'].left = picX;
document.layers['FlyDiv'].top = picY;
}else{
FlyDiv.style.left = picX - pic.width / 2;
FlyDiv.style.top = picY - pic.height / 2;
}

// ... and changes the image.
alpha=-180*alpha/Math.PI;
alpha+=22.5;
var OK=0;
for(var i=0; (i<4)&& !OK; i++){
if (alpha<-Math.PI+45*i){
display(mult*(i+1));
OK=1;
}
}
}

// Changes Dot's turning direction
function ChangeDotDirection() {
Dot_Direction=-Dot_Direction;
Dot_Theta+=Math.PI;
}

//Go!
Anim[1]=setInterval('moveFly()', speed);
Anim[2]=setInterval('ChangeDotDirection()', speed*50);

function killIt()
{
for(var i=0;i<Anim.length;i++)
{
if(Anim[i])
{
clearInterval(Anim[i]);
Anim[i]=null;
}
}
}
//-->
</script>

23. حرکت فنری تصویر به دنبال نشانگر موس.

تبصره 1: این کد را بهتر است که در قسمت سر، یعنی ما بین دو تگ <head></head> قرار دهید.
تبصره 2: سعی کنید اندازه ی عکسهای انتخابی خودتان را کوچک کنید تا زود لود شود و جلوی دید کاربرتان را نگیرد. آدرس عکسهای خود را به جای واژه های URL PIC جایگزین کنید.

Select All

<div id="dot0" style="position: absolute; visibility: hidden; height: 11; width: 11;"><img src="URL PIC" /></div>
<div id="dot1" style="position: absolute; height:12; width:12;"><img src="URL PIC" /></div>
<div id="dot2" style="position: absolute; height:12; width:12;"><img src="URL PIC" /></div>
<div id="dot3" style="position: absolute; height:12; width:12;"><img src="URL PIC" /></div>
<div id="dot4" style="position: absolute; height:12; width:12;"><img src="URL PIC" /></div>
<div id="dot5" style="position: absolute; height:12; width:12;"><img src="URL PIC" /></div>
<div id="dot6" style="position: absolute; height:12; width:12;"><img src="URL PIC" /></div>

<!-- Begin
var nDots = 7;
var Xpos = 0;
var Ypos = 0;

// adds force in X and Y to spring for dot[i] on dot[j]
function springForce(i, j, spring)
{
var dx = (dots[i].X - dots[j].X);
var dy = (dots[i].Y - dots[j].Y);
var len = Math.sqrt(dx*dx + dy*dy);
if (len > SEGLEN) {
var springF = SPRINGK * (len - SEGLEN);
spring.X += (dx / len) * springF;
spring.Y += (dy / len) * springF;
   }
}
function animate() {	
var start = 0;
if (followmouse) {
dots[0].X = Xpos;
dots[0].Y = Ypos;	
start = 1;
}
for (i = start ; i < nDots; i++ ) {
var spring = new vec(0, 0);
if (i > 0) {
springForce(i-1, i, spring);
}
if (i < (nDots - 1)) {
springForce(i+1, i, spring);
}
var resist = new vec(-dots[i].dx * RESISTANCE, -dots[i].dy * RESISTANCE);
var accel = new vec((spring.X + resist.X)/ MASS, (spring.Y + resist.Y)/ MASS + GRAVITY);
dots[i].dx += (DELTAT * accel.X);
dots[i].dy += (DELTAT * accel.Y);
if (Math.abs(dots[i].dx) < STOPVEL &&
Math.abs(dots[i].dy) < STOPVEL &&
Math.abs(accel.X) < STOPACC &&
Math.abs(accel.Y) < STOPACC) {
dots[i].dx = 0;
dots[i].dy = 0;
}
dots[i].X += dots[i].dx;
dots[i].Y += dots[i].dy;
var height, width;
if (isNetscape) {
height = window.innerHeight + document.scrollTop;
width = window.innerWidth + document.scrollLeft;
} else {	
height = document.body.clientHeight + document.body.scrollTop;
width = document.body.clientWidth + document.body.scrollLeft;
}
if (dots[i].Y >=  height - DOTSIZE - 1) {
if (dots[i].dy > 0) {
dots[i].dy = BOUNCE * -dots[i].dy;
}
dots[i].Y = height - DOTSIZE - 1;
}
if (dots[i].X >= width - DOTSIZE) {
if (dots[i].dx > 0) {
dots[i].dx = BOUNCE * -dots[i].dx;
}
dots[i].X = width - DOTSIZE - 1;
}
if (dots[i].X < 0) {
if (dots[i].dx < 0) {
dots[i].dx = BOUNCE * -dots[i].dx;
}
dots[i].X = 0;
}
dots[i].obj.left = dots[i].X;			
dots[i].obj.top =  dots[i].Y;		
   }
}
// End -->
</script>

24. متن انتخابی شما به دنبال نشانگر موس.

تبصره 1: این کد را بهتر است که در قسمت سر، یعنی ما بین دو تگ <head></head> قرار دهید.
تبصره 2: من توصیه میکنم که اگر در کد صفحه ی شما دو تگ (<style></style>) وجود دارد کدهای میانی را کپی بگیرید و ما بین آنها بچسبانید.
تبصره 3: متنی که مایل هستید به دنبال نشانگر موس حرکت کند را به جای واژه های YOUR TEXT جایگزین نمائید.

Select All

<style type="text/css">

</style>
<script language="JavaScript1.2">
<!--
var x,y
var kern=20 
var flag=0
var message="YOUR TEXT"
message=message.split("")
var xpos=new Array()
for (i=0;i<message.length;i++) {
	xpos[i]=-50
	}
var ypos=new Array()
for (i=0;i<message.length;i++) {
	ypos[i]=-50
	}
function handlerMM(e){
	x = (e) ? e.pageX : document.body.scrollLeft+event.clientX
	y = (e) ? e.pageY : document.body.scrollTop+event.clientY
	flag=1
	}
function makebanner() {
	if (flag==1) {
		for (i=message.length-1; i>=1; i--) {
			xpos[i]=xpos[i-1]+kern
			ypos[i]=ypos[i-1]
			}
		xpos[0]=x+kern
		ypos[0]=y
		for (i=0; i<message.length; i++) {
			if (document.getElementById) {
				var thisspan =

document.getElementById("span"+i).style
				} else {
				var thisspan =

eval((document.layers)?"document.span"+i:"span"+(i)+".style")
				}
			if (thisspan.posLeft) {
				thisspan.posLeft=xpos[i]
				thisspan.posTop=ypos[i]
				}
			if (!thisspan.posLeft) {
				thisspan.left=xpos[i]
				thisspan.top=ypos[i]
				}
			}
		}
		var timer=setTimeout("makebanner()",30)
	}
window.onload=makebanner;
//-->
</script>
<script language="JavaScript1.2">

</script>

25. چرخش متن انتخابی شما به دور نشانگر موس.

تبصره 1: این کد را بهتر است که در قسمت سر، یعنی ما بین دو تگ <head></head> قرار دهید.
تبصره 2: متن خود را در صورت نیاز به جای واژه های welcome to my weblog جایگزین نمائید.

Select All

<script language="JavaScript">
<!-- Begin
if (document.all) {
//Things you can alter
yourLogo = "welcome to my weblog "; //Not less than 2 letters!
logoFont = "Arial";
logoColor = "red";

//Nothing needs altering below!
yourLogo = yourLogo.split('');
L = yourLogo.length; 
TrigSplit = 360 / L;
Sz = new Array()
logoWidth = 100;
logoHeight = -30;
ypos = 0;
xpos = 0;
step = 0.03;
currStep = 0;
document.write('<div id="outer" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i = 0; i < L; i++) {
document.write('<div id="ie" style="position:absolute;top:0px;left:0px;'
+'width:10px;height:10px;font-family:'+logoFont+';font-size:12px;'
+'color:'+logoColor+';text-align:center">'+yourLogo[i]+'</div>');
}
document.write('</div></div>');
function Mouse() {
ypos = event.y;
xpos = event.x - 5;
}
document.onmousemove=Mouse;
function animateLogo() {
outer.style.pixelTop = document.body.scrollTop; 
for (i = 0; i < L; i++) {
ie[i].style.top = ypos + logoHeight * Math.sin(currStep + i * TrigSplit * Math.PI / 180);
ie[i].style.left = xpos + logoWidth * Math.cos(currStep + i * TrigSplit * Math.PI / 180);
Sz[i] = ie[i].style.pixelTop - ypos;
if (Sz[i] < 5) Sz[i] = 5;
ie[i].style.fontSize = Sz[i] / 1.7;
}
currStep -= step;
setTimeout('animateLogo()', 20);
}
window.onload = animateLogo;
}
//  End -->
</script>

26. چرخش بسیار زیبای سه رنگ به دور نشانگر موس.

تبصره: این کد را بهتر است که در قسمت سر، یعنی ما بین دو تگ <head></head> قرار دهید.

Select All

<script language="JavaScript">
<!--
var a_Colour="#8000FF";
var b_Colour="#FF0080";
var c_Colour="#FFFF00";
var Size=40;

//Alter nothing below !!

function swirl(){
for (i = 0; i < 3; i++)
 { 
  YDummy[i]=ypos+Size*Math.cos(ThisStep+i*2)*Math.sin((ThisStep)*6);
  XDummy[i]=xpos+Size*Math.sin(ThisStep+i*2)*Math.sin((ThisStep)*6);
 }
ThisStep+=step;
setTimeout('swirl()',10);
}

27. ساعت عقربه دار به دنبال نشانگر موس.

تبصره: این کد را بهتر است که در قسمت سر، یعنی ما بین دو تگ <head></head> قرار دهید.

Select All

<script language="JavaScript">
<!--
colors = new Array('#00FFFF','#0000FF');  //Clock face colors.
sCol = '#FFFF00';  //seconds colour.
mCol = '#8000FF';  //minutes colour.
hCol = '#FF0080';  //hours colour.

H = 'Hours';
H = H.split('');
H = H.reverse();
M = 'Minutes';
M = M.split('');
M = M.reverse();
S = 'Seconds';
S = S.split('');
S = S.reverse();
dots = 12;
var Ypos = 0,Xpos = 0,Ybase = 0,Xbase = 0;
var ay = 0, ax = 0, Ay = 0, Ax = 0, by = 0, bx = 0, By = 0, Bx = 0, cy = 0, cx = 0, Cy = 0, Cx = 0, dy = 0, dx = 0, Dy = 0, Dx = 0;
count = 0;
count_a = 0;
move = 1;
ns = (document.layers)?1:0;
viz = (document.layers)?'hide':'hidden';
if (ns) {
for (i = 0; i < dots; i++)
document.write('<layer name=nface'+i+' top="0" left="0" clip="0,0,3,3"></layer>');
for (i = 0; i < S.length; i++)
document.write('<layer name=nx'+i+' top="0" left="0" width="36" height="36"><font face="Verdana" size="2" color='+sCol+'><center>'+S[i]+'</center></font></layer>');
for (i = 0; i < M.length; i++)
document.write('<layer name=ny'+i+' top="0" left="0" width="36" height="36"><font face="Verdana" size="2" color='+mCol+'><center>'+M[i]+'</center></font></layer>');
for (i = 0; i < H.length; i++)
document.write('<layer name=nz'+i+' top="0" left="0" width="36" height="36"><font face="Verdana" size="2" color='+hCol+'><center>'+H[i]+'</center></font></layer>');
}
else{
document.write('<div id="W" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i = 0; i < dots; i++) {
document.write('<div id="face" style="position:absolute;top:0px;left:0px;width:3px;height:3px;font-size:3px;"></div>');
}
document.write('</div></div>');
document.write('<div id="X" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i = 0; i < S.length; i++) {
document.write('<div id="x" style="position:absolute;width:36px;height:36px;font-family:Verdana;font-size:12px;color:'+sCol+';text-align:center;padding-top:10px">'+S[i]+'</div>');
}
document.write('</div></div>')
document.write('<div id="Y" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i = 0; i < M.length; i++) {
document.write('<div id="y" style="position:absolute;width:36px;height:36px;font-family:Verdana;font-size:12px;color:'+mCol+';text-align:center;padding-top:10px">'+M[i]+'</div>');
}
document.write('</div></div>')
document.write('<div id="Z" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i = 0; i < H.length; i++) {
document.write('<div id="z" style="position:absolute;width:36px;height:36px;font-family:Verdana;font-size:12px;color:'+hCol+';text-align:center;padding-top:10px">'+H[i]+'</div>');
}
document.write('</div></div>');
}
if (ns) {
window.captureEvents(Event.MOUSEMOVE);
function nsMouse(evnt) {
Ypos = evnt.pageY + 100;
Xpos = evnt.pageX + 100;
}
window.onMouseMove = nsMouse;
}
else{
function ieMouse() {
Ypos = event.y + 100;
Xpos = event.x + 100;
}
document.onmousemove = ieMouse;
}
function clock() {
time = new Date ();
secs = time.getSeconds();
sec = -1.57 + Math.PI * secs / 30;
mins = time.getMinutes();
min = -1.57 + Math.PI * mins / 30;
hr = time.getHours();
hrs = -1.575 + Math.PI * hr / 6 + Math.PI * parseInt(time.getMinutes()) / 360;
Ybase = 15;
Xbase = 15;
if (ns) {
document.layers["nx"+0].visibility = viz;
document.layers["ny"+0].visibility = viz;
document.layers["nz"+0].visibility = viz;
for (i = 0; i < S.length; i++) {
document.layers["nx"+i].top = ay - 12 + (i * Ybase) * Math.sin(sec);
document.layers["nx"+i].left = ax - 12 + (i * Xbase) * Math.cos(sec);
}
for (i = 0; i < M.length; i++) {
document.layers["ny"+i].top = by - 12 + (i * Ybase) * Math.sin(min);
document.layers["ny"+i].left = bx - 12 + (i * Xbase) * Math.cos(min);
}
for (i = 0; i < H.length; i++) {
document.layers["nz"+i].top = cy - 12 + (i * Ybase) * Math.sin(hrs);
document.layers["nz"+i].left = cx - 12 + (i * Xbase) * Math.cos(hrs);
}
for (i = 0; i < dots; ++i) {
document.layers["nface"+i].top = dy - 2 + (70 * Math.sin(-0.49+dots+i/1.9));
document.layers["nface"+i].left = dx + 4 + (70 * Math.cos(-0.49+dots+i/1.9));
   }
}
else {
var scrll = document.body.scrollTop;
W.style.pixelTop = scrll;
X.style.pixelTop = scrll;
Y.style.pixelTop = scrll;
Z.style.pixelTop = scrll;
x[0].style.visibility=viz;
y[0].style.visibility = viz;
z[0].style.visibility = viz;
for (i = 0; i < S.length; i++) {
x[i].style.pixelTop = ay - 12 + (i * Ybase) * Math.sin(sec);
x[i].style.pixelLeft = ax - 12 + (i * Xbase) * Math.cos(sec);
}
for (i = 0; i < M.length; i++) {
y[i].style.pixelTop = by - 12 + (i * Ybase) * Math.sin(min);
y[i].style.pixelLeft = bx - 12 + (i * Xbase) * Math.cos(min);
}
for (i = 0; i < H.length; i++) {
z[i].style.pixelTop = cy - 12 + (i * Ybase) * Math.sin(hrs);
z[i].style.pixelLeft = cx - 12 + (i * Xbase) * Math.cos(hrs);
}
for (i = 0; i < dots; ++i) {
face[i].style.pixelTop = dy + 6 + (70 * Math.sin(-0.49 + dots + i / 1.9));
face[i].style.pixelLeft = dx + 4 + (70 * Math.cos(-0.49 + dots + i / 1.9));
      }
   }
}
function MouseFollow() {
ay = Math.round(Ay += ((Ypos) - Ay) * 4 / 15);
ax = Math.round(Ax += ((Xpos) - Ax) * 4 / 15);
by = Math.round(By += (ay - By) * 4 / 15);
bx = Math.round(Bx += (ax - Bx) * 4 / 15);
cy = Math.round(Cy += (by - Cy) * 4 / 15);
cx = Math.round(Cx += (bx - Cx) * 4 / 15);
dy = Math.round(Dy += (cy - Dy) * 4 / 15);
dx = Math.round(Dx += (cx - Dx) * 4 / 15);
clock();
setTimeout('MouseFollow()',10);
}
function colorstep() {
count +=move;
if (count >= dots) {count=0;count_a += move}
if (count_a == colors.length) count_a = 0;
if (ns) document.layers["nface"+count].bgColor = colors[count_a];
else face[count].style.background = colors[count_a];
setTimeout('colorstep()',100)
}
function StartAll() {
MouseFollow();
colorstep();
}
if (document.layers || document.all) window.onload = StartAll;
//-->
</script>

28. هدفگیر به دنبال نشانگر موس.

Select All

<style>
</style>
<div id="leftright" style="width:expression(document.body.clientWidth-2)">
</div>
<div id="topdown" style="height:expression(document.body.clientHeight-2)">
</div>
<script language="JavaScript1.2">
<!--
if (document.all&&!window.print){
leftright.style.width=document.body.clientWidth-2
topdown.style.height=document.body.clientHeight-2
}
else if (document.layers){
document.leftright.clip.width=window.innerWidth
document.leftright.clip.height=1
document.topdown.clip.width=1
document.topdown.clip.height=window.innerHeight
}

function followmouse1(){
//move cross engine for IE 4+
leftright.style.pixelTop=document.body.scrollTop+event.clientY+1
topdown.style.pixelTop=document.body.scrollTop
if (event.clientX<document.body.clientWidth-2)
topdown.style.pixelLeft=document.body.scrollLeft+event.clientX+1
else
topdown.style.pixelLeft=document.body.clientWidth-2
}

function followmouse2(e){
//move cross engine for NS 4+
document.leftright.top=e.y+1
document.topdown.top=pageYOffset
document.topdown.left=e.x+1
}

if (document.all)
document.onmousemove=followmouse1
else if (document.layers){
window.captureEvents(Event.MOUSEMOVE)
window.onmousemove=followmouse2
}

function regenerate(){
window.location.reload()
}
function regenerate2(){
setTimeout("window.onresize=regenerate",400)
}
if ((document.all&&!window.print)||document.layers)
window.onload=regenerate2
//-->
</script>

Time

Designs By: Nazanin Studio

29. ساعت عقربه دار لغزان.

تبصره: این کد را بهتر است که در قسمت سر، یعنی ما بین دو تگ <head></head> قرار دهید.

Select All

<script language="JavaScript">
fCol='#8000FF'; //face colour.
sCol='#FF0080'; //seconds colour.
mCol='00FFFF'; //minutes colour.
hCol='FFFF00'; //hours colour.

Ybase=35; //Clock height.
Xbase=45; //Clock width.
H='...';
H=H.split('');
M='....';
M=M.split('');
S='.....';
S=S.split('');
NS4=(document.layers);
NS6=(document.getElementById&&!document.all);
IE4=(document.all);
Ypos=0;
Xpos=0;
dots=12;
Split=360/dots;
if (NS6){
for (i=1; i < dots+1; i++){
document.write('<div id="n6Digits'+i+'" style="position:absolute;top:0px;left:0px;width:30px;height:30px;font-family:Arial;font-size:10px;color:#'+fCol+';text-align:center;padding-top:10px">'+i+'</div>');
}
for (i=0; i < M.length; i++){
document.write('<div id="Ny'+i+'" style="position:absolute;top:0px;left:0px;width:2px;height:2px;font-size:2px;background:#'+mCol+'"></div>');
}
for (i=0; i < H.length; i++){
document.write('<div id="Nz'+i+'" style="position:absolute;top:0px;left:0px;width:2px;height:2px;font-size:2px;background:#'+hCol+'"></div>');
}
for (i=0; i < S.length; i++){
document.write('<div id="Nx'+i+'" style="position:absolute;top:0px;left:0px;width:2px;height:2px;font-size:2px;background:#'+sCol+'"></div>');
}
}
if (NS4){
dgts='1 2 3 4 5 6 7 8 9 10 11 12';
dgts=dgts.split(' ')
for (i=0; i < dots; i++){
document.write('<layer name=nsDigits'+i+' top=0 left=0 height=30 width=30><center><font face=Arial size=1 color='+fCol+'>'+dgts[i]+'</font></center></layer>');
}
for (i=0; i < M.length; i++){
document.write('<layer name=ny'+i+' top=0 left=0 bgcolor='+mCol+' clip="0,0,2,2"></layer>');
}
for (i=0; i < H.length; i++){
document.write('<layer name=nz'+i+' top=0 left=0 bgcolor='+hCol+' clip="0,0,2,2"></layer>');
}
for (i=0; i < S.length; i++){
document.write('<layer name=nx'+i+' top=0 left=0 bgcolor='+sCol+' clip="0,0,2,2"></layer>');
}
}
if (IE4){
document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=1; i < dots+1; i++){
document.write('<div id="ieDigits" style="position:absolute;top:0px;left:0px;width:30px;height:30px;font-family:Arial;font-size:10px;color:'+fCol+';text-align:center;padding-top:10px">'+i+'</div>');
}
document.write('</div></div>')
document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < M.length; i++){
document.write('<div id=y style="position:absolute;width:2px;height:2px;font-size:2px;background:'+mCol+'"></div>');
}
document.write('</div></div>')
document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < H.length; i++){
document.write('<div id=z style="position:absolute;width:2px;height:2px;font-size:2px;background:'+hCol+'"></div>');
}
document.write('</div></div>')
document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < S.length; i++){
document.write('<div id=x style="position:absolute;width:2px;height:2px;font-size:2px;background:'+sCol+'"></div>');
}
document.write('</div></div>')
}

function clock(){
time = new Date ();
secs = time.getSeconds();
sec = -1.57 + Math.PI * secs/30;
mins = time.getMinutes();
min = -1.57 + Math.PI * mins/30;
hr = time.getHours();
hrs = -1.57 + Math.PI * hr/6 + Math.PI*parseInt(time.getMinutes())/360;

if (NS6){
Ypos=window.pageYOffset+window.innerHeight-Ybase-25;
Xpos=window.pageXOffset+window.innerWidth-Xbase-30;
for (i=1; i < dots+1; i++){
 document.getElementById("n6Digits"+i).style.top=Ypos-15+Ybase*Math.sin(-1.56 +i *Split*Math.PI/180)
 document.getElementById("n6Digits"+i).style.left=Xpos-15+Xbase*Math.cos(-1.56 +i*Split*Math.PI/180)
 }
for (i=0; i < S.length; i++){
 document.getElementById("Nx"+i).style.top=Ypos+i*Ybase/4.1*Math.sin(sec);
 document.getElementById("Nx"+i).style.left=Xpos+i*Xbase/4.1*Math.cos(sec);
 }
for (i=0; i < M.length; i++){
 document.getElementById("Ny"+i).style.top=Ypos+i*Ybase/4.1*Math.sin(min);
 document.getElementById("Ny"+i).style.left=Xpos+i*Xbase/4.1*Math.cos(min);
 }
for (i=0; i < H.length; i++){
 document.getElementById("Nz"+i).style.top=Ypos+i*Ybase/4.1*Math.sin(hrs);
 document.getElementById("Nz"+i).style.left=Xpos+i*Xbase/4.1*Math.cos(hrs);
 }
}
if (NS4){
Ypos=window.pageYOffset+window.innerHeight-Ybase-20;
Xpos=window.pageXOffset+window.innerWidth-Xbase-30;
for (i=0; i < dots; ++i){
 document.layers["nsDigits"+i].top=Ypos-5+Ybase*Math.sin(-1.045 +i*Split*Math.PI/180)
 document.layers["nsDigits"+i].left=Xpos-15+Xbase*Math.cos(-1.045 +i*Split*Math.PI/180)
 }
for (i=0; i < S.length; i++){
 document.layers["nx"+i].top=Ypos+i*Ybase/4.1*Math.sin(sec);
 document.layers["nx"+i].left=Xpos+i*Xbase/4.1*Math.cos(sec);
 }
for (i=0; i < M.length; i++){
 document.layers["ny"+i].top=Ypos+i*Ybase/4.1*Math.sin(min);
 document.layers["ny"+i].left=Xpos+i*Xbase/4.1*Math.cos(min);
 }
for (i=0; i < H.length; i++){
 document.layers["nz"+i].top=Ypos+i*Ybase/4.1*Math.sin(hrs);
 document.layers["nz"+i].left=Xpos+i*Xbase/4.1*Math.cos(hrs);
 }
}

if (IE4){
Ypos=document.body.scrollTop+window.document.body.clientHeight-Ybase-20;
Xpos=document.body.scrollLeft+window.document.body.clientWidth-Xbase-20;
for (i=0; i < dots; ++i){
 ieDigits[i].style.pixelTop=Ypos-15+Ybase*Math.sin(-1.045 +i *Split*Math.PI/180)
 ieDigits[i].style.pixelLeft=Xpos-15+Xbase*Math.cos(-1.045 +i *Split*Math.PI/180)
 }
for (i=0; i < S.length; i++){
 x[i].style.pixelTop =Ypos+i*Ybase/4.1*Math.sin(sec);
 x[i].style.pixelLeft=Xpos+i*Xbase/4.1*Math.cos(sec);
 }
for (i=0; i < M.length; i++){
 y[i].style.pixelTop =Ypos+i*Ybase/4.1*Math.sin(min);
 y[i].style.pixelLeft=Xpos+i*Xbase/4.1*Math.cos(min);
 }
for (i=0; i < H.length; i++){
 z[i].style.pixelTop =Ypos+i*Ybase/4.1*Math.sin(hrs);
 z[i].style.pixelLeft=Xpos+i*Xbase/4.1*Math.cos(hrs);
 }
}
setTimeout('clock()',100);
}
clock();
//-->
</script>

30. ساعت عقربه دار ثابت.

Select All

<head>
<script language="JavaScript">

</script>
<style>
..num {color:#8000FF;width:30px;text-align:center; }
</style>
</head>

31. ساعت میله ای با جدول.

Select All

<head>
<script language="JavaScript">

</script>
</head>

<form name="clock"><table><tr><td>Hours:</td><td>
<input type="text" name="h" size="10" style="border: 0"></td></tr><tr><td colspan=2>
<input type=text name="hours" size="24" style="color: navy"></td>
</tr><tr><td>Minutes:</td><td><input type="text" name="m" size="10" style="border: 0">
</td></tr><tr><td colspan=2><input type=text name="minutes" size="60" style="color: navy"></td></tr>
<tr><td>Seconds:</td><td><input type="text" name="s" size="10" style="border: 0"></td>
</tr><tr><td colspan=2><input type=text name="seconds" size="69" style="color: navy">
</td></tr><tr><td>Time:<input type=text name="time" size="20" style="border: 0">
</td></tr></table></form>

</body>

32. یک ساعت کامپیوتری ساده.

Select All

33. ساعتی با نشانگر مدت زمانی که کاربر وارد شده است. (1 فارسی)

تبصره: این کد را بهتر است که در قسمت سر، یعنی ما بین دو تگ <head></head> قرار دهید.

Select All

<script language="JavaScript">
day = new Date();
miVisit = day.getTime();
function clock() {
dayTwo = new Date();
hrNow = dayTwo.getHours();
mnNow = dayTwo.getMinutes();	
scNow = dayTwo.getSeconds();
miNow = dayTwo.getTime();
if (hrNow == 0) {
hour = 12;
ap = " AM";
} else if(hrNow <= 11) {
ap = " AM";
hour = hrNow;
} else if(hrNow == 12) {
ap = " PM";
hour = 12;
} else if (hrNow >= 13) {
hour = (hrNow - 12);
ap = " PM";
}
if (hrNow >= 13) {
hour = hrNow - 12;
}
if (mnNow <= 9) {
min = "0" + mnNow;
}
else (min = mnNow)
if (scNow <= 9) {
secs = "0" + scNow;
} else {
secs = scNow;
}
time = hour + ":" + min + ":" + secs + ap;
document.form.button.value = time;
setTimeout('clock()', 1000);
}
function timeInfo() {
milliSince = miNow;
milliNow = miNow - miVisit;
secsVisit = Math.round(milliNow / 1000);
minsVisit = Math.round((milliNow / 1000) / 60);
alert(" عزیزم شما الان " + minsVisit + " دقيقه یا "
+ secsVisit + " ثانیه است که در این وب سایت حضور داری ");
} 
document.write("<form name=\"form\">"
+ "<input type=button style='cursor=help' style='border=blue' style='height=20' style='background=#000099' style='color=white' value=\"Click for info!\""
+ " name=button onClick=\"timeInfo()\"></form>");
onError = null;
clock();
//-->
</script>

34. ساعتی با نشانگر مدت زمانی که کاربر وارد شده است. (2 انگلیسی)

تبصره: این کد را بهتر است که در قسمت سر، یعنی ما بین دو تگ <head></head> قرار دهید.

Select All

<script language="JavaScript">

</script>

35. ایجاد ساعت در نوار وضعیت.

تبصره: این کد را بهتر است که در قسمت سر، یعنی ما بین دو تگ <head></head> قرار دهید.

Select All

36. ایجاد تاریخ و ساعت در نوار وضعیت.

تبصره: این کد را بهتر است که در قسمت سر، یعنی ما بین دو تگ <head></head> قرار دهید.

37. ساعت های بعضی از شهر های خارجی.

تبصره: این کد را بهتر است که در قسمت سر، یعنی ما بین دو تگ <head></head> قرار دهید.

Select All

<form name="where">
<select name="city" size="1" onchange="updateclock(this);"> 
<option value="" selected>Local time</option>
<option value="0">London GMT</option> 
<option value="1">Rome</option>
<option value="7">Bangkok</option>
<option value="8">Hong Kong</option>
<option value="9">Tokyo</option> 
<option value="10">Sydney</option>
<option value="12">Fiji</option>
<option value="-10">Hawaii</option>
<option value="-8">San Francisco</option> 
<option value="-5">New York</option>
<option value="-3">Buenos Aires</option>
</select><br />
<script language="JavaScript">
if (document.all||document.getElementById)
document.write('<span id="worldclock" style="font:bold 16px Arial;"></span><br>')
zone=0;
isitlocal=true;
ampm='';
function updateclock(z){
zone=z.options[z.selectedIndex].value;
isitlocal=(z.options[0].selected)?true:false;
}
function WorldClock(){
now=new Date();
ofst=now.getTimezoneOffset()/60;
secs=now.getSeconds();
sec=-1.57+Math.PI*secs/30;
mins=now.getMinutes();
min=-1.57+Math.PI*mins/30;
hr=(isitlocal)?now.getHours():(now.getHours() + parseInt(ofst)) + parseInt(zone);
hrs=-1.575+Math.PI*hr/6+Math.PI*parseInt(now.getMinutes())/360;
if (hr < 0) hr+=24;
if (hr > 23) hr-=24;
ampm = (hr > 11)?"PM":"AM";
statusampm = ampm.toLowerCase();
hr2 = hr;
if (hr2 == 0) hr2=12;
(hr2 < 13)?hr2:hr2 %= 12;
if (hr2<10) hr2="0"+hr2
var finaltime=hr2+':'+((mins < 10)?"0"+mins:mins)+':'+((secs < 10)?"0"+secs:secs)+' '+statusampm;
if (document.all)
worldclock.innerHTML=finaltime
else if (document.getElementById)
document.getElementById("worldclock").innerHTML=finaltime
else if (document.layers){
document.worldclockns.document.worldclockns2.document.write(finaltime)
document.worldclockns.document.worldclockns2.document.close()
}
setTimeout('WorldClock()',1000);
}
window.onload=WorldClock
//-->
</script>
<ilayer id="worldclockns" width="100%" height="35">
<layer id="worldclockns2" width="100%" height="35" left="0" top="0" style="font:bold 16px Arial;"></layer></ilayer>
</form>

38. ساعات بیشتر شهرهای جهان.

Select All

<head>
<script language="JavaScript">

</script>
</head>

<center>
<form name="clock">
<strong>Local Time <input type="text" size="8" name="local"></strong><p>
Eniwetok (GMT-12)  <input type="text" size="8" name="eniw"><br>
Samoa (GMT-11)  <input type="text" size="8" name="sam"><br>
Hawaii (GMT-10)  <input type="text" size="8" name="Hawaii"><p>
Alaska (GMT-9)  <input type="text" size="8" name="alaska"><br>
Pacific Time (GMT-8)  <input type="text" size="8" name="pacif"><br>
Mountain Time (GMT-7)  <input type="text" size="8" name="mount"><p>
Central Time (GMT-6)  <input type="text" size="8" name="center"><br>
Eastern Time (GMT-5)  <input type="text" size="8" name="east"><br>
Atlantic Time (GMT-4)  <input type="text" size="8" name="atl"><p>
Brazilia (GMT-3)  <input type="text" size="8" name="bra"><br>
Mid-Atlantic (GMT-2)  <input type="text" size="8" name="mid"><br>
Azores (GMT-1)  <input type="text" size="8" name="azo"><p>
<strong>Greenwich Mean Time (GMT)  <input type="text" size="8" name="_GMT"></strong><p>
Rome (GMT +1)  <input type="text" size="8" name="rome"><br>
Israel (GMT +2)  <input type="text" size="8" name="Israel"><br>
Moscow (GMT +3)  <input type="text" size="8" name="msw"><p>
Baku (GMT +4)  <input type="text" size="8" name="baku"><br>
New Delhi (GMT +5)  <input type="text" size="8" name="del"><br>
Dhakar (GMT +6)  <input type="text" size="8" name="dh"><p>
Bangkok (GMT +7)  <input type="text" size="8" name="kok"><br>
Hong Kong (GMT +8)  <input type="text" size="8" name="ho"><br>
Tokyo (GMT +9)  <input type="text" size="8" name="tky"><p>
Sydney (GMT +10)  <input type="text" size="8" name="sdn"><br>
Magadan (GMT +11)  <input type="text" size="8" name="mag"><br>
Wellington (GMT +12)  <input type="text" size="8" name="wll"></form></center>
<p><center><font face="arial, helvetica" SIZE="-2">Free JavaScripts<br />
by <a href="http://NazaninSt.Persianblog.com">Nazanin Studio</a></font></center><p>

39. کد یک تقویم کوچک ولی زیبا.

تبصره: این کد را بهتر است که در قسمت سر، یعنی ما بین دو تگ <head></head> قرار دهید.

Select All

<center>
<script language="JavaScript">

</script>
</center>

40. یک ساعت کامپیوتری در عنوان صفحه (Title).

تبصره: این کد را بهتر است که در قسمت سر، یعنی ما بین دو تگ <head></head> قرار دهید.

Yahoo

Designs By: Nazanin Studio

41. آیا شما در یاهو آنلاین هستید؟ (سایز کوچک.)

تبصره 1: این کد را باید در قسمت بدن کد خود یعنی ما بین دو تگ (<body></body>) در جایی مناسب قرار دهید.
تبصره 2: به جای واژه های YOUR ID باید آیدی خودتان در یاهو را جایگزین کنید. دقت کنید که این عبارت در این کد دو بار آمده است و شما آیدی خود را در دو مکان این کد باید وارد نمائید.

42. آیا شما در یاهو آنلاین هستید؟ (سایز متوسط.)

43. آیا شما در یاهو آنلاین هستید؟ (سایز بزرگ.)

Selection

Designs By: Nazanin Studio

44. ایجاد سایه برای متن توسط شیوه ها (Css)

تبصره 1: همانطور که در این کد ملاحضه می کنید، تگهای سر و بدن ( <head></head> و <body></body> ) آمده است. من توصیه میکنم شما محتویات ما بین هر دو تگ را تک تک کپی بگیرید و در قسمت های سر و بدن کد خود بچسبانید تا از تکرار مجدد این دو تگ جلوگیری شود. البته تکرار این دو تگ ممانعتی ندارد ولی بهتر است یکبار تکرار شوند.
تبصره 2: من توصیه میکنم که اگر در کد صفحه ی شما دو تگ (<style></style>) وجود دارد کدهای میانی را کپی بگیرید و ما بین آنها بچسبانید.
تبصره 3: به جای واژه های Nazanin Studio متن دلخواه خود را جایگزین کنید.

45. متن نورانی.

تبصره 1: این کد را بهتر است که در قسمت سر، یعنی ما بین دو تگ <head></head> قرار دهید.
تبصره 2: شما میتوانید در صورت نیاز به جای واژه های !Welcome to my weblog متن دلخواه خود را جایگزین و رنگهای مورد نیاز را در کد زیر همان واژه ها با کمی دقت تغییر دهید. (از کد رنگها هم میتوانید استفاده نمائید.)

Select All

46. نوشتن متن به صورت عمودی توسط شیوه ها (Css)

تبصره 1: همانطور که در این کد ملاحضه می کنید، تگهای سر و بدن ( <head></head> و <body></body> ) آمده است. من توصیه میکنم شما محتویات ما بین هر دو تگ را تک تک کپی بگیرید و در قسمت های سر و بدن کد خود بچسبانید تا از تکرار مجدد این دو تگ جلوگیری شود. البته تکرار این دو تگ ممانعتی ندارد ولی بهتر است یکبار تکرار شوند.
تبصره 2: من توصیه میکنم که اگر در کد صفحه ی شما دو تگ (<style></style>) وجود دارد کدهای میانی را کپی بگیرید و ما بین آنها بچسبانید.
تبصره 3: به جای واژه های Nazanin Studio متن دلخواه خود را جایگزین کنید.

47. متن خود را به پرواز در آورید!

تبصره 1: این کد را بهتر است که در قسمت سر، یعنی ما بین دو تگ <head></head> قرار دهید.
تبصره 2: شما میتوانید در صورت نیاز به جای واژه های !Welcome to my weblog متن دلخواه خود را جایگزین کنید.

Select All

<style type="text/css">
#supertext {
	left: 0px; position: absolute; top: 0px; visibility: hidden;}
</style>
<script language="JavaScript1.2">
var thecontent='<h2><font color="#0000FF">Welcome to my weblog!</font></h2>'
var hidetimer='';
var BallSpeed = 5;
var contentWidth;
var contentHeight;
var maxBallSpeed = 50;
var xMax;
var yMax;
var xPos = 0;
var yPos = 0;
var xDir = 'right';
var yDir = 'down';
var superballRunning = true;
var tempBallSpeed;
var currentBallSrc;
var newXDir;
var newYDir;

function hidetext(){
if (document.all)
supertext.style.visibility="hidden"
else if (document.layers)
document.supertext.visibility="hide"
clearTimeout(animatetext)
}

if (document.all||document.layers){
document.write('<span id="supertext"><nobr>'+thecontent+'</nobr></span>')
window.onload = initializeBall;
window.onresize = new Function("window.location.reload()");
}

</script>

48. بارش باران در صفحه ی وب.

تبصره: این کد را باید در قسمت بدن یعنی ما بین دو تگ (<body></body>) قرار دهید.

Select All

<script language="JavaScript">

</script>

49. بارش برف یا باران در صفحه ی وب.

تبصره 1: این کد را بهتر در قسمت سر یعنی ما بین دو تگ (<head></head>) قرار دهید.
تبصره 2: من توصیه میکنم که اگر در کد صفحه ی شما دو تگ (<style></style>) وجود دارد کدهای میانی را کپی بگیرید و ما بین آنها بچسبانید.
تبصره 3: این کد میتواند نسبت به کد فوق جالب تر عمل کند! در قسمت ابتدائی این کد با کمی دقت عبارتی را خواهید یافت مانند ;snow = true که من در خود کد هم توضیح داده ام که اگر شما به جای مقدار داده شده ی true مقدار false را وارد کنید در نتیجه بارش باران را در صفحه ی وب خود خواهید داشت.
تبصره 4: در عبارت بعد از عبارت فوق نمادی را مشخص کردم که شکل برف را تعیین میکند (*) و در خط بعدی نمادی را معرفی کردم که شکل قطره ای از باران را تشکیل دهد. (') شما میتوانید در صورت دلخواه نماد های دیگری جایگزین کنید.

Select All

<style>
.drop {
	font-size: 20px; filter: flipV(), flipH(); width: 3px; color: blue; position: absolute}
</style>
<script language="javascript">
snow =  true;    // false-rain;   true-snow
snowsym = " * "  //These are the symbols for each
rainsym = " ' "  //You can put images here.
howmany = 20     //How many drops/snowflakes?
if(snow){sym = snowsym; speed=1; angle=10; drops=howmany}
else{sym = rainsym; speed=50; drops=howmany; angle=6}
movex = -speed/angle; movey = speed; count = 0;
function moverain(){
for(move = 0; move < drops; move++){
xx[move]+=movex;  yy[move]+=mv[move];
hmm = Math.round(Math.random()*1);
if(xx[move] < 0){xx[move] = maxx+10;}
if(yy[move] > maxy){yy[move] = 10;}
drop[move].left = xx[move]
drop[move].top = yy[move]+document.body.scrollTop;
}setTimeout('moverain()','1')}
</script>
<script language="javascript">
if (document.all){
drop = new Array(); xx = new Array(); yy = new Array(); mv = new Array()
ly = "document.all[\'"; st = "\'].style"
for(make = 0; make < drops; make++){
document.write('<div id="drop'+make+'" class=drop>'+sym+'</div>');
drop[make] = eval(ly+'drop'+make+st);
maxx = document.body.clientWidth-40
maxy = document.body.clientHeight-40
xx[make] = Math.random()*maxx;
yy[make] = -100-Math.random()*maxy;
drop[make].left = xx[make]
drop[make].top = yy[make]
mv[make] = (Math.random()*5)+speed/4;
drop[make].fontSize = (Math.random()*10)+20;
if(snow){col = 'white'}else{col = 'blue'}
drop[make].color = col;
}
window.onload=moverain
}
</script>

50. بستن صفحه در یک زمان معیین.

تبصره 1: این کد را بهتر در قسمت سر یعنی ما بین دو تگ (<head></head>) قرار دهید.
تبصره 2: برای تععین مدت زمان کافیست که عدد 15000 را تغییر دهید.

51. با این کد تاریخ بروز رسانی را بطور اتوماتیک داشته باشید.

تبصره: این کد را بهتر در قسمت سر یعنی ما بین دو تگ (<head></head>) قرار دهید.

Select All

<script language="JavaScript">
<!--
function getLongDateString()
{
	monthNames = new Array("January","February",
	"March","April","May","June","July","August","September",
	"October","November","December");
dayNames = new Array("Sunday","Monday",
"Tuesday","Wednesday","Thursday",
"Friday","Saturday");
	dayOfWeek = this.getDay();
	day = dayNames[dayOfWeek];
	dateOfMonth = this.getDate();
monthNo = this.getMonth();
	month = monthNames[monthNo];
year = this.getYear();
	if (year < 2000)
year = year + 1900;
dateStr = day+" "+dateOfMonth+" "+month+", "+year;
	return dateStr;
}
Date.prototype.getLongDateString=getLongDateString;

function DocDate()
{
	DateTimeStr = document.lastModified;
	secOffset = Date.parse(DateTimeStr);
	if (secOffset == 0 || secOffset == null) 
			 dateStr = "Unknown";
	else
	{
		aDate = new Date();
		aDate.setTime(secOffset);
		datestr = aDate.getLongDateString();
	}
	return dateStr;
}

document.write("<center> Last Update: ");
document.writeln(DocDate(),"</center>");
// -->
</script>

52. حذف تبلیغ پرشین بلاگ.

تبصره: این کد را بهتر در قسمت سر یعنی ما بین دو تگ (<head></head>) قرار دهید.

53. حذف تبلیغ بلاگ اسکای.

تبصره: در این کد بهتر است که خصایص قسمت بدن یعنی تگ <body> را کپی بگیرید و در تگ <body> خود بچسبانید.
منظور از خصایص: ( onload="javascript: document.getElementById('r74j').style.visibility = 'hidden';" href="javascript:void(0);")

54. با این کد یک صفحه ی دیگر همراه با صفحه ی اصلی متوانید باز کنید، که تنظیمات آن هم در دست خودتان است.

تبصره: این کد را بهتر در قسمت سر یعنی ما بین دو تگ (<head></head>) قرار دهید.

Select All

<script language="JavaScript">

</script>

55. کد لینک صفحه ی خانگی.

تبصره: در این کد آدرس اینترنتی کامل خود را باید به جای واژه ی YOUR URL و اسم لینک را به جای واژه ی HOME جایگزین کنید.

56. با اسم خود کاربر به او خوش آمد گوئید.

57. لرزش صفحه در هنگام بارگذاری (Load)

تبصره: این کد را بهتر در قسمت سر یعنی ما بین دو تگ (<head></head>) قرار دهید.

58. یک ماشین حساب کوچک.

Select All

<head>
<script language="JavaScript">

</script>
</head>
<body>
<center>
<form name="formx"><input type="text" size="4" value="0" name="a"> 
<input type="button" value="  +  " onClick="a_plus_b(this.form)">  
<input type="button" value="  -  " onClick="a_minus_b(this.form)">  
<input type="button" value="  x  " onClick="a_times_b(this.form)">  
<input type="button" value="  /  " onClick="a_div_b(this.form)">  
<input type="button" value="  ^  " onClick="a_pow_b(this.form)">  
<input type="number" size="4" value="0" name="b"> = <input type "number" value="0" name="ans" size="9">
</form>
</center>
</body>

59. یک ماشین حساب نسبتاً بزرگ.

تبصره: این کد را باید در قسمت بدن یعنی ما بین دو تگ (<body></body>) قرار دهید.

Select All

<center>
<form name="Keypad" action="">
<table border="2" bgcolor="#9999FF" width="50" height="60" cellpadding="1" cellspacing="5">
<tr><td colspan="3" align="middle">
<input name="ReadOut" type="Text" size="24" value="0" width=100%>
</td><td>
<input name="btnClear"  type="Button" value="   C   " onclick="Clear()">
</td><td>
<input name="btnClearEntry" type="Button" value="  CE  " onclick="ClearEntry()">
</td></tr><tr><td>
<input name="btnSeven" type="Button" value="  7  " onclick="NumPressed(7)">
</td><td>
<input name="btnEight" type="Button" value="  8  " onclick="NumPressed(8)">
</td><td>
<input name="btnNine" type="Button" value="  9  " onclick="NumPressed(9)">
</td><td>
<input name="btnNeg" type="Button" value="  +/-  " onclick="Neg()">
</td><td>
<input name="btnPercent" type="Button" value="   %  " onclick="Percent()">
</td></tr><td>
<input name="btnFour" type="Button" value="  4  " onclick="NumPressed(4)">
</td><td>
<input name="btnFive" type="Button" value="  5  " onclick="NumPressed(5)">
</td><td>
<input name="btnSix" type="Button" value="  6  " onclick="NumPressed(6)">
</td><td align="middle">
<input name="btnPlus" type="Button" value="   +   " onclick="Operation('+')">
</td><td align="middle">
<input name="btnMinus" type="Button" value="    -   " onclick="Operation('-')">
</td></tr><tr><td>
<input name="btnOne" type="Button" value="  1  " onclick="NumPressed(1)">
</td><td>
<input name="btnTwo" type="Button" value="  2  " onclick="NumPressed(2)">
</td><td>
<input name="btnThree" type="Button" value="  3  " onclick="NumPressed(3)">
</td><td align="middle">
<input name="btnMultiply" type="Button" value="   *   " onclick="Operation('*')">
</td><td align="middle">
<input name="btnDivide" type="Button" value="    /   " onclick="Operation('/')">
</td></tr><tr><td>
<input name="btnZero" type="Button" value="  0  " onclick="NumPressed(0)">
</td><td>
<input name="btnDecimal" type="Button" value="   .  " onclick="Decimal()">
</td><td width="39">
<input name="btnEquals" type="Button" value="  =  " onclick="Operation('=')">
</td></td></table></form></center>
<font face="Verdana, Arial, Helvetica" size=2>
<script language="JavaScript">

</script>

60. نمایش یک متن هنگام ورود به صفحه.

تبصره: در این کد بهتر است که خصیصه ی قسمت بدن یعنی تگ <body> را کپی بگیرید و در تگ <body> خود بچسبانید.
منظور از خصیصه: ( onload="window.alert('.سلام! خوش آمدی') ")

61. نمایش یک متن هنگام خروج از صفحه.

تبصره: در این کد بهتر است که خصیصه ی قسمت بدن یعنی تگ <body> را کپی بگیرید و در تگ <body> خود بچسبانید.
منظور از خصیصه: ( onUnload="window.alert(' .باز هم بیا اینجا. موفق باشی '))

62. نمایش یک متن در هنگام ورود و یک متن در هنگام خروج از صفحه.

تبصره: در این کد بهتر است که خصایص قسمت بدن یعنی تگ <body> را کپی بگیرید و در تگ <body> خود بچسبانید.
منظور از خصایص: ( onLoad="window.alert('Hello, and welcome.');" onUnload="window.alert('Goodbye!');")

63. موج دادن به متن. (متحرک)

تبصره 1: همانطور که در این کد ملاحضه می کنید، تگهای سر و بدن ( <head></head> و <body></body> ) آمده است. من توصیه میکنم شما محتویات ما بین هر دو تگ را تک تک کپی بگیرید و در قسمت های سر و بدن کد خود بچسبانید تا از تکرار مجدد این دو تگ جلوگیری شود. البته تکرار این دو تگ ممانعتی ندارد ولی بهتر است یکبار تکرار شوند.
تبصره 2: من توصیه میکنم که اگر در کد صفحه ی شما دو تگ (<style></style>) وجود دارد کدهای میانی را کپی بگیرید و ما بین آنها بچسبانید.
تبصره 3: به جای واژه های Nazanin Studio متن دلخواه خود را جایگزین کنید.

64. یک افکت زیبا برای متنهای شما.

تبصره 1: این کد را باید در قسمت بدن یعنی ما بین دو تگ (<body></body>) قرار دهید.
تبصره 2: اولین متن خود را بجای واژه های Nazanin Studio Java Script و دومین متن خود را به جای واژه های www.NazaninSt.PersianBlog.com جایگزین نمائید.

Select All

<div id="oTransContainer" style="text-align:Center;font-size:16px;font-family:arial;position:absolute; top: 0px; left: 0px; width: 300px; 
height:200px;  filter:progid:DXImageTransform.Microsoft.Wipe(
        GradientSize=1.0, wipeStyle=0, motion='forward') ">

<div id="oDIV1" style="color:#ffffff;position:absolute; top:50px; left:10px; width:240px; height:140px;
background: #FF0080"><br /><br /><br />Nazanin Studio Java Script</div>

<div id="oDIV2" style="color:#FFFF99 ;visibility:hidden; position:absolute; top:50px; left:10px; 
width:240px; height:140px; background: #8000FF"><br /><br /><br />www.NazaninSt.PersianBlog.com</div> 
</div>
<button onclick="fnToggle()">Toggle Transition</button>
<script>
var bTranState = 0;
function fnToggle() {
    oTransContainer.filters[0].Apply();
    if (bTranState=='0') { 
  bTranState = 1;
        oDIV2.style.visibility="visible"; 
  oDIV1.style.visibility="hidden";}
    else {  
  bTranState = 0;
        oDIV2.style.visibility="hidden"; 
  oDIV1.style.visibility="visible";}
     oTransContainer.filters[0].Play(duration=2);}
</script>

65. نمایش وضوح نمایش، ورژن و نوع مرورگر و وضعیت جاوا اسکریپت کاربر را در صفحه ی خود به نمایش بگذارید.

تبصره: گذاشتن این کد در هر جایی از کد به جز داخل تگ (<>) آزاد است. (بنا بر سلیقه)

66. با این کد بازی X O را در صفحه ی خود ایجاد کنید.

تبصره: این کد را باید در قسمت بدن یعنی ما بین دو تگ (<body></body>) قرار دهید.

Select All

<script>
var _url = document.location.toString().split("?");
var _parm = _url[1]?_url[1]:"";
var _P0n = "";
var _P0v = 0;
var _P1n = "";
var _P1v = 0;
if (_parm != "") {
_P0n=_parm.split("&")[0].split("=")[0].toLowerCase();
_P0v=parseInt(_parm.split("&")[0].split("=")[1]);
if(_parm.split("&")[1]) {
_P1n = _parm.split("&")[1].split("=")[0].toLowerCase();
_P1v = parseInt(_parm.split("&")[1].split("=")[1]);
} else {
_P1n ="";
}
} else {
_P0n="";
_P1n="";
}

if(MATRIX_SIZE<3)MATRIX_SIZE=3;
if(MATRIX_SIZE>10)MATRIX_SIZE=10;
if(AMOUNT_TO_WIN>MATRIX_SIZE)AMOUNT_TO_WIN=MATRIX_SIZE;
if(AMOUNT_TO_WIN<3)AMOUNT_TO_WIN=3;

var PLAYER="X";
var COMPUTER="O";
var BLANK=" ";
var ROWS = new Array();
var COLS = new Array();
var DIAG = new Array();

DIAG[0]=new Array();
DIAG[1]=new Array();
for(var _i=0;_i<MATRIX_SIZE;_i++) {
DIAG[0][_i]=_i*MATRIX_SIZE+_i;
DIAG[1][_i]=(MATRIX_SIZE-1)*(_i+1);
}
for (var i=1;i<=(MATRIX_SIZE-AMOUNT_TO_WIN);i++) {
var n=2+((i-1)*4);
DIAG[n+0]=new Array();
DIAG[n+1]=new Array();
DIAG[n+2]=new Array();
DIAG[n+3]=new Array();
for (var j=1;j<=(MATRIX_SIZE-i);j++) {
DIAG[n+0][j-1]=(MATRIX_SIZE+1)*(j-1)+i;
DIAG[n+1][j-1]=(MATRIX_SIZE+1)*(j-1)+(i*MATRIX_SIZE);
DIAG[n+2][j-1]=(MATRIX_SIZE-1)*(j)-i;
DIAG[n+3][j-1]=DIAG[n+2][j-1]+(MATRIX_SIZE+1)*(i);
}
}

for(var i=0;i<MATRIX_SIZE;i++) {
ROWS[i]=new Array();
COLS[i]=new Array();
for (var j=0;j<MATRIX_SIZE;j++) {
ROWS[i][j]=i*MATRIX_SIZE+j;
COLS[i][j]=i+j*MATRIX_SIZE;
}
}

function setPlayers(_p,_c) {
PLAYER=document.table1.pis.value=_p;
COMPUTER=document.table1.cis.value=_c;
resetBoard();
if(COMPUTER=="X") {
computerMove();
}
}

var GAMEOVER = false;

function clicked(_s) {
if(_s.value!=BLANK || GAMEOVER) return;
_s.value=PLAYER;
postMoveLogic();
computerMove();
}

if(spotsTaken) return (BLANK);
for(var i=0;i<MATRIX_SIZE;i++) {
if (AmountInARow(ROWS[i])) return (whoHasWon);
if (AmountInARow(COLS[i])) return (whoHasWon);
}
for(var i=0;i<DIAG.length;i++) {
if(AmountInARow(DIAG[i])) return (whoHasWon);
}
return (_ret);
}

function allTheseMatch(_v) {
var _ret = true;
for(var i=1;i<_v.length;i++) {
var _a=eval("document.table1.s"+_v[i-1]+".value");
var _b=eval("document.table1.s"+_v[i]+".value");
if (_a != _b) _ret = false;
}
return (_ret);
}

var OneAwaySpot=-1;

function computerMove() {
if(GAMEOVER) return;
var _spot = determineComputerMove();
eval("document.table1.s"+_spot+".value=COMPUTER");
postMoveLogic();
}

67. با این کد چهار متن را با حالت متغییر زوم در صفحه ایجاد نمائید.

تبصره 1: این کد را باید در قسمت بدن یعنی ما بین دو تگ (<body></body>) قرار دهید.
تبصره 2: واژه های انتخابی خود را برای نمایش به جای واژه های YOUR TEXT جایگزین کنید. (YOUR TEXT 2, YOUR TEXT 1 و ...)

Select All

<script language="JavaScript">
<!-- Begin
var speed = 50;
var cycledelay = 2000;
var maxsize = 28;

var x = 0;
var y = 0;
var themessage, size;
var esize = "</font>";

if(navigator.appName == "Netscape") {
size = "<font point-size='"+x+"pt'>"; 
document.wds.document.write(size+"<center>"+themessage+"</center>"+esize);
document.wds.document.close();
}
if (navigator.appVersion.indexOf("MSIE") != -1){
wds.innerHTML = "<center>"+themessage+"</center>";
wds.style.fontSize=x+'px'
   }
} 
function downwords(){
if (x > 1) {
x--;
setTimeout("downwords()",speed);
}
else {
setTimeout("upwords()",cycledelay);
y++;
if (y > themessage2.length - 1) y = 0;
}
if(navigator.appName == "Netscape") {
size = "<font point-size='"+x+"pt'>"; 
document.wds.document.write(size+"<center>"+themessage+"</center>"+esize);
document.wds.document.close();
}
if (navigator.appVersion.indexOf("MSIE") != -1){
wds.innerHTML = "<center>"+themessage+"</center>";
wds.style.fontSize=x+'px'
   }
}
setTimeout("upwords()",speed);
//  End -->
</script>

68. متن نوار عنوان (Title) صفحه ی خود را به حرکت در آورید.

تبصره 1: این کد را بهتر است که در قسمت سر، یعنی ما بین دو تگ <head></head> قرار دهید.
تبصره 2: متن خود را در صورت نیاز به جای واژه های Welcome To My Weblog جایگزین نمائید.

69. حرکت سریع متن در نوار وضعیت.

Select All

<head>
<script language="JavaScript">
<!-- Hide the script from old browsers --
function scrollit(seed)
{
   var m1  =  " welcome to my weblog ";
   var msg=m1;   var out = " ";
   var c = 0;

if (seed > 100)
     {
     seed--;
     var cmd="scrollit(" + seed + ")";
     timerTwo=window.setTimeout(cmd,7);
     }
   else
     if (seed <= 100 && seed > 0)
       {
       for (c=0 ; c < seed ; c++)
         {
         out+=" ";
         }
       out+=msg;
       seed--;
       var cmd="scrollit(" + seed + ")";
       window.status=out;
       timerTwo=window.setTimeout(cmd,7);
       }
     else if (seed <= 0)
       {
       if (-seed < msg.length)
         {
         out+=msg.substring(-seed,msg.length);
         seed--;
         var cmd="scrollit(" + seed + ")";
         window.status=out;
         timerTwo=window.setTimeout(cmd,7);
         }
       else
         {
         window.status=" ";
         timerTwo=window.setTimeout("scrollit(100)",75);
         }
       }
}
// --End Hiding Here -->
</script>
</head>
<body onLoad="timerONE=window.setTimeout('scrollit(100)',500)"></body>

70. تنظیم رنگ پس زمینه توسط خود کاربر با کلیک بر روی دکمه های مربوطه.

تبصره: این کد را بهتر است در قسمت بدن یعنی ما بین دو تگ (<body></body>) قرار دهید.

Select All

<script language="Javascript">

</script>
<form>
<input style="font-family:tahoma;font-size:12px;width:80px" type="button" value="زرد" onclick="backbs('yellow')" /><br />
<input style="font-family:tahoma;font-size:12px;width:80px" type="button" value="کرم" onclick="backbs('#CC9900')" /><br /> 
<input style="font-family:tahoma;font-size:12px;width:80px" type="button" value="سفید" onclick="backbs('white')" /><br /> 
<input style="font-family:tahoma;font-size:12px;width:80px" type="button" value="خاکستری" onclick="backbs('gray')" /><br />
<input style="font-family:tahoma;font-size:12px;width:80px" type="button" value="مشکی" onclick="backbs('black')" /><br />
<input style="font-family:tahoma;font-size:12px;width:80px" type="button" value="صورتی" onclick="backbs('pink')" /><br />
<input style="font-family:tahoma;font-size:12px;width:80px" type="button" value="آبی" onclick="backbs('blue')" /><br />
<input style="font-family:tahoma;font-size:12px;width:80px" type="button" value="سبز" onclick="backbs('Green')" /><br />
<input style="font-family:tahoma;font-size:12px;width:80px" type="button" value="سبز تیره" onclick="backbs('teal')" /><br />
<input style="font-family:tahoma;font-size:12px;width:80px" type="button" value="شبرنگ" onclick="backbs('lime')" /><br />
<input style="font-family:tahoma;font-size:12px;width:80px" type="button" value="آبی نفتی" onclick="backbs('navy')" /><br />
<input style="font-family:tahoma;font-size:12px;width:80px" type="button" value="قرمز" onclick="backbs('red')" /><br />
<input style="font-family:tahoma;font-size:12px;width:80px" type="button" value="نارنجی" onclick="backbs('orange')" /><br />
<input style="font-family:tahoma;font-size:12px;width:80px" type="button" value="قهوه ای" onclick="backbs('brown')" /><br />
</form>

71. با این کد رنگ پس زمینه در هنگام بارگذاری توسط چند رنگ فلش زده و با رنگ مشکی ثابت خواهد شد.

Select All

<head>
<script>
function initArray() 
{
  this.length = initArray.arguments.length
  for (var i = 0; i < this.length; i++)
    this[i+1] = initArray.arguments[i]
}

var hexChars = "0123456789ABCDEF";

function Dec2Hex (Dec) 
{
  var a = Dec % 16;
  var b = (Dec - a)/16;
  hex = "" + hexChars.charAt(b) + hexChars.charAt(a);
  return hex;
}

function bgChanger (begin, end, steps) 
{
  steps = steps -1 ;

redA     = begin.charAt(0) + begin.charAt(1);
  red_valA = parseInt(redA,'16');
  redB     = end.charAt(0) + end.charAt(1);
  red_valB = parseInt(redB,'16');
  red_int  = ((red_valB - red_valA) / steps) * -1;
  grnA     = begin.charAt(2) + begin.charAt(3);
  grn_valA = parseInt(grnA,'16');
  grnB     = end.charAt(2) + end.charAt(3);
  grn_valB = parseInt(grnB,'16');
  grn_int  = ((grn_valB - grn_valA) / steps) * -1;
  bluA     = begin.charAt(4) + begin.charAt(5);
  blu_valA = parseInt(bluA,'16');
  bluB     = end.charAt(4) + end.charAt(5);
  blu_valB = parseInt(bluB,'16');
  blu_int  = ((blu_valB - blu_valA) / steps) * -1;

step = 2;
  red = red_valA;
  grn = grn_valA;
  blu = blu_valA;

document.bgColor = begin;

while ( steps >= step ) 
  {
    red -= red_int;
    red_round = Math.round(red);
    red_hex = Dec2Hex(red);

grn -= grn_int;
    grn_round = Math.round(grn);
    grn_hex = Dec2Hex(grn);

blu -= blu_int;
    blu_round = Math.round(blu);
    blu_hex = Dec2Hex(blu);

document.bgColor = red_hex + grn_hex + blu_hex;

step++;
  }
  document.bgColor = end;
}

</script>
</head>

72. نوشتن متن درون یک فیلد.

73. تغییر رنگ پس زمینه توسط کاربر در یک کادر انتخاب.

تبصره: این کد را بهتر است در قسمت بدن یعنی ما بین دو تگ (<body></body>) قرار دهید.

Select All

<form>
<select size="5" name="clr" onChange="document.bgColor=this.options[this.selectedIndex].value">
<option value="white" selected>White</option>
<option value="blue">Blue</option>
<option value="aquamarine">Aquamarine</option> 
<option value="chocolate">Chocolate</option>
<option value="darkred">Dark red</option>
<option value="gold">Gold</option>
<option value="red">Red</option>
<option value="yellow">Yellow</option>
<option value="hotpink">Hotpink</option>
<option value="lime">Lime</option>
<option value="darkkhaki">Dark khaki</option>
<option value="cadetblue ">Cadet blue</option>
<option value="darkgoldenrod">Dark goldenrod</option>
<option value="darkslateblue">Dark slate</option> 
<option value="deeppink">Deep pink</option>
<option value="darksalmon">Dark salmon</option>
<option value="salmon">Salmon</option>
<option value="tan">Tan</option>
<option value="wheat">Wheat</option>
<option value="tomato">Tomato</option>
<option value="springgreen">Springgreen</option>
<option value="turquoise">Turquoise</option>
</select>
</form>

74. کد متحرک سازی. (بیشتر برای متون انگلیسی)

تبصره 1: این کد را بهتر است در قسمت بدن یعنی ما بین دو تگ (<body></body>) قرار دهید.
تبصره 2: متن مورد نظر خود را به جای واژه ی Welcome جایگزین کنید.

75. کد متحرک سازی. (بیشتر برای متون فارسی)

76. کد متحرک سازی که بعد از برخورد با گوشه از حرکت باز می ایستد.

77. کد متحرک سازی که بعد از برخورد با گوشه ها تغییر مسیر میدهد.

78. کد موتور جستجو (Search with MSN)

تبصره: این کد را بهتر است در قسمت بدن یعنی ما بین دو تگ (<body></body>) قرار دهید.

Select All

79. این کد باعث میشود متن شما به صورت متناوب محو و آشکار گردد. به عبارتی دیگر چشمک زن شود.

Select All

<head>
<script language="JavaScript">
<!--
window.onerror = null;
 var bName = navigator.appName;
 var bVer = parseInt(navigator.appVersion);
 var NS4 = (bName == "Netscape" && bVer >= 4);
 var IE4 = (bName == "Microsoft Internet Explorer" 
 && bVer >= 4);
 var NS3 = (bName == "Netscape" && bVer < 4);
 var IE3 = (bName == "Microsoft Internet Explorer" 
 && bVer < 4);
 var blink_speed=100;
 var i=0;
 
if (NS4 || IE4) {
 if (navigator.appName == "Netscape") {
 layerStyleRef="layer.";
 layerRef="document.layers";
 styleSwitch="";
 }else{
 layerStyleRef="layer.style.";
 layerRef="document.all";
 styleSwitch=".style";
 }
}

//BLINKING
function Blink(layerName){
 if (NS4 || IE4) { 
 if(i%2==0)
 {
 eval(layerRef+'["'+layerName+'"]'+
 styleSwitch+'.visibility="visible"');
 }
 else
 {
 eval(layerRef+'["'+layerName+'"]'+
 styleSwitch+'.visibility="hidden"');
 }
 } 
 if(i<1)
 {
 i++;
 } 
 else
 {
 i--
 }
 setTimeout("Blink('"+layerName+"')",blink_speed);
}
//  -->
</script>
</head>

<body>
<div id="prem_hint" style="position:relative; left:0; visibility:hidden" class="prem_hint">
<font face="tahoma" color="red">
<b>Welcome!</b>
</font></div>
<script language="javascript">Blink('prem_hint');</script>
</body>

80. نوشتن متن در نوار وضعیت به صورت تایپی.

تبصره 1: این کد را بهتر است در قسمت سر یعنی ما بین دو تگ (<head></head>) قرار دهید.
تبصره 2: در قسمتی از این کد محدوده ای را با واژه های YOUR TEXT مشخص کردم، که در این قسمت شما باید در جاهای مربوطه متن خود را جایگزین کنید.

Select All

<script language="JavaScript">
<!--
var speed = 100
var pause = 3000
var timerID = null
var bannerRunning = false
var ar = new Array()

// YOUR TEXT
ar[0] = "Welcome...                  "
ar[1] = "You are watching Nazanin Studio JavaScript...                  "
ar[2] = "www.NazaninSt.PersianBlog.com                  "
ar[3] = "The best wishes for you...                  "
ar[4] = "Good Bye...!!!                  "
// END YOUR TEXT

var currentMessage = 0
var offset = 0
function stopBanner() {
        if (bannerRunning)
                clearTimeout(timerID)
        bannerRunning = false
}
function startBanner() {
        stopBanner()
        showBanner()
}
function showBanner() {
        var text = ar[currentMessage]
        if (offset < text.length) {
                if (text.charAt(offset) == " ")
                        offset++                        
                var partialMessage = text.substring(0, offset + 1) 
                window.status = partialMessage
                offset++ 
                timerID = setTimeout("showBanner()", speed)
                bannerRunning = true
        } else {
                offset = 0
                currentMessage++
                if (currentMessage == ar.length)
                        currentMessage = 0
                timerID = setTimeout("showBanner()", pause)
                bannerRunning = true
        }
}
// -->
</script>
<body onLoad="startBanner()"></body>

81. با این کد بدون دخالت خودتان در هر روز شاهد مطالب از پیش تعریف شده ی خود باشید.

تبصره 1: همانطور که در این کد ملاحضه می کنید، تگهای سر و بدن ( <head></head> و <body></body> ) آمده است. من توصیه میکنم شما محتویات ما بین هر دو تگ را تک تک کپی بگیرید و در قسمت های سر و بدن کد خود بچسبانید تا از تکرار مجدد این دو تگ جلوگیری شود. البته تکرار این دو تگ ممانعتی ندارد ولی بهتر است یکبار تکرار شوند.
تبصره 2: در این کد سی و یک مکان وجود دارد که شما باید مطالب خود را در آن وارد کنید. این سی و یک مکان نقش روزهای یک ماه را در این کد دارند. متنهای خود را به جای واژه های Tip که برای درک بهتر کد از 1 تا 31 شماره بندی شده اند جایگزین کنید.

Select All

82. تنظیم رنگ پس زمینه توسط کاربر با کلیک بر یک دکمه.

Select All

<head>
<script language="JavaScript">

</script>
</head>

83. چشمک زدن پس زمینه با کلیک بر یک دکمه.

84. لینکهایی که در اثر نشانه گیری موس رنگ پس زمینه را تغییر می دهند.

تبصره: شما فقط باید به جای YOUR URL آدرس مقصد و به جای YOUR NAME LINK اسم لینک را جایگزین کنید.

Select All

85. نمایش یک متن در پنجره ی اخطار با کلیک بر یک دکمه.

تبصره: در صورت نیاز میتوانید به جای عبارت "خوش آمدید" متن دلخواه خود را جایگزین نمائید.

86. بستن صفحه به وسیله ی یک دکمه.

تبصره: این کد را بهتر است در قسمت بدن یعنی ما بین دو تگ (<body></body>) قرار دهید.

87. بستن صفحه به وسیله ی یک لینک.

تبصره: این کد را بهتر است در قسمت بدن یعنی ما بین دو تگ (<body></body>) قرار دهید.

88. با این کد میتوانید بفهمید که چقدر سن دارید و تا تولدتان چند روز، چند ساعت و چند ثانیه باقیمانده و حتی از تولدتان گذشته.

Select All

<head>
<script language="JavaScript">

</script>
</head>

<body OnLoad="startclock()">
<center>
<form name="down" onSubmit="0">
<script Language="JavaScript">
document.write("<b>I was born "+bmonth+" "+bday+", "+byear+".  ("+mm+"/"+bday+"/"+byear+")</b>");
document.write("<br><br>I am "+yourage+" years old, and will turn "+age2+" in:");
</script>
<br>
<input type="text" name="face" size="47" value="A browser supporting JavaScript 1.1+ is needed.">
</form>
<p>
<br>
<form name="up" onSubmit="1">
I've been alive for...<br>
<input type="text" name="face" size="47" value="A browser supporting JavaScript 1.1+ is needed.">
</form></center>
</body>

89. درج صفحه در قسمت مورد علاقه ها (Favourites) توسط یک لینک.

تبصره: در این کد آدرس صفحه را به جای عبارت YourLink و عنوان صفحه را به جای عبارت Your WebPage Title جایگزین نمائید.

90. قفل کردن انتخاب متن.

تبصره: این کد را بهتر در قسمت سر یعنی ما بین دو تگ (<head></head>) قرار دهید.

91. سفارشی کردن رنگ اسکرول بار یا نوار پیمایش توسط شیوه ها. (CSS)

92. نمایش مختصات نشانگر موس در نوار وضعیت.

تبصره: این کد را بهتر در قسمت سر یعنی ما بین دو تگ (<head></head>) قرار دهید.

93. قفل کردن کلی نوار وضعیت.

تبصره: این کد را بهتر در قسمت سر یعنی ما بین دو تگ (<head></head>) قرار دهید.

94. پیام در نوار وضعیت به صورت حرف حرف آمدن.

تبصره 1: این کد را بهتر در قسمت سر یعنی ما بین دو تگ (<head></head>) قرار دهید.
تبصره 2: متن خود را به جای عبارت !You are watching Nazanin Studio JavaScript جایگزین کنید.

95. باز شدن و پخش شدن هفت ستاره با رنگهای مختلف در صفحه.

تبصره: این کد را بهتر در قسمت سر یعنی ما بین دو تگ (<head></head>) قرار دهید.

Select All

<script language="JavaScript1.2">
<!--
var intervals=2000
var sparksOn     = true;
var speed        = 25;
var power        = 1;
var documentWidth=documentHeight=randomx=randomy=leftcorner=topcorner=0
var ns=(document.layers);
var ie=(document.all);
var sparksAflyin = false;
var allDivs      = new Array(10);
var totalSparks  = 0;
function initAll(){
	if(!ns && !ie){
	sparksOn = false;
	return;
	}
setInterval("firework()",intervals)
if (ns)
	document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE);
	for(dNum=0; dNum<7; ++dNum){
		if(ie)
			allDivs[dNum]=eval('document.all.sDiv'+dNum+'.style');
		else
			allDivs[dNum]=eval('document.layers["sDiv'+dNum+'"]');
	}
}
function firework(){
if (ie){
documentWidth=document.body.clientWidth
documentHeight=document.body.clientHeight
leftcorner=document.body.scrollLeft
topcorner=document.body.scrollTop
}
else if (ns){
documentWidth=window.innerWidth
documentHeight=window.innerHeight
leftcorner=pageXOffset
topcorner=pageYOffset

}
randomx=leftcorner+Math.floor(Math.random()*documentWidth)
randomy=topcorner+Math.floor(Math.random()*documentHeight)
	if(sparksOn){
		if(!sparksAflyin){
			sparksAflyin=true;
			totalSparks=0;
			for(var spark=0;spark<=6;spark++){
				dx=Math.round(Math.random()*50);
				dy=Math.round(Math.random()*50);
				moveTo(spark,randomx,randomy,dx,dy);
			}
		}
	}
}

96.چرخش زیبای چندین نقطه ی رنگی به دنبال نشانگر موس.

تبصره: این کد را باید در قسمت بدن یعنی ما بین دو تگ (<body></body>) قرار دهید.

Select All

if (document.layers)
{window.captureEvents(Event.MOUSEMOVE);}
var yBase = 200;
var xBase = 200;
var step = 1;
var currStep = 0;
var Xpos = 1;
var Ypos = 1;

if (document.all)
{
  function MoveHandler(){
  Xpos = document.body.scrollLeft+event.x;
  Ypos = document.body.scrollTop+event.y;
  }
  document.onmousemove = MoveHandler;
}

else if (document.layers)
{
  function xMoveHandler(evnt){
  Xpos = evnt.pageX;
  Ypos = evnt.pageY;
  }
  window.onMouseMove = xMoveHandler;
}

function animateLogo() {
if (document.all)
{
 yBase = window.document.body.offsetHeight/6;
 xBase = window.document.body.offsetWidth/6;
}
else if (document.layers)
{
 yBase = window.innerHeight/8;
 xBase = window.innerWidth/8;
}

if (document.all)
{
 for ( i = 0 ; i < starsDiv.all.length ; i++ )
 {
  starsDiv.all[i].style.top = Ypos + yBase*Math.sin((currStep + i*4)/12)*Math.cos(400+currStep/200);
 starsDiv.all[i].style.left = Xpos + xBase*Math.sin((currStep + i*3)/10)*Math.sin(currStep/200);
 }
}

else if (document.layers)
{
 for ( j = 0 ; j < 14 ; j++ ) //number of NS layers!
 {
  var templayer="a"+j
  document.layers[templayer].top = Ypos + yBase*Math.sin((currStep + j*4)/12)*Math.cos(400+currStep/200);
  document.layers[templayer].left = Xpos + xBase*Math.sin((currStep + j*3)/10)*Math.sin(currStep/200);
 }
}
currStep+= step;
setTimeout("animateLogo()", 10);
}
animateLogo();
</script>

97.چرخش زیبای یک حلقه ی رنگی به دنبال نشانگر موس.

تبصره: این کد را باید در قسمت بدن یعنی ما بین دو تگ (<body></body>) قرار دهید.

Select All

<layer name="a0" left="10" top="10" visibility="show" bgcolor="#ffffff" clip="0,0,1,1"></layer>
<layer name="a1" left="10" top="10" visibility="show" bgcolor="#fff000" clip="0,0,1,1"></layer>
<layer name="a2" left="10" top="10" visibility="show" bgcolor="#ffa000" clip="0,0,1,1"></layer>
<layer name="a3" left="10" top="10" visibility="show" bgcolor="#ff00ff" clip="0,0,1,1"></layer>
<layer name="a4" left="10" top="10" visibility="show" bgcolor="#00ff00" clip="0,0,1,1"></layer>
<layer name="a5" left="10" top="10" visibility="show" bgcolor="#FF00FF" clip="0,0,1,1"></layer>
<layer name="a6" left="10" top="10" visibility="show" bgcolor="#FF0000" clip="0,0,1,1"></layer>
<layer name="a7" left="10" top="10" visibility="show" bgcolor="#ffffff" clip="0,0,2,2"></layer>
<layer name="a8" left="10" top="10" visibility="show" bgcolor="#fff000" clip="0,0,2,2"></layer>
<layer name="a9" left="10" top="10" visibility="show" bgcolor="#ffa000" clip="0,0,2,2"></layer>
<layer name="a10" left="10" top="10" visibility="show" bgcolor="#ff00ff" clip="0,0,2,2"></layer>
<layer name="a11" left="10" top="10" visibility="show" bgcolor="#00ff00" clip="0,0,2,2"></layer>
<layer name="a12" left="10" top="10" visibility="show" bgcolor="#0000ff" clip="0,0,2,2"></layer>
<layer name="a13" left="10" top="10" visibility="show" bgcolor="#FF0000" clip="0,0,3,3"></layer>
<script language="JavaScript">
if (document.all){
with (document){
write('<div id="starsDiv" style="position:absolute;top:0px;left:0px">')
write('<div style="position:relative;width:1px;height:1px;',
'background:#ffffff;font-size:1px;visibility:visible"></div>')
write('<div style="position:relative;width:1px;height:1px;',
'background:#fff000;font-size:1px;visibility:visible"></div>')
write('<div style="position:relative;width:1px;height:1px;',
'background:#ffa000;font-size:1px;visibility:visible"></div>')
write('<div style="position:relative;width:1px;height:1px;',
'background:#ff00ff;font-size:1px;visibility:visible"></div>')
write('<div style="position:relative;width:1px;height:1px;',
'background:#00ff00;font-size:1px;visibility:visible"></div>')
write('<div style="position:relative;width:1px;height:1px;',
'background:#0000ff;font-size:1px;visibility:visible"></div>')
write('<div style="position:relative;width:1px;height:1px;',
'background:#FF0000;font-size:1px;visibility:visible"></div>')
write('<div style="position:relative;width:2px;height:2px;',
'background:#ffffff;font-size:2px;visibility:visible"></div>')
write('<div style="position:relative;width:2px;height:2px;',
'background:#fff000;font-size:2px;visibility:visible"></div>')
write('<div style="position:relative;width:2px;height:2px;',
'background:#ffa000;font-size:2px;visibility:visible"></div>')
write('<div style="position:relative;width:2px;height:2px;',
'background:#ff00ff;font-size:2px;visibility:visible"></div>')
write('<div style="position:relative;width:2px;height:2px;',
'background:#00ff00;font-size:2px;visibility:visible"></div>')
write('<div style="position:relative;width:2px;height:2px;',
'background:#0000ff;font-size:2px;visibility:visible"></div>')
write('<div style="position:relative;width:3px;height:3px;',
'background:#FF0000;font-size:3px;visibility:visible"></div>')
write('</div>')
}
}
var Clrs=new Array(6)
Clrs[0]='ff0000';
Clrs[1]='00ff00';
Clrs[2]='000aff';
Clrs[3]='ff00ff';
Clrs[4]='fff000';
Clrs[5]='fffff0';
if (document.layers)
{window.captureEvents(Event.MOUSEMOVE);}
var yBase = 200;
var xBase = 200;
var step;
var currStep = 0;
var Xpos = 1;
var Ypos = 1;
if (document.all)
{
  function MoveHandler(){
  Xpos = document.body.scrollLeft+event.x;
  Ypos = document.body.scrollTop+event.y;
  }
  document.onmousemove = MoveHandler;
}
else if (document.layers)
{
  function xMoveHandler(evnt){
  Xpos = evnt.pageX;
  Ypos = evnt.pageY;
  }
  window.onMouseMove = xMoveHandler;
}
function animateLogo() {
if (document.all)
{
 yBase = window.document.body.offsetHeight/4;
 xBase = window.document.body.offsetWidth/4;
}
else if (document.layers)
{
 yBase = window.innerHeight/4;
 xBase = window.innerWidth/4;
}
if (document.all)
{
 for ( i = 0 ; i < starsDiv.all.length ; i++ )
 {step=3;
  starsDiv.all[i].style.top = Ypos + yBase*Math.cos((currStep + i*4)/12)*Math.cos(0.7+currStep/200);
  starsDiv.all[i].style.left = Xpos + xBase*Math.sin((currStep + i*3)/10)*Math.sin(8.2+currStep/400);
  for (ai=0; ai < Clrs.length; ai++)
    {
     var c=Math.round(Math.random()*[ai]);
    }
    starsDiv.all[i].style.background=Clrs[c];
 }
}
else if (document.layers)
{
 for ( j = 0 ; j < 14 ; j++ ) //number of NS layers!
 {step = 4;
  var templayer="a"+j
  document.layers[templayer].top = Ypos + yBase*Math.sin((currStep + j*4)/12)*Math.cos(0.7+currStep/200);
  document.layers[templayer].left = Xpos + xBase*Math.sin((currStep + j*3)/10)*Math.sin(8.2+currStep/400);
  for (aj=0; aj < Clrs.length; aj++)
    {
     var c=Math.round(Math.random()*[aj]);
    }
    document.layers[templayer].bgColor=Clrs[c]; 
 }
}
currStep+= step;
setTimeout("animateLogo()", 10);
}
animateLogo();
// -->
</script>

98. با استفاده از این کد نوشته ی خود را از خارج صفحه به داخل هدایت کنید.

تبصره 1: این کد را بهتر است در قسمت بدن یعنی ما بین دو تگ (<body></body>) قرار دهید.
تبصره 2: متن خود را به جای عبارت !You are watching Nazanin Studio JavaScript جایگزین کنید.

Select All

<h2><span id="fly"></span></h2>
<script>

</script>
<script language="JavaScript1.2">

</script>

99. افکت زیبایی برای نام وب سایت شما (ماتریکس).

Select All

<style type="text/css">
.matrix { font-family: Arial; font-size:10pt; text-align:center; width:10px; padding:0px; margin:0px;}
</style>
<script type="text/javascript" language="JavaScript">
<!--
var rows=11;
var speed=50;
var reveal=2;
var effectalign="center"
var w3c=document.getElementById && !window.opera;;
var ie45=document.all && !window.opera;
var ma_tab, matemp, ma_bod, ma_row, x, y, columns, ma_txt, ma_cho;
var m_coch=new Array();
var m_copo=new Array();
window.onload=function() {
	if (!w3c && !ie45) return
  var matrix=(w3c)?document.getElementById("matrix"):document.all["matrix"];
  ma_txt=(w3c)?matrix.firstChild.nodeValue:matrix.innerHTML;
  ma_txt=" "+ma_txt+" ";
  columns=ma_txt.length;
  if (w3c) {
    while (matrix.childNodes.length) matrix.removeChild(matrix.childNodes[0]);
    ma_tab=document.createElement("table");
    ma_tab.setAttribute("border", 0);
    ma_tab.setAttribute("align", effectalign);
    ma_tab.style.backgroundColor="#000000";
    ma_bod=document.createElement("tbody");
    for (x=0; x<rows; x++) {
      ma_row=document.createElement("tr");
      for (y=0; y<columns; y++) {
        matemp=document.createElement("td");
        matemp.setAttribute("id", "Mx"+x+"y"+y);
        matemp.className="matrix";
        matemp.appendChild(document.createTextNode(String.fromCharCode(160)));
        ma_row.appendChild(matemp);
      }
      ma_bod.appendChild(ma_row);
    }
    ma_tab.appendChild(ma_bod);
    matrix.appendChild(ma_tab);
  } else {
    ma_tab='<ta'+'ble align="'+effectalign+'" border="0" style="background-color:#000000">';
    for (var x=0; x<rows; x++) {
      ma_tab+='<t'+'r>';
      for (var y=0; y<columns; y++) {
        ma_tab+='<t'+'d class="matrix" id="Mx'+x+'y'+y+'"> </'+'td>';
      }
      ma_tab+='</'+'tr>';
    }
    ma_tab+='</'+'table>';
    matrix.innerHTML=ma_tab;
  }
  ma_cho=ma_txt;
  for (x=0; x<columns; x++) {
    ma_cho+=String.fromCharCode(32+Math.floor(Math.random()*94));
    m_copo[x]=0;
  }
  ma_bod=setInterval("mytricks()", speed);
}

<body>
<div id="matrix">Nazanin Studio</div>
</body>

100. یک بازی بسیار جالب و سرگرم کننده توسط کدهای DHTML.

تبصره: این کد به علت حجم زیاد به تنهایی نیاز به یک صفحه دارد. شما کافیست که کل کد را در یک فایل متنی ذخیره کرده و آن را با فرمت htm.* ذخیره کنید و به فضای (Host) خود منتقل و لینک آن را در وب سایت خود بگذارید.

Select All

<html>
<head>
<title>Nazanin Studio - DHTML Game</title>
<style type="text/css">
table {font:bold 13px Verdana}
p {font:normal 11px Tahoma,Verdana}
input,select {font:normal 12px Tahoma,Verdana}
select {width:40px}
a {font-weight:bold}
.tower {position:absolute;visibility:visible;left:77px;top:184px;font:bold 10px Tahoma}
.container {position:absolute;visibility:visible;}
.towervert {position:absolute;visibility:visible;border:1px solid black;background-color:black}
.towerhoriz {position:absolute;visibility:visible;border:1px solid black;font-size:1px;background-color:black}
.disk {position:absolute;visibility:visible;border:1px solid black}
</style>
<script type="text/javascript">

/***********************************
*
* Nazanin Studio Dynamic HTML Cods 
*
************************************/

var delay = 600; //in milliseconds

var	drag=false;
    var objDisk=null;
    var x = 0;
    var y = 0;
    var disksOnTower1 = new Array(null,null,null,null,null,null,null,null);
    var disksOnTower2 = new Array(null,null,null,null,null,null,null,null);
    var disksOnTower3 = new Array(null,null,null,null,null,null,null,null);
    var disksOnTowers = new Array(disksOnTower1,disksOnTower2,disksOnTower3);
    var offsetleft = 30;
    var offsettop = 30;
    var offsettower = 20;
    var offsethoriz = 30;
    var basetop = 0;
    var diskheight = 0;
    var midhoriztower = 0;
    var indexTo=1;
    var indexFr=1;
    var movectr=0;
    var gameOver=false;
    var prevIndex=0;
    var zindex = 0;
    var currTower=1;
    var prevTower=1;
    var demo=false;
    var arrFr = new Array(255);
    var arrTo = new Array(255);
    var idx = 0;
    var pos = 0;
    var t=null;
    var stop=false;

function init(){
        if (document.getElementById){
        	var diskno = document.hanoi.diskno;

diskno.options.selectedIndex = 0;
            drawTowers();
            drawDisks(parseInt(diskno.options[diskno.options.selectedIndex].text));		
        }
    }
    
    function initVars(){
        for (var i=0;i<disksOnTower1.length;i++){
            disksOnTower1[i]=null;
            disksOnTower2[i]=null;
            disksOnTower3[i]=null;
        }
        drag = false;
        indexTo = 1;
        indexFr = 1;
        movectr = 0;
        zindex = 0;
        idx = 0;
        pos = 0;
        t = null;
        gameOver=false;
        stop=false;
        demo=false;
        document.hanoi.btnUndo.disabled=true;
    }
    
    function drawTowers(){
    	var title=document.getElementById("title");
    	var tower1=document.getElementById("tower1");
    	var tower2=document.getElementById("tower2");
    	var tower3=document.getElementById("tower3");
    	var settings=document.getElementById("settings");
        var titlewidth = parseInt(title.style.width);
        var titleheight = parseInt(title.style.height);        
        var towerwidth = parseInt(tower1.style.width);
        var towerheight = parseInt(tower1.style.height);
        var settingswidth = parseInt(settings.style.width);
        midhoriztower = parseInt(document.getElementById("horiztower1").style.width)/2;
        diskheight = parseInt(document.getElementById("disk1").style.height);
                
        title.style.left=offsetleft+(1.5*towerwidth)+offsettower-(titlewidth/2)+"px";
        title.style.top=offsettop+"px";
        tower1.style.left=offsetleft+"px";
        tower1.style.top=offsettop+titleheight+offsethoriz+"px";
        tower2.style.left=offsetleft+towerwidth+offsettower+"px";
        tower2.style.top=offsettop+titleheight+offsethoriz+"px";
        tower3.style.left=offsetleft+(towerwidth+offsettower)*2+"px";
        tower3.style.top=offsettop+titleheight+offsethoriz+"px";
        settings.style.left=offsetleft+(1.5*towerwidth)+offsettower-(settingswidth/2)+"px";
        settings.style.top=parseInt(tower1.style.top)+towerheight+offsethoriz+"px";
    }
    
    function drawDisks(disknum){
    	var tower1=document.getElementById("tower1");
        var disktop = parseInt(tower1.style.top)+parseInt(document.getElementById("horiztower1").style.top);
        var lefttower1 = parseInt(tower1.style.left);
        var disk;
        var f=document.hanoi;
        basetop = disktop;
        for (var i=disksOnTower1.length;i>=1;i--){
        	disk = document.getElementById("disk"+i);
			disk.style.zIndex=++zindex;	
            if (i<=disknum){
                disk.style.left=lefttower1+midhoriztower-parseInt(disk.style.width)/2+"px";
                disk.style.top=disktop-diskheight-1+"px";
                disktop = parseInt(disk.style.top);
                disksOnTowers[0][i-1]=disk;
            }            
            else {
                disk.style.left="-250px";
                disk.style.top="-250px";
                disksOnTowers[0][i-1]=null;
            }
        }       
        f.minmove.value=f.diskno.options[f.diskno.options.selectedIndex].value;
        f.yourmove.value=0;
    }
    
    function newGame(obj){
        if (movectr>0 && !gameOver && !stop){
            if (confirm("Current game will be aborted, would you like to continue?")){
                initVars();
                drawDisks(parseInt(obj.options[obj.options.selectedIndex].text));
            }
            else document.hanoi.diskno.options.selectedIndex=prevIndex;
        }
        else {
            initVars();
            drawDisks(parseInt(obj.options[obj.options.selectedIndex].text));
        }
    }
    
    function initializeDrag(disk,e){
    	if (!e) e=event;
        if (stop){
            alert("You cannot continue solving the puzzle after clicking the 'Stop' button.\nClick 'Restart' button or select no. of disks to continue playing.");
            return;
        }
        indexFr = indexTo;
        if (disk.id!=disksOnTowers[indexFr-1][0].id || gameOver || demo) return;
        objDisk=disk;
        x=e.clientX;
        y=e.clientY;
        tempx=parseInt(disk.style.left);
        tempy=parseInt(disk.style.top);
        document.onmousemove=dragDisk;
    }
    
    function dragDisk(e){
        if (!e) e=event;
        zindex++;
        drag=true;
        var posX = tempx+e.clientX-x;
        var posY = tempy+e.clientY-y;
        var objTower1 = document.getElementById("tower1");
        var objTower2 = document.getElementById("tower2");
        var objTower3 = document.getElementById("tower3");
        var tower1Left = parseInt(objTower1.style.left);
        var tower2Left = parseInt(objTower2.style.left);
        var tower3Left = parseInt(objTower3.style.left);
        var tower3Width = parseInt(objTower3.style.width);
        
        objDisk.style.zIndex=zindex;
        objDisk.style.left=posX+'px';
        objDisk.style.top=posY+'px';        
        
        if (e.clientX>=document.body.clientWidth-10 || e.clientY>=document.body.clientHeight-5 || e.clientX==5 || e.clientY==5){ //outside available window
            indexTo=indexFr;
            dropDisk(objDisk);
        }
        else if ( //in the vicinity of tower 3
            (tower3Left<=posX) && 
            (tower3Left+tower3Width>=posX) && 
            (parseInt(objTower3.style.top)+parseInt(objTower3.style.height)>posY)
            ){
            indexTo=3;
        }
        else if ((tower2Left<=posX) && (tower2Left+tower3Width>=posX)){ //in the vicinity of tower 2
            indexTo=2;
        }
        else if ((tower1Left<=posX) && (tower1Left+parseInt(objTower1.style.width)>=posX)){ //in the vicinity of tower 1
            indexTo=1;
        }
        else indexTo = indexFr;
        return false;
    }

function unDo(btn){
        disk=disksOnTowers[currTower-1][0];
        pushDisk(disk,prevTower);
        getNewTop(currTower,null);
        getNewTop(prevTower,disk);
        movectr--;
        document.hanoi.yourmove.value=movectr;
        btn.disabled=true;
    }
    
    function displayIns(){
        var msg="Try to move all the disks from TOWER 1 to TOWER 3.\n";
        msg+="You may only move one disk at a time.\n";
        msg+="You must never allow a bigger disk to go on top of a smaller disk.";
        alert(msg);
    } 
</script>
</head>
<body onload="init();" onselectstart="return false" oncontextmenu="return false">
<form name="hanoi">

<div id="title" style="position:absolute;visibility:visible;left:-250px;top:-250px;width:160px;height:20px;font:bold 20px Tahoma;text-align:center;">Tower of Hanoi</div>

<div id="tower1" class="container" style="left:-250px;top:-250px;width:200px;height:200px" onmousemove="indexTo=1">
<div id="verttower1" class="towervert" style="left:99px;top:10px;width:3px;height:170px"></div>
<div id="horiztower1" class="towerhoriz" style="left:0px;top:180px;width:200px;height:2px"></div>
<div class="tower">TOWER 1</div>
</div>

<div id="tower2" class="container" style="left:-250px;top:-250px;width:200px;height:200px" onmousemove="indexTo=2">
<div id="verttower2" class="towervert" style="left:99px;top:10px;width:3px;height:170px"></div>
<div id="horiztower2" class="towerhoriz" style="left:0px;top:180px;width:200px;height:2px"></div>
<div class="tower">TOWER 2</div>
</div>

<div id="tower3" class="container" style="left:-250px;top:-250px;width:200px;height:200px" onmousemove="indexTo=3">
<div id="verttower3" class="towervert" style="left:99px;top:10px;width:3px;height:170px"></div>
<div id="horiztower3" class="towerhoriz" style="left:0px;top:180px;width:200px;height:2px"></div>
<div class="tower">TOWER 3</div>
</div>

<div id="settings" class="container" style="left:-250px;top:-250px;width:260px;">
<table>
<tr><td>No. of disks</td>
<td>
<select name="diskno" onchange="newGame(this)" onclick="prevIndex=this.options.selectedIndex">
<option value="7" selected>3</option>
<option value="15">4</option>
<option value="31">5</option>
<option value="63">6</option>
<option value="127">7</option>
<option value="255">8</option>
</select>
</td></tr>
<tr><td>Minimum no. of moves  </td>
<td><input name="minmove" style="border:none" size="3" value="255" readonly="readonly" /></td></tr>
<tr><td>Your no. of moves</td>
<td><input name="yourmove" style="border:none" size="3" value="0" readonly="readonly" /></td></tr>
<tr><td colspan="2" align="center">
<input type="button" name="btnIns" value="Instructions" onclick="displayIns()" />
<input type="button" name="btnRes" value="Restart" onclick="newGame(document.hanoi.diskno)" />
<input type="button" name="btnUndo" value="Undo" onclick="unDo(this)" disabled="disabled" />
<input type="button" name="btnSolve" value="Solve" onclick="solve(this)" />
</td></tr>
</table>
<p> </p>
<p>
This DHTML script is featured on <a href="http://www.NazaninSt.PersianBlog.com" target="_blank">Nazanin Studio</a>.
</p>
</div>
</form>
</body>
</html>