ساخت منوهای افکت دار
منوهای با قابلیت باز و بسته شدن(جالب)
<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>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber1">
<tr>
<td>
<p align="center">
<span id="swall" onmouseover="this.style.textDecorationUnderline='true'" onmouseout="this.style.textDecoration='none'" class="curhand" onclick="displayall()">
Show All</span></td><br>
</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>
<p><span id="menu1" style="display:none;"><span lang="en-us">fun</span><br>
<span lang="en-us">sport</span><br>
<span lang="en-us">online</span><br>
<span lang="en-us">gime</span><br>
<span lang="en-us">learn</span><br>
<span lang="en-us">photo</span></span></p>
</blockquote>
<p></p>
<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>
<p></p>
<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>
<p></p>
<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>
<p></p>
<blockquote>
<span id="menu3" style="display:none;">Item 1<br>
Item 2<br>
Item 3<br>
Item 4<br>
Item 5<br>
Item 5<br>
Item 6</span>
</blockquote>
<p></p>
<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>
<p></p>
<blockquote>
<span id="menu4" style="display:none;">
Item 1<br>
Item 2<br>
Item 3<br>
Item 4<br>
Item 5<br>
Item 6</span>
</blockquote>
<p></p>
<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>
<p></p>
<blockquote>
<span id="menu5" style="display:none;">
Item 1<br>
Item 1<br>
Item 2<br>
Item 3<br>
Item 4<br>
Item 5</span>
</blockquote>
ایجاد لینکهای کشویی برای سایت یا وبلاگ
<script language="JavaScript">
function surfto(form)
{
var myindex=form.dest.selectedIndex
window.open(form.dest.options [myindex].value,"main","menubar=1,toolbar=0,location=0,directori es=0,status=1,copyhistory=0,width=300,height=270");
}
//-->
</SCRIPT>
<CENTER>
<FORM NAME="myform">
<SELECT NAME="dest" SIZE=1>
<OPTION VALUE="http://www.haraji.org/1000toman.html">haraji
<OPTION VALUE="http://www.haraji.org"> haraji
<OPTION VALUE="http://www.majthr.tk">majthr
<OPTION VALUE="http://www.haraj.tk">haraj.tk
</SELECT>
<P>
<INPUT TYPE="BUTTON" VALUE="Go !" onClick="surfto (this.form)">
</FORM>
</CENTER>
منوی متحرک(خیلی جالب)
<script type="text/javascript">
var goleftimage='http://www.dynamicdrive.com/dynamicindex1/pointer2.gif'
var gorightimage='http://www.dynamicdrive.com/dynamicindex1/pointer.gif'
var menuwidth=300
var menuheight=25
var scrolldir="normal"
var scrollspeed=6
var menucontents='<nobr><a href="http://www.haraji.org">Best site funy</a> | <a href="http://www.tebyan.net">Learning </a> | <a href="http://majthr.persianblog.com">majthr</a> | <a href="http://www.haraji.org/1000toman.html">best site shop iranian</a> | <a href="http://www.haraji.org/links.htm">Forum</a></nobr>'
var iedom=document.all||document.getElementById
var leftdircode='onMouseover="moveleft()" onMouseout="clearTimeout(lefttime)"'
var rightdircode='onMouseover="moveright()" onMouseout="clearTimeout(righttime)"'
if (scrolldir=="reverse"){
var tempswap=leftdircode
leftdircode=rightdircode
rightdircode=tempswap
}
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100;left:-5000">'+menucontents+'</span>')
var actualwidth=''
var cross_scroll, ns_scroll
var loadedyes=0
function fillup(){
if (iedom){
cross_scroll=document.getElementById? document.getElementById("test2") : document.all.test2
cross_scroll.innerHTML=menucontents
actualwidth=document.all? cross_scroll.offsetWidth : document.getElementById("temp").offsetWidth
}
else if (document.layers){
ns_scroll=document.ns_scrollmenu.document.ns_scrollmenu2
ns_scroll.document.write(menucontents)
ns_scroll.document.close()
actualwidth=ns_scroll.document.width
}
loadedyes=1
}
window.onload=fillup
function moveleft(){
if (loadedyes){
if (iedom&&parseInt(cross_scroll.style.left)>(menuwidth-actualwidth)){
cross_scroll.style.left=parseInt(cross_scroll.style.left)-scrollspeed+"px"
}
else if (document.layers&&ns_scroll.left>(menuwidth-actualwidth))
ns_scroll.left-=scrollspeed
}
lefttime=setTimeout("moveleft()",50)
}
function moveright(){
if (loadedyes){
if (iedom&&parseInt(cross_scroll.style.left)<0)
cross_scroll.style.left=parseInt(cross_scroll.style.left)+scrollspeed+"px"
else if (document.layers&&ns_scroll.left<0)
ns_scroll.left+=scrollspeed
}
righttime=setTimeout("moveright()",50)
}
if (iedom||document.layers){
with (document){
write('<table border="0" cellspacing="0" cellpadding="2">')
write('<td valign="middle"><a href="#" '+leftdircode+'><img src="'+goleftimage+'"border=0></a> </td>')
write('<td width="'+menuwidth+'px" valign="top">')
if (iedom){
write('<div style="position:relative;width:'+menuwidth+'px;height:'+menuheight+'px;overflow:hidden;">')
write('<div id="test2" style="position:absolute;left:0;top:0">')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width='+menuwidth+' height='+menuheight+' name="ns_scrollmenu">')
write('<layer name="ns_scrollmenu2" left=0 top=0></layer></ilayer>')
}
write('</td>')
write('<td valign="middle"> <a href="#" '+rightdircode+'>')
write('<img src="'+gorightimage+'"border=0></a>')
write('</td></table>')
}
}
</script>
ساخت یک جعبه لینک ساده
<layer id="divStayTopLeft">
<table border="1" width="130" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" bgcolor="#FFFFCC">
<p align="center"><b><font size="4">Menu</font></b></td>
</tr>
<tr>
<td width="100%" bgcolor="#FFFFFF">
<p align="left"> <a href="http://www.haraji.org/">تست</a><br>
<a href="http://www.haraji.org/">تست</a><br>
<a href="http://www.haraji.org/">تست</a><br>
<a href="http://www.haraji.org/">تست</a></td>
</tr>
</table>
</layer>
یک جعبه افکت دار خیلی جالب
<SCRIPT LANGUAGE="JavaScript">
<!--
n = (document.layers) ? 1:0
ie = (document.all) ? 1:0
function init() {
slideoutActive = 0
if (n) {
slideout1 = document.slideoutInterface.document.slideoutContent.document.slideoutContent1
slideout2 = document.slideoutInterface.document.slideoutContent.document.slideoutContent2
slideout3 = document.slideoutInterface.document.slideoutContent.document.slideoutContent3
slideout4 = document.slideoutInterface.document.slideoutContent.document.slideoutContent4
slideout5 = document.slideoutInterface.document.slideoutContent.document.slideoutContent5
}
if (ie) {
slideout1 = slideoutContent1.style
slideout2 = slideoutContent2.style
slideout3 = slideoutContent3.style
slideout4 = slideoutContent4.style
slideout5 = slideoutContent5.style
}
slideoutShown = slideout1
slideoutShown.xpos = 0
slideoutNew = "none"
slideoutNew.xpos = -285
}
function slideout(which) {
if (!slideoutActive && slideoutShown != which) {
slideoutActive = 1
slideoutNew = which
slideoutNew.xpos = -285
slideoutLeft()
}
}
function slideoutLeft() {
if (slideoutShown.xpos > -285) {
slideoutShown.xpos -= 15
slideoutShown.left = slideoutShown.xpos
setTimeout("slideoutLeft()",30)
}
else {
hide(slideoutShown)
show(slideoutNew)
setTimeout("slideoutRight()",50)
}
}
function slideoutRight() {
if (slideoutNew.xpos < 0) {
slideoutNew.xpos += 15
slideoutNew.left = slideoutNew.xpos
setTimeout("slideoutRight()",30)
}
else {
slideoutShown = slideoutNew
slideoutActive = 0 // stops the sequence
}
}
function show(showobj) {
if (n) showobj.visibility = "show"
if (ie) showobj.visibility = "visible"
}
function hide(hideobj) {
if (n) hideobj.visibility = "hide"
if (ie) hideobj.visibility = "hidden"
}
//-->
</SCRIPT>
<STYLE TYPE="text/css">
<!--
A {color:#000000; font-family:'Arial'; font-weight:bold; font-size:10pt; text-decoration:none; line-height:20pt;}
STRONG {font-family:'Arial'; font-size:15pt; font-weight:bold; line-height:25pt;}
P {font-family:'Arial'; font-size:10pt; line-height:13pt;}
TD {font-family:'Arial'; font-size:10pt; line-height:13pt;}
#slideoutInterface {position:absolute; left:50; top:50; width:400; height:250; clip:rect(0,400,250,0); background-color:#000000; layer-background-color:#000000; visibility:visible;}
#slideoutSidebar1 {position:absolute; left:5; top:5; width:100; height:30; clip:rect(0,100,30,0); background-color:#9797FF; layer-background-color:#9797FF;}
#slideoutSidebar2 {position:absolute; left:5; top:40; width:100; height:30; clip:rect(0,100,30,0); background-color:#FFFF00; layer-background-color:#FFFF00;}
#slideoutSidebar3 {position:absolute; left:5; top:75; width:100; height:30; clip:rect(0,100,30,0); background-color:#FF80C0; layer-background-color:#FF80C0;}
#slideoutSidebar4 {position:absolute; left:5; top:110; width:100; height:30; clip:rect(0,100,30,0); background-color:#00FF80; layer-background-color:#00FF80;}
#slideoutSidebar5 {position:absolute; left:5; top:145; width:100; height:30; clip:rect(0,100,30,0); background-color:#FF5353; layer-background-color:#FF5353;}
#slideoutContent {position:absolute; left:110; top:5; width:285; height:240; clip:rect(0,285,240,0); background-color:#000000; layer-background-color:#000000;}
#slideoutContent1 {position:absolute; left:0; top:0; width:285; height:240; clip:rect(0,285,240,0); background-color:#DEDEDE; layer-background-color:#DEDEDE; visibility:visible;}
#slideoutContent2 {position:absolute; left:-285; top:0; width:285; height:240; clip:rect(0,285,240,0); background-color:#DEDEDE; layer-background-color:#DEDEDE; visibility:hidden;}
#slideoutContent3 {position:absolute; left:-285; top:0; width:285; height:240; clip:rect(0,285,240,0); background-color:#DEDEDE; layer-background-color:#DEDEDE; visibility:hidden;}
#slideoutContent4 {position:absolute; left:-285; top:0; width:285; height:240; clip:rect(0,285,240,0); background-color:#DEDEDE; layer-background-color:#DEDEDE; visibility:hidden;}
#slideoutContent5 {position:absolute; left:-285; top:0; width:285; height:240; clip:rect(0,285,240,0); background-color:#DEDEDE; layer-background-color:#DEDEDE; visibility:hidden;}
//-->
</STYLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" onLoad="init()">
<DIV ID="slideoutInterface">
<DIV ID="slideoutSidebar1"><P ALIGN=CENTER><A HREF="javascript:slideout(slideout1)">Contact Us</A></P></DIV>
<DIV ID="slideoutSidebar2"><P ALIGN=CENTER><A HREF="javascript:slideout(slideout2)">Help</A></P></DIV>
<DIV ID="slideoutSidebar3"><P ALIGN=CENTER><A HREF="javascript:slideout(slideout3)">Services</A></P></DIV>
<DIV ID="slideoutSidebar4"><P ALIGN=CENTER><A HREF="javascript:slideout(slideout4)">Products</A></P></DIV>
<DIV ID="slideoutSidebar5"><P ALIGN=CENTER><A HREF="javascript:slideout(slideout5)">Order</A></P></DIV>
<DIV ID="slideoutContent">
<DIV ID="slideoutContent1">
<P ALIGN="CENTER"><STRONG>Contact Us</STRONG>
<P>
<TABLE BORDER=0 WIDTH=275><TD>
You can add<a href="http://www.haraji.org/"> <FONT COLOR=BLUE>Links</FONT></a>.
<P>
Or images: <IMG SRC="smile.gif" BORDER=0 HEIGHT=11 WIDTH=11>
<P>
Or just use text to explain what you have or what you are doing.
</TD></TABLE>
</P>
</DIV>
<DIV ID="slideoutContent2">
<P ALIGN="CENTER"><STRONG>Help</STRONG>
<P>
<TABLE BORDER=0 WIDTH=275><TD>
You can add <A HREF="http://www.haraji.org"><FONT COLOR=BLUE>Links</FONT></A>.
<P>
Or images: <IMG SRC="smile.gif" BORDER=0 HEIGHT=11 WIDTH=11>
<P>
Or just use text to explain what you have or what you are doing.
</TD></TABLE>
</P>
</DIV>
<DIV ID="slideoutContent3">
<P ALIGN="CENTER"><STRONG>Services</STRONG>
<P>
<TABLE BORDER=0 WIDTH=275><TD>
You can add <A HREF="http://www.haraji.org/"><FONT COLOR=BLUE>Links</FONT></A>.
<P>
Or images: <IMG SRC="smile.gif" BORDER=0 HEIGHT=11 WIDTH=11>
<P>
Or just use text to explain what you have or what you are doing.
</TD></TABLE>
</P>
</DIV>
<DIV ID="slideoutContent4">
<P ALIGN="CENTER"><STRONG>Products</STRONG>
<P>
<TABLE BORDER=0 WIDTH=275><TD>
You can add <A HREF="http://www.haraji.org/"><FONT COLOR=BLUE>Links</FONT></A>.
<P>
Or images: <IMG SRC="smile.gif" BORDER=0 HEIGHT=11 WIDTH=11>
<P>
Or just use text to explain what you have or what you are doing.
</TD></TABLE>
</P>
</DIV>
<DIV ID="slideoutContent5">
<P ALIGN="CENTER"><STRONG>Order</STRONG>
<P>
<TABLE BORDER=0 WIDTH=275><TD>
You can add <A HREF="http://www.haraji.org/"><FONT COLOR=BLUE>Links</FONT></A>.
<P>
Or images: <IMG SRC="smile.gif" BORDER=0 HEIGHT=11 WIDTH=11>
<P>
Or just use text to explain what you have or what you are doing.
</TD></TABLE>
</P>
موج دار کردن متن
<HTML>
<HEAD>
<STYLE>
DIV.aFilter {FILTER:PROGID:DXIMAGETRANSFORM.MICROSOFT.WAVE(
strength=7,
freq=3,
lightstrength=100,
add=0,
phase=0);
width: 150px; color: #8080FF;font-size:30px;font-weight:bold;
text-align :Center;
}
</STYLE>
<SCRIPT language="javascript">
function doWave()
{
document.getElementById("myDiv").filters[0].phase += 10;
status = document.getElementById("myDiv").filters[0].phase ;
}
</SCRIPT>
</HEAD>
<BODY OnLoad="window.setInterval('doWave();',100);" >
<DIV CLASS="aFilter" id="myDiv"> <font size="7"> w w w . haraji . o r g </font> </DIV>
</BODY>
</HTML>
با سلام خدمت شما مطالب جالبی بود......اما باید عرض کنم جاوا کاملا متفاوت از جاوا اسکریپت است و کد های شما یک سری کارهارا ارائه کرده که کار خاصی انجام میدهد ولی هیچ توضیحی در مورد آنها وجود ندارد ...سعی کنید زبان را آموزش دهید
damet gharm khili bahale
faghat
bishtar tozih bedeke
chejori azin kodaestefadeh konim
ok
damet gharm babay
لینکم کنیدَیادتون نره.
سلام بلاک خوبی دارید بابا چقدر شما کدهای تکرای می نویسید جون هرکی دوست دارید کدهای بروز بنویسید (کپی کردن کدهای دیگران به وبلاک برای جلب بازدید زرنگی نیست) دستت درد نکنه کد بروز بزار بازم به وبلاکت میام
سلام.
وبلاگ خیلی توپی داری!!!
من بعضی از کدها رو برداشتم.
+راستی سایت قالب بلاگ اسکای اگه سراغ داشتی به من هم خبری بده!!!
به من هم سر بزن...
ممنونم
سلام خسته نباشی وبلاگ با حالی داشتی اما توضیح در مورد کد ها خیلی کم بود باتشکر و به امید دیدار BABYE
سلام
اگه وقت کردید به وب من هم یه سری بزنید
من بیش از1300مقاله وتحقیق رایگان راجمع آوری کردم
وبلاگ من الان پیج رنک2 داره
ومی خواهم باوبلاگ شماتبادل لینک کنم
لطفااگرتمایل داریدمن راباعنوان "1300مقاله وتحقیق رایگان"وبه آدرس:http://www.beheshtnet.blogfa.com
لینک کنیدوسپس ازطریق نظرات خبردهیدتامی خواهیدباچه نام وآدرسی لینک شوید
من درهمان روزلینکتون می کنم
من بعدازاینک شمارولینک کردم بهتون اطلاع می دم
ممنون