۩ آموزش ساخت دكمه چند حالته با ايميج ردي(وب كارها حتما ببينند) ۩

وضعیت
موضوع بسته شده است.
۩

۩mohammad۩

Member
سلام دوستان عزيز خودم.
امروز مي‌خوام آموزش ساختن Rollover button (دكمه‌هايي كه با قرار گرفتن يا فشردن موس تغيير شكل مي‌دن) رو براتون بدم.

1- در محيط فتوشاپ حالات مختلف يك دكمه رو طراحي كنيد - Normal, Over, Down -
توجه: لازم نيست براي هر حالت تمام دكمه رو طراحي كنيد، فقط طراحي تغييرات كافيست.
2- روي لايه دكمه كليك كنيد و مسير مقابل را طي كنيد Layer > new layer based slice منطقه اي كه Slice مي‌شود نشان دهنده‌ي محيطي است كه موس با قرار گرفتن بر روي آن باعث تغيير شكل دكمه مي‌شود. (شكل 1)
3- فايل را سيو كنيد و در محيط Image ready فايل رو باز كنيد و يا از كليد‌هاي Ctrl+Shift+M استفاده كنيد.
4- در محيد Image Ready روي palette (Web content) قرار بگيريد، اگر اين palette فعال نيست از منوي Window فعال كنيدش. (شكل 2)
5- در اين palette بر روي دكمه Create rollover state كليك كنيد، اين كار باعث ايجاد حالت Over مي‌شود، كليك مجدد حالت Down و بار معدي حالت هاي ديگر را ايجاد مي‌كند. ( حالت لايه هاي ايجاد شده را مي‌توانيد با راست كليك و set state تغيير دهيد) (شكل 2)
6- پس از ايجاد اين لايه ها شما بايد بر روي هر حالتي كه مي‌خواهيد كليك كنيد مثلا Down و تغييرات لازم براي اين حالت را اعمال كنيد. (شكل 3)
7- حالا دكمه شما كاملا آماده شده و براي آزمايشش مي‌تونيد بر روي كليد Preview Document از تول بار كليك كنيد. (شكل)
8- حالا فايل رو سيو كنيد، براي ديدن فايل روي بروزر Ctrol+Alt+P رو فشار بديد. (شكل)

اگه سوالي بود حتما بپرسيد چون من بعضي چيز‌هاي ابتدايي رو ننوشتم كه باعث گمراهيتون نشه.
ساختن Button در ايميج ردي ريزه كاري هاي ديگه اي هم داره كه سر فرصت خدمتتون مي‌گم.



*محمد آزاده
 
۩

۩mohammad۩

Member
ممنون دوستان.
من فكر مي‌كردم آموزش يه همچين چيزي اونم توي ايميج ردي براي دوستان ديگه اي هم كه پست نزدن جالب باشه چون واسه خودم كه خيلي جالب بود.
ديگه مجبور نيستيم براي طراحي يه دكمه ساده سه چهار تا تصوير سيو كنيم بعد حلا بريم و كدش رو بنويسيم و ...

-----------
خوشحالم 3panta از اين كه احساساتمون متقابله.



*محمد آزاده
 
G

genius_boy

Member
آقا ببين مشكل اين چيه كه عكسرو عوض نمي كنه!!!


کد: 
<html>

<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<script type="text/javascript">
<!--

function newImage(arg) {
	if (document.images) {
		rslt = new Image();
		rslt.src = arg;
		return rslt;
	}
}

function changeImages() {
	if (document.images && (preloadFlag == true)) {
		for (var i=0; i<changeImages.arguments.length; i+=2) {
			document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
		}
	}
}

var preloadFlag = false;
function preloadImages() {
	if (document.images) {
		index_________over = newImage("images/index_--------over.gif");
		index_________down = newImage("images/index_--------down.gif");
		index_______over = newImage("images/index_------over.gif");
		index_______down = newImage("images/index_------down.gif");
		index___________over = newImage("images/index_----------over.gif");
		index___________down = newImage("images/index_----------down.gif");
		index_______over039 = newImage("images/index_------over-39.gif");
		index_______down040 = newImage("images/index_------down-40.gif");
		preloadFlag = true;
	}
}

// -->
</script>
</head>
<body bgcolor="#4F5563">



<div align="center">
	<table border="0" width="780" id="table1" background="images/bg.gif" height="100%" cellspacing="0" cellpadding="0">
		<!-- MSTableType="nolayout" -->
		<tr>
			<td>
		
		
		
		
		
		<table id="Table_01" width="780" height="476" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="9">
			<img src="images/index_01.gif" width="780" height="15" alt=""></td>
	</tr>
	<tr>
		<td colspan="9">
			<img src="images/index_02.gif" width="780" height="14" alt=""></td>
	</tr>
	<tr>
		<td colspan="9">
			<img src="images/index_03.gif" width="780" height="14" alt=""></td>
	</tr>
	<tr>
		<td colspan="9">
			<img src="images/index_04.gif" width="780" height="20" alt=""></td>
	</tr>
	<tr>
		<td colspan="9">
			<img src="images/index_05.gif" width="780" height="20" alt=""></td>
	</tr>
	<tr>
		<td colspan="9">
			<img src="images/index_06.gif" width="780" height="21" alt=""></td>
	</tr>
	<tr>
		<td colspan="9">
			<img src="images/index_07.gif" width="780" height="24" alt=""></td>
	</tr>
	<tr>
		<td colspan="9">
			<img src="images/index_08.gif" width="780" height="19" alt=""></td>
	</tr>
	<tr>
		<td colspan="9">
			<img src="images/index_09.gif" width="780" height="16" alt=""></td>
	</tr>
	<tr>
		<td colspan="9">
			<img src="images/index_10.gif" width="780" height="19" alt=""></td>
	</tr>
	<tr>
		<td colspan="9">
			<img src="images/index_11.gif" width="780" height="27" alt=""></td>
	</tr>
	<tr>
		<td colspan="9">
			<img src="images/index_12.gif" width="780" height="15" alt=""></td>
	</tr>
	<tr>
		<td colspan="9">
			<img src="images/index_13.gif" width="780" height="20" alt=""></td>
	</tr>
	<tr>
		<td colspan="9">
			<img src="images/index_14.gif" width="780" height="27" alt=""></td>
	</tr>
	<tr>
		<td colspan="9">
			<img src="images/index_15.gif" width="780" height="22" alt=""></td>
	</tr>
	<tr>
		<td colspan="9">
			<img src="images/index_16.gif" width="780" height="22" alt=""></td>
	</tr>
	<tr>
		<td colspan="9">
			<img src="images/index_17.gif" width="780" height="20" alt=""></td>
	</tr>
	<tr>
		<td colspan="9">
			<img src="images/index_18.gif" width="780" height="19" alt=""></td>
	</tr>
	<tr>
		<td colspan="9">
			<img src="images/index_19.gif" width="780" height="25" alt=""></td>
	</tr>
	<tr>
		<td colspan="9">
			<img src="images/index_20.gif" width="780" height="21" alt=""></td>
	</tr>
	<tr>
		<td colspan="9">
			<img src="images/index_21.gif" width="780" height="16" alt=""></td>
	</tr>
	<tr>
		<td colspan="9">
			<img src="images/index_22.gif" width="780" height="14" alt=""></td>
	</tr>
	<tr>
		<td colspan="9">
			<img src="images/index_23.gif" width="780" height="7" alt=""></td>
	</tr>
	<tr>
		<td rowspan="2">
			<img src="images/index_24.gif" width="235" height="19" alt=""></td>
		<td rowspan="2">
			<a href="#"
				onmouseover="changeImages('index________', 'images/index_--------over.gif'); return true;"
				onmouseout="changeImages('index________', 'images/index_-------.gif'); return true;"
				onmousedown="changeImages('index________', 'images/index_--------down.gif'); return true;"
				onmouseup="changeImages('index________', 'images/index_--------over.gif'); return true;">
				<img name="index________" src="images/index_-------.gif" width="47" height="19" border="0" alt=""></a></td>
		<td colspan="3">
			<img src="images/index_26.gif" width="129" height="1" alt=""></td>
		<td rowspan="2">
			<a href="#"
				onmouseover="changeImages('index______', 'images/index_------over.gif'); return true;"
				onmouseout="changeImages('index______', 'images/index_-----.gif'); return true;"
				onmousedown="changeImages('index______', 'images/index_------down.gif'); return true;"
				onmouseup="changeImages('index______', 'images/index_------over.gif'); return true;">
				<img name="index______" src="images/index_-----.gif" width="27" height="19" border="0" alt=""></a></td>
		<td rowspan="2">
			<img src="images/index_28.gif" width="41" height="19" alt=""></td>
		<td rowspan="2">
			<a href="#"
				onmouseover="changeImages('index__________', 'images/index_----------over.gif'); return true;"
				onmouseout="changeImages('index__________', 'images/index_---------.gif'); return true;"
				onmousedown="changeImages('index__________', 'images/index_----------down.gif'); return true;"
				onmouseup="changeImages('index__________', 'images/index_----------over.gif'); return true;">
				<img name="index__________" src="images/index_---------.gif" width="56" height="19" border="0" alt=""></a></td>
		<td rowspan="2">
			<img src="images/index_30.gif" width="245" height="19" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/index_31.gif" width="42" height="18" alt=""></td>
		<td>
			<a href="#"
				onmouseover="changeImages('index______038', 'images/index_------over-39.gif'); return true;"
				onmouseout="changeImages('index______038', 'images/index_------38.gif'); return true;"
				onmousedown="changeImages('index______038', 'images/index_------down-40.gif'); return true;"
				onmouseup="changeImages('index______038', 'images/index_------over-39.gif'); return true;">
				<img name="index______038" src="images/index_------38.gif" width="36" height="18" border="0" alt=""></a></td>
		<td>
			<img src="images/index_33.gif" width="51" height="18" alt=""></td>
	</tr>
	<tr>
		<td colspan="9">
			<img src="images/index_34.gif" width="780" height="20" alt=""></td>
	</tr>
</table>

		
		
		
		
		
		
		
		
		
		
		
		
		
		</td>
	</tr>
	<tr>
		<td colspan="9">
			<img src="images/index_34.gif" width="780" height="20" alt=""></td>
	</tr>
</table>
			
			</td>
		</tr>
		<tr>
			<td> <p> </p>
			<p> </td>
		</tr>
	</table>
</div>

</body>

</html>
 
H

hadimokhtari

New Member
ايميج ردي 7

محمد اقا سلام, من هادي هستم واز لندن به گروه شما جمع شدم,. من فارسي سخت تايپ كردم. من ايميج ردي 7 دارم ولي اين دكمه هايي كه گفتي وب كانتنت و نداره. سيو كردن هم چطوري سيو ميكني. من كار نكرده دكمه هاي كه درست كردم. ميشه كمكم كني مچكرم
 
205

205

Member
hadimokhtari گفت:
محمد اقا سلام, من هادي هستم واز لندن به گروه شما جمع شدم,. من فارسي سخت تايپ كردم. من ايميج ردي 7 دارم ولي اين دكمه هايي كه گفتي وب كانتنت و نداره. سيو كردن هم چطوري سيو ميكني. من كار نكرده دكمه هاي كه درست كردم. ميشه كمكم كني مچكرم
کلیک کنید تا باز شود...


سلام

به جمع مجید آنلاینی ها خوش اومدی.
فکر کنم محمد نیست.

مشکاتو واضح تر بگو ما کمکت می کنیم.

خواستی پیغام خصوصی برایم بذلر و مشکلت را دقیق بگو . حتمن کمکت می کنم :cool: :lol:


فعلا
 
۩

۩mohammad۩

Member
دوستان من متاسفم به خاطر اين غيبتم. دوستان اگه مشكلاتشون رو دقيق تر بگن حتما كمكشون مي كنم.


*محمد آزاده
 
وضعیت
موضوع بسته شده است.

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

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

بالا