Happy Codings - Programming Code Examples
Html Css Web Design Sample Codes CPlusPlus Programming Sample Codes JavaScript Programming Sample Codes C Programming Sample Codes CSharp Programming Sample Codes Java Programming Sample Codes Php Programming Sample Codes Visual Basic Programming Sample Codes


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>