ถ้ามี header.php สำหรับ include ก็นำโค้ด TB1 ไปวางในส่วนหัว
ส่วนการแสดงผล ให้นำโค้ดจาก TB2 ไปลองรันดู
หรือจะเอา script ในส่วน TB3 ไปลองรันดูก็ได้
TB1=header.php
<SCRIPT LANGUAGE="JavaScript">
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Begin
// Set up the image files to be used.
var theImages = new Array() // do not change this
// To add more image files, continue with the
// pattern below, adding to the array.
theImages[0] = 'image1.jpg'
theImages[1] = 'image2.jpg'
theImages[2] = 'image3.jpg'
theImages[3] = 'image4.jpg'
// do not edit anything below this line
var j = 0
var p = theImages.length;
var preBuffer = new Array()
for (i = 0; i < p; i ){
preBuffer[i] = new Image()
preBuffer[i].src = theImages[i]
}
var whichImage = Math.round(Math.random()*(p-1));
function showImage(){
document.write('<img src="' theImages[whichImage] '">');
}
// End -->
</script>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
showImage();
// End -->
</script>
TB2=sample.html,sample.php
<html>
<head>
<title>Flip Table BG</title>
<script>
var images = new Array();
images.push("http://www.digital-photography-school.com/blog/wp-content/background-blur-1.jpg");
images.push("http://download.qj.net/uploads/files_module/screenshots/253_PSP-background-thor64.jpg");
images.push("http://www.processandfaith.org/images/background-ocean.jpg");
images.push("http://www.iburst.co.za/downloads/background/iBurst_background_orange.jpg");
images.push("http://3danimation.e-spaces.com/backgrounds/hd_background_american_flag.jpg");
images.push("http://www.troutnut.com/im_header/header_38.jpg");
function randomTableBG()
{
var mainTable = document.getElementById("mainTable");
var imagePos = Math.round(Math.random()*(images.length-1));
mainTable.style.backgroundImage = "url(" images[imagePos] ")";
}
</script>
</head>
<body onload="randomTableBG()">
<table id="mainTable" width="578" height="351" border="1">
<tr>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
</tr>
<tr>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
</tr>
<tr>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
</tr>
</table>
</body>
</html>
TB3=สร้างไฟล์ test.html
เอาโค้ดด้านล่างไปวาง
เวลารันเพื่อเช็ค ให้กด f5 สังเกตการเปลี่ยนแปลง
<html><head>
<title>Flip Table BG</title>
<script>
<!-- Begin
// Set up the image files to be used.
var theImages = new Array() // do not change this
// To add more image files, continue with the
// pattern below, adding to the array.
theImages[0] = 'image1.jpg'
theImages[1] = 'image2.jpg'
theImages[2] = 'image3.jpg'
theImages[3] = 'image4.jpg'
// do not edit anything below this line
// End -->
var images = new Array();
images.push("http://www.digital-photography-school.com/blog/wp-content/background-blur-1.jpg");
images.push("http://download.qj.net/uploads/files_module/screenshots/253_PSP-background-thor64.jpg");
images.push("http://www.processandfaith.org/images/background-ocean.jpg");
images.push("http://www.iburst.co.za/downloads/background/iBurst_background_orange.jpg");
images.push("http://3danimation.e-spaces.com/backgrounds/hd_background_american_flag.jpg");
images.push("http://www.troutnut.com/im_header/header_38.jpg");
function randomTableBG()
{
var mainTable = document.getElementById("mainTable");
var imagePos = Math.round(Math.random()*(images.length-1));
mainTable.style.backgroundImage = "url(" images[imagePos] ")";
}
</script>
</head>
<body onload="randomTableBG()">
<table id="mainTable" width="578" height="351" border="1">
<tr>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
</tr>
<tr>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
</tr>
<tr>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
</tr>
</table>
</body>
</html>
< กดยุบ (ห้องยกเลิกการใช้งาน)
