JavaScript Programming
JavaScript > Code Examples
2-Way Background Images Slides
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
2-Way Background Images Slides
<HEAD>
<title>Happy Codings :-) JavaScript Code Examples</title>
<SCRIPT LANGUAGE="JavaScript">
// set the following variables
// Set speed (milliseconds)
var speed = 1000
// Specify the image files
var Pic = new Array() // don't touch this
// to add more images, just continue
// the pattern, adding to the array below
Pic[0] = '1.gif'
Pic[1] = '2.gif'
Pic[2] = '3.gif'
Pic[3] = '4.gif'
// do not edit anything below this line
var t
var j = 0
var p = Pic.length
var preLoad = new Array()
for (i = 0; i < p; i++){
preLoad[i] = new Image()
preLoad[i].src = Pic[i]
}
function runBGSlideShow(){
if (document.body){
document.body.background = Pic[j];
j = j + 1
if (j > (p-1)) j=0
t = setTimeout('runBGSlideShow()', speed)
}
}
// End -->
</script>
</HEAD>
<body onload="runBGSlideShow()">
Method One - Positionable Images
----------
Put the following style sheet in the <head> of
your page. Normally it will go *before* the script above.
<style>
body{
background-repeat: no-repeat;
background-position: 200 100;
}
</style>
Set the position x y in pixels in the background-position
element to position the images in the page. Do not use
commas between the values!
Method Two - Full Page-Space Background
----------
Easy - just omit the style script above from the page.
The background images will then repeat across the page, as
usual.
<p><center>
<font face="arial, helvetica" size"8">Happy Codings :-) JavaScript Code Examples<br>
by <a href="http://javascript.happycodings.com/">JavaScript Code Examples</a></font>
</center><p>
