تبدیل دکمه معمولی به دکمه 2 حالته با کد جاوا

k2-4u

k2-4u

Well-Known Member
منو ها درست کنار هم قرار گرفتن ؟؟

شما کدی رو که تا اینجا انجام دادی . بگذار تا ببینم چی کارش می کنم :-?
 
sina.dk

sina.dk

Member
:rose::rose::rose:

منو ها درست کنار هم قرار گرفتن ؟؟
کلیک کنید تا باز شود...
بله ... کنار هم اومدن اما وسط نیستن ... در واقع شکل سايت الان اين اينجوري شده >

hyc9gx6wx9eiyf3th.jpg

​

شما کدی رو که تا اینجا انجام دادی . بگذار تا ببینم چی کارش می کنم :-?
کلیک کنید تا باز شود...
لطف می کنين ... چشم ... اينم از کل کد که آپلود کردم ... فرمتش همون tpl هست و با notepad باز میشه .

 
k2-4u

k2-4u

Well-Known Member
خب . اون تیکه بالا رو عوض کن به جاش این کد رو بگذار
کد: 
<td id="here" align="center" dir=ltr>
<div style="position:relative;width:516px;height:86">
 
sina.dk

sina.dk

Member
absdostan گفت:
درود

دوست عزیز این نمونه تصاویر یک کد CSS می باشد.

شما می تونی در این سایت هم کد سی اس اس اون و هم نحوه کار با این نمونه باتن ها رو فرا بگیری (در قالبش خودش هم از این کد استفاده کرده)

http://www.webdesignerwall.com/tutorials/advanced-css-menu/​
کلیک کنید تا باز شود...

من دنبال دکمه ای می گردم که افکت fade رو داشته باشه ... يعنی آروم تبدیل بشه به حالت دوم :wink:
 
sina.dk

sina.dk

Member
منتظر فرمايشات k2-4u هستيم :)

استاد منتظریمااااا:green:

:shock:چیکار کنم من ؟ :sad:
 
آخرین ویرایش:
k2-4u

k2-4u

Well-Known Member
خب این که کار میکنه !!!!

کد: 
<HTML dir=rtl>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function opacity(id, opacStart, opacEnd, millisec) {
	//speed for each frame
	var speed = Math.round(millisec / 90);
	var timer = 0;

	//determine the direction for the blending, if start and end are the same nothing happens
	if(opacStart > opacEnd) {
		for(i = opacStart; i >= opacEnd; i--) {
			setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
			timer++;
		}
	} else if(opacStart < opacEnd) {
		for(i = opacStart; i <= opacEnd; i++)
			{
			setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
			timer++;
		}
	}
}

//change the opacity for different browsers
function changeOpac(opacity, id) {
	var object = document.getElementById(id).style; 
	object.opacity = (opacity / 100);
	object.MozOpacity = (opacity / 100);
	object.KhtmlOpacity = (opacity / 100);
	object.filter = "alpha(opacity=" + opacity + ")";
}

function shiftOpacity(id, millisec) {
	//if an element is invisible, make it visible, else make it ivisible
	if(document.getElementById(id).style.opacity == 0) {
		opacity(id, 0, 100, millisec);
	} else {
		opacity(id, 100, 0, millisec);
	}
}

function blendimage(divid, imageid, imagefile, millisec) {
	var speed = Math.round(millisec / 100);
	var timer = 0;
	
	//set the current image as background
	document.getElementById(divid).style.backgroundImage = "url(" + document.getElementById(imageid).src + ")";
	
	//make image transparent
	changeOpac(0, imageid);
	
	//make new image
	document.getElementById(imageid).src = imagefile;

	//fade in image
	for(i = 0; i <= 100; i++) {
		setTimeout("changeOpac(" + i + ",'" + imageid + "')",(timer * speed));
		timer++;
	}
}

function currentOpac(id, opacEnd, millisec) {
	//standard opacity is 100
	var currentOpac = 100;
	
	//if the element has an opacity set, get it
	if(document.getElementById(id).style.opacity < 100) {
		currentOpac = document.getElementById(id).style.opacity * 100;
	}

	//call for the function that changes the opacity
	opacity(id, currentOpac, opacEnd, millisec)
}
</script>


<style type="text/css" media="all">
@import url({THEME}/css/engine.css);
table td{
padding:0px;
font-size: 11px;
font-family: tahoma;
}
</style>

<style type="text/css">
<!--
#scroller {
     width:324px;
     height:200px;
     margin:0px auto;
     overflow:auto;
 }
#scroller p {
     font-family:verdana,arial,helvetica,sans-serif;
     font-size:14px;
     color:#006;
     text-align:justify;
     background-color:#ccf;
     padding:10px;
     margin:10px;
 }
.news_body {
	padding : 25px;
	color : #353535;
	font-size : 12px;
	text-align : left;
}
-->
</style>

{headers}{AJAX}

<BODY bgColor=#464646 style="text-align: right; " topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0">
<table border="0" width="100%" id="table1" cellspacing="0" cellpadding="0">
	<tr>
		<td valign="top" width="100%" style="background-image: url('{THEME}/images/bar1.gif'); background-repeat: repeat-x; background-position: left top" bgcolor="#464646">
		<table border="0" width="100%" id="table15" cellspacing="0" cellpadding="0" height="180">
			<tr>
				<td style="background-image: url('{THEME}/images/topsl-bg.png'); background-repeat: no-repeat; background-position: center top">
				<div align="center">
					<table border="0" width="905" id="table38" height="175">
						<tr>
							<td style="background-image: url('{THEME}/images/header.png'); background-repeat: no-repeat; background-position: center">
							<table border="0" width="100%" id="table47" cellspacing="0" cellpadding="0" height="170">
								<tr>
									<td>&nbsp;</td>
								</tr>
								<tr>
							<td height="17" width="774" valign="bottom"></td>
							<td height="35" width="127" valign="bottom" rowspan="2">

							</td>
								</tr>
								<tr>
							<td height="15" width="774" valign="bottom">
      							</td>
								</tr>
							</table>
							</td>
						</tr>
						</table>
				</div>
				</td>
			</tr>
		</table>
		</td>
	</tr>
	
	<tr>
		<td valign="top" height="29" bgcolor="#464646">
		<table border="0" width="100%" id="table2" height="36" cellspacing="0" cellpadding="0">
			<tr>
				<td style="background-image: url('{THEME}/images/pathway-bg.gif'); background-repeat: no-repeat; background-position:  center top; ">
				<div align="center">
					<table border="0" width="898" id="table35" height="31">
						<tr>

<td id="here" align="center" dir=ltr>
<div style="position:relative;width:516px;height:86">

<a style="display:block;width:86px;height:86px;background-image:url({THEME}/images/6.gif);float:left;" href="/cms/index.php"> 
<img src="{THEME}/images/6_2.gif" width="86" height="86" id="MenuIMG5" style="opacity:0;filter:alpha(opacity:0);" onmouseover="opacity('MenuIMG5',0,100, 200)" onmouseout="opacity('MenuIMG5',100,0, 200)" />
</a>

<a style="display:block;width:86px;height:86px;background-image:url({THEME}/images/5.gif);float:left;" href="/cms/hardware"> 
<img src="{THEME}/images/5_2.gif" width="86" height="86" id="MenuIMG4" style="opacity:0;filter:alpha(opacity:0);" onmouseover="opacity('MenuIMG4',0,100, 200)" onmouseout="opacity('MenuIMG4',100,0, 200)" />
</a>

<a style="display:block;width:86px;height:86px;background-image:url({THEME}/images/4.gif);float:left;" href="/cms/software"> 
<img src="{THEME}/images/4_2.gif" width="86" height="86" id="MenuIMG3" style="opacity:0;filter:alpha(opacity:0);" onmouseover="opacity('MenuIMG3',0,100, 200)" onmouseout="opacity('MenuIMG3',100,0, 200)" />
</a>

<a style="display:block;width:86px;height:86px;background-image:url({THEME}/images/3.gif);float:left;" href="/cms/design"> 
<img src="{THEME}/images/3_2.gif" width="86" height="86" id="MenuIMG2" style="opacity:0;filter:alpha(opacity:0);" onmouseover="opacity('MenuIMG2',0,100, 200)" onmouseout="opacity('MenuIMG2',100,0, 200)" />
</a>

<a style="display:block;width:86px;height:86px;background-image:url({THEME}/images/2.gif);float:left;" href="/cms/aboutus"> 
<img src="{THEME}/images/2_2.gif" width="86" height="86" id="MenuIMG1" style="opacity:0;filter:alpha(opacity:0);" onmouseover="opacity('MenuIMG1',0,100, 200)" onmouseout="opacity('MenuIMG1',100,0, 200)" />
</a>

<a style="display:block;width:86px;height:86px;background-image:url({THEME}/images/1.gif);float:left;" href="/cms/contactus"> 
<img src="{THEME}/images/1_2.gif" width="86" height="86" id="MenuIMG" style="opacity:0;filter:alpha(opacity:0);" onmouseover="opacity('MenuIMG',0,100, 200)" onmouseout="opacity('MenuIMG',100,0, 200)" />
</a>

</div>


							</td>
						</tr>
					</table>
				</div>
				</td>
			</tr>
		</table>
		</td>
	</tr>
	
	<tr>
		<td valign="top" height="57" bgcolor="#464646">
		<table border="0" width="100%" id="table3" height="277" cellspacing="0" cellpadding="0">
			<tr>
				<td width="380" rowspan="2">&nbsp;</td>
				<td valign="top">
				<p align="left">&nbsp;</td>
				<td valign="top" width="208">&nbsp;</td>
				<td valign="top" width="198" align="left" height="13"></td>
				<td width="172" rowspan="2">&nbsp;</td>
			</tr>
			<tr><td valign="top" width="208">
				<div align="center">
					<table border="0" width="200" id="table39" cellspacing="0" cellpadding="0" height="144">
						<tr>
							<td valign="top" style="background-image: url('{THEME}/images/boxbg.gif'); background-repeat: no-repeat; background-position: left top">
							<table border="0" width="100%" id="table40" height="151" cellspacing="1" cellpadding="2">
								<tr>
									<td height="52" width="5%">&nbsp;</td>
									<td height="52" width="91%"><b>&nbsp;<span lang="fa">موضوعات</span></b></td>
									<td height="52" width="4%">&nbsp;</td>
								</tr>
								<tr>
									<td valign="top">&nbsp;</td>
									<td valign="top">{category_block}</td>
									<td valign="top">&nbsp;</td>
								</tr>
							</table>
							</td>
						</tr>
						<tr>
							<td valign="top" style="background-image: url('{THEME}/images/boxbgbo.gif'); background-repeat: no-repeat; background-position: left top" height="13">
							</td>
						</tr>
						</tr>
					</table>
					<table border="0" width="200" id="table39" cellspacing="0" cellpadding="0" height="144">
						<tr>
							<td valign="top" style="background-image: url('{THEME}/images/boxbg.gif'); background-repeat: no-repeat; background-position: left top">
							<table border="0" width="100%" id="table40" height="151" cellspacing="1" cellpadding="2">
								<tr>
									<td height="52" width="5%">&nbsp;</td>
									<td height="52" width="91%"><b>&nbsp;<span lang="fa">منوي کاربري</span></b></td>
									<td height="52" width="4%">&nbsp;</td>
								</tr>
								<tr>
									<td valign="top">&nbsp;</td>
									<td valign="top">{login}</td>
									<td valign="top">&nbsp;</td>
								</tr>
							</table>
							</td>
						</tr>
						<tr>
							<td valign="top" style="background-image: url('{THEME}/images/boxbgbo.gif'); background-repeat: no-repeat; background-position: left top" height="13">
							</td>
						</tr>
						</tr>
					</table>
					<table border="0" width="200" id="table39" cellspacing="0" cellpadding="0" height="144">
						<tr>
							<td valign="top" style="background-image: url('{THEME}/images/boxbg.gif'); background-repeat: no-repeat; background-position: left top">
							<table border="0" width="100%" id="table40" height="151" cellspacing="1" cellpadding="2">
								<tr>
									<td height="52" width="5%">&nbsp;</td>
									<td height="52" width="91%"><b>&nbsp;<span lang="fa">آرشيو مطالب</span></b></td>
									<td height="52" width="4%">&nbsp;</td>
								</tr>
								<tr>
									<td valign="top">&nbsp;</td>
									<td valign="top">{archives}</td>
									<td valign="top">&nbsp;</td>
								</tr>
							</table>
							</td>
						</tr>
						<tr>
							<td valign="top" style="background-image: url('{THEME}/images/boxbgbo.gif'); background-repeat: no-repeat; background-position: left top" height="13">
							</td>
						</tr>
						</tr>
					</table>
					<table border="0" width="200" id="table39" cellspacing="0" cellpadding="0" height="144">
						<tr>
							<td valign="top" style="background-image: url('{THEME}/images/boxbg.gif'); background-repeat: no-repeat; background-position: left top">
							<table border="0" width="100%" id="table40" height="151" cellspacing="1" cellpadding="2">
								<tr>
									<td height="52" width="5%">&nbsp;</td>
									<td height="52" width="91%"><b>&nbsp;<span lang="fa">آمار سايت</span></b></td>
									<td height="52" width="4%">&nbsp;</td>
								</tr>
								<tr>
									<td valign="top">&nbsp;</td>
									<td valign="top">{siteinfo}</td>
									<td valign="top">&nbsp;</td>
								</tr>
							</table>
							</td>
						</tr>
						<tr>
							<td valign="top" style="background-image: url('{THEME}/images/boxbgbo.gif'); background-repeat: no-repeat; background-position: left top" height="13">
							</td>
						</tr>
						</tr>
					</table>
					<table border="0" width="200" id="table39" cellspacing="0" cellpadding="0" height="144">
						<tr>
							<td valign="top" style="background-image: url('{THEME}/images/boxbg.gif'); background-repeat: no-repeat; background-position: left top">
							<table border="0" width="100%" id="table40" height="151" cellspacing="1" cellpadding="2">
								<tr>
									<td height="52" width="5%">&nbsp;</td>
									<td height="52" width="91%"><b>&nbsp;<span lang="fa">لينکستان</span></b></td>
									<td height="52" width="4%">&nbsp;</td>
								</tr>
								<tr>
									<td valign="top">&nbsp;</td>
									<td valign="top">{obmen}</td>
									<td valign="top">&nbsp;</td>
								</tr>
							</table>
							</td>
						</tr>
						<tr>
							<td valign="top" style="background-image: url('{THEME}/images/boxbgbo.gif'); background-repeat: no-repeat; background-position: left top" height="13">
							</td>
						</tr>
						</tr>
					</table>

					</div>
					</div>
				</div>
				</td>
			<td valign="top"><font color="#FFFFFF">{content}{info}</font></td>
				
</table>
	</tr>
	<tr>
		<td valign="top" height="54" bgcolor="#1F1F1F" style="background-image: url('{THEME}/images/bottom.gif'); background-repeat: repeat-x; background-position: left top">
		<table border="0" width="100%" id="table37" height="75">
			<tr>
				<td>
	<table border="0" width="100%" id="table49" height="56">
		<tr>
			<td style="font-size: 11px; font-family: tahoma; padding: 0px">
			<p align="center"><font color="#C5C5C5">
			Copyright &copy; 2009 By <b><a href=http://www.aris-group.com target="_blank">Aris-Group.com</a></b>, All Rights Reserved<BR><BR>
			System Powered By <a href=http://datalifecms.ir>Datalife Engine</a>
			</font></td>
			</tr>
	</table>
				</td>
			</tr>
		</table>
		</td>
	</tr>
</table>

</body>
</HTML>
 
sina.dk

sina.dk

Member
بله ... کنار هم اومدن اما وسط نیستن ... در واقع شکل سايت الان اين اينجوري شده >

hyc9gx6wx9eiyf3th.jpg
 
sina.dk

sina.dk

Member
:green: سلام استاد k2-4u

کمک می خوام ... چیکار کنم اينو من ؟ :cry: center نمیشه ... همشم زیر سر اين float ها هستش ... وقتی lef هست دکمه ها می چسبن چپ وقتی right هست می چسبن راست center که می کنم دکمه ها میان زیر هم !

وقتی هم که حذفشون می کنم بازم دکمه ها ميان زیر هم ... :-?
 
k2-4u

k2-4u

Well-Known Member
اون float left باعث میشه که منو ها کنار هم وایسن
ولی نسبت به عنصر پدرشون left میشن
نه کل صفحه .
 
khaales

khaales

New Member
تشکر می کنم از مراودات و مکالمات تون با هم. تا صفحه دوم خوب بود و استفاده بردیم و چیز یاد گرفتیم از اونجا به بعدش رو به نظرم در چت روم حل کنید با هم .. ممنون از استاد !
 
برای ارسال پاسخ شما باید وارد سیستم شوید.

آخرین مطالب مجیدآنلاین

جدیدترین ارسال ها

بالا