نمایش اتفاقی بکگراند

Jim Jim · May 15, 2008

maintable برای کد دوم
myTableId برای کد اول هست، که نشد
فقط یه جدول رو میشناسه

peyman1987 · May 15, 2008

id بايد توي صفحه انحصاري باشه يعني از يه id دو تا نميشه تعريف کرد.

shnoit · May 15, 2008

خوب میتونی از کد جاوا یه کپی بگیری بعدش کلیه myTableId رو به یه اسم دیگه تغیر بده و در تیبل دومی ای دی رو با اون بزار.
یعنی برای هر تیبل یه کد جاوا میزاری با یه ای دی مشخص.

peyman1987 · May 16, 2008

اينجوري ميتونين به چند تا جدول بکگراند بدين.
فقط با اجازه محسن جان کدش رو يه مقدار تغيير دادم.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 5</title>
<script language="JavaScript" type="text/JavaScript">

var backgroundImages=new Array(5);

backgroundImages[0]="background1.gif";
backgroundImages[1]="background2.gif";
backgroundImages[2]="background3.gif";
backgroundImages[3]="background4.gif";
backgroundImages[4]="background5.gif";

onload=function()
{

var intCounter;
var e;

for(intCounter=1;intCounter<=3;intCounter++)
{
	e = document.getElementById('myTableId'+intCounter);
	e.style.backgroundImage="url("+backgroundImages[Math.floor(Math.random()*backgroundImages.length)]+")";
}

}
</script>
</head>

<body>

<table id="myTableId1" width="700" height="400" border="0" cellpadding="0" cellspacing="0">&nbsp;
</table>

<table id="myTableId2" width="700" height="400" border="0" cellpadding="0" cellspacing="0">&nbsp;
</table>

<table id="myTableId3" width="700" height="400" border="0" cellpadding="0" cellspacing="0">&nbsp;
</table>
</body>

</html>

peyman1987 · May 16, 2008

shnoit گفت:
خوب میتونی از کد جاوا یه کپی بگیری بعدش کلیه myTableId رو به یه اسم دیگه تغیر بده و در تیبل دومی ای دی رو با اون بزار.
یعنی برای هر تیبل یه کد جاوا میزاری با یه ای دی مشخص.

اينجوري اگه بخواد به صد تا جدول بکگراند بده بايد يه کد يه مگي جاوااسکريپت رو لود کنه.

در ضمن اگه خواست يه تغيير کوچيک بده بايد صد تا کد رو ويرايش کنه.

Jim Jim · May 16, 2008

shnoit گفت:
خوب میتونی از کد جاوا یه کپی بگیری بعدش کلیه myTableId رو به یه اسم دیگه تغیر بده و در تیبل دومی ای دی رو با اون بزار.
یعنی برای هر تیبل یه کد جاوا میزاری با یه ای دی مشخص.

نه با این روش عمل نمی کنه
تو این کد، میشه لینک عکسها رو تو css style بزاریم بعد بجای لینکها، از class استفاده کنیم؟

Jim Jim · May 16, 2008

اگه مثلا سه تا جدول داشته باشیم
ممکنه دوتاشون یه تصویر رو نشون بدن
چکار میشه کرد؟

shnoit · May 16, 2008

آقا پیمان حرفتون کاملا" متینه!
ولی قرار نیست که برای هر 10-20 تا جدول اینارو کرد.
اینکار فوقش برای 2-3 تا جدوله.

peyman1987 · May 16, 2008

Jim Jim گفت:
اگه مثلا سه تا جدول داشته باشیم
ممکنه دوتاشون یه تصویر رو نشون بدن
چکار میشه کرد؟

اينکار رو با زبانهاي سرورسايد مثل PHP خيلي راحت ميشه انجام داد ولي با جاوااسکريپت يه مقدار سخته.
شما بايد هر کدوم از عکسها رو که نشون داديناز داخل آرايه عکسها حذف کنين. اينجوري اين کد ديگه جواب نميده چون انديسهاي آرايه از 0 شروع شده و به ترتيب بالا رفته و اگه شما عکس انديس 3 رو حذف کنين و عدد رندوم بعدي 3 باشه ديگه عکسي توي بکگراند شما ديده نميشه. بايد علاوه بر پاک کردن يه انديس از آرايه عکسها بقيه انديسها رو يکي به عقب شيفت بدين. يه همچين چيزي:

HTML:

<html>
	<head>
		<title>Random Backgrounds</title>
		<script>
			var backgroundImages = new Array();
			var tableIDs = new Array();
			
			tableIDs[0] = "Table1";
			tableIDs[1] = "Table2";
			tableIDs[2] = "Table3";
			
			backgroundImages[0] = "1.jpg";
			backgroundImages[1] = "2.jpg";
			backgroundImages[2] = "3.jpg";
			
			onload = function()
			{
				var intCounter,intRandomNum,intTableNums,e;
				
				intTableNums = tableIDs.length;
				for(intCounter=0;intCounter<intTableNums;intCounter++)
				{
					e = document.getElementById(tableIDs[intCounter]);
					intRandomNum = Math.floor(Math.random()*backgroundImages.length);
					e.style.backgroundImage="url(" + backgroundImages[intRandomNum]+")";
					backgroundImages = DeleteIndex(backgroundImages,intRandomNum);
				}
			}
			
			function DeleteIndex(arrArray,intIndex)
			{
				var intLastElement = arrArray.length-1;
				var intCounter;
				
				for(intCounter=intIndex;intCounter<intLastElement;intCounter++)
					arrArray[intCounter] = arrArray[intCounter+1];
				
				arrArray.length--;
				return arrArray;
			}
		</script>
	</head>
	<body>
		
		<table id="Table1" width="700" height="400" border="0" cellpadding="0" cellspacing="0">
			<tr>
				<td>Table 1</td>
			</tr>
		</table>
		
		<table id="Table2" width="700" height="400" border="0" cellpadding="0" cellspacing="0">
			<tr>
				<td>Table 2</td>
			</tr>
		</table>

		<table id="Table3" width="700" height="400" border="0" cellpadding="0" cellspacing="0">
			<tr>
				<td>Table 3</td>
			</tr>
		</table>

	</body>
</html>

اين يه مقدار انعطاف پذير تر شد. شما فقط کافيه ID هاي جداولي که ميخواي بهشون بک گراند بدي رو داخل آرايه tableIDs اضافه ميکني ، آدرس عکسها رو هم داخل آرايه backgroundImages اضافه ميکني و خودش برات بدون تکرار و بصورت رندوم بک گراند ميده.

موفق باشين

peyman1987 · May 16, 2008

shnoit گفت:
آقا پیمان حرفتون کاملا" متینه!
ولی قرار نیست که برای هر 10-20 تا جدول اینارو کرد.
اینکار فوقش برای 2-3 تا جدوله.

درسته ولي خوب براي همون 2 تا جدول هم کپي کردن کد منطقي نيست. يعني تنها تفاوت اين دو تا کد توي يه خطشونه براي همين منطقي نيست که بخاطر يه خط کد دو تا کپي از کلش بگيريم.

shnoit · May 16, 2008

بله آقا پیمان، حرفهای شما کاملا" متینه.

mohsen_r · May 17, 2008

حرقتون رو قبوا ندارم ...

شما گفتید که این کدها فقط برای <Table> ها کار میده ....!
+++ :nokte:

+++
من که وبسایتم رو با کد <div> نوشتم باید کار کنم....؟

peyman1987 · May 23, 2008

mohsen_r گفت:
شما گفتید که این کدها فقط برای <Table> ها کار میده ....!
++++++
من که وبسایتم رو با کد <div> نوشتم باید کار کنم....؟

من متوجه نمیشم شما از چی ایراد گرفتی؟؟؟؟!!!!
ولی کد آخری که گذاشته شده رو میشه برای هر المنت html استفاده کرد. حتی میشه یه جدول و دو تا div و ... هم استفاده کرد. یعنی اصلا مهم نیست شما چه المنتی استفاده میکنی.