eg. http://www.paulsmith.co.uk
eg. http://roclanclothing.com/
thanksBackground image changing with time....
Adriano Martins
Registered User
55 posts
I was wondering if there is a script easy to use or a code to make me have different background images with time...or maybe a different imahe everytime i reload the site page:
eg. http://www.paulsmith.co.uk
eg. http://roclanclothing.com/
thanks
eg. http://www.paulsmith.co.uk
eg. http://roclanclothing.com/
thanks
Adriano Martins
Registered User
55 posts
I found the solution for my own problem and i want to share:
I didn't find any script to make the background change dynamically but i found one for the background to change every time we reload the page and i tested it myself and it works perfectly.
<!-- TWO STEPS TO INSTALL RANDOM IMAGE:
1. Copy the coding into the HEAD of your HTML document
2. Add the last code into the BODY of your HTML document -->
<!-- STEP ONE: Paste this code into the HEAD of your HTML document -->
<HEAD>
<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] = '1.gif'
theImages[1] = '2.gif'
theImages[2] = '3.gif'
theImages[3] = '4.gif'
// 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>
</HEAD>
<!-- STEP TWO: Copy this code into the BODY of your HTML document -->
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Begin
showImage();
</script>
<!-- Script Size: 1.49 KB -->
if you want to strech the background and have it 100% everytime on the page you can use this code:
Inside the <head></head>
Insite de <body></body>
I didn't find any script to make the background change dynamically but i found one for the background to change every time we reload the page and i tested it myself and it works perfectly.
<!-- TWO STEPS TO INSTALL RANDOM IMAGE:
1. Copy the coding into the HEAD of your HTML document
2. Add the last code into the BODY of your HTML document -->
<!-- STEP ONE: Paste this code into the HEAD of your HTML document -->
<HEAD>
<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] = '1.gif'
theImages[1] = '2.gif'
theImages[2] = '3.gif'
theImages[3] = '4.gif'
// 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>
</HEAD>
<!-- STEP TWO: Copy this code into the BODY of your HTML document -->
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Begin
showImage();
</script>
<!-- Script Size: 1.49 KB -->
if you want to strech the background and have it 100% everytime on the page you can use this code:
Inside the <head></head>
<style type="text/css">
body {
margin: 0px;
}
#bg {
position: fixed;
margin: 0px;
border: 0px;
padding: 0px;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 0;
}
#bg img {
width: 100%;
}
#body {
text-decoration:none;
text-transform:none;
position:absolute;
width: 100%;
height:100%;
left: 0%;
top: 0%;
padding: 0%;
z-index: 0;
}
li {
margin-bottom: 0%;
}
</style>
<!--[if IE]>
<style type="text/css">
body {
margin: 0px;
overflow: hidden;
}
#body {
padding: 1em;
width: 100%;
height:100%;
overflow: auto;
}
</style>
<![endif]-->
body {
margin: 0px;
}
#bg {
position: fixed;
margin: 0px;
border: 0px;
padding: 0px;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 0;
}
#bg img {
width: 100%;
}
#body {
text-decoration:none;
text-transform:none;
position:absolute;
width: 100%;
height:100%;
left: 0%;
top: 0%;
padding: 0%;
z-index: 0;
}
li {
margin-bottom: 0%;
}
</style>
<!--[if IE]>
<style type="text/css">
body {
margin: 0px;
overflow: hidden;
}
#body {
padding: 1em;
width: 100%;
height:100%;
overflow: auto;
}
</style>
<![endif]-->
Insite de <body></body>
<div id="bg"><SCRIPT LANGUAGE="JavaScript">
showImage();
</script> </div>
<div id="body">Your body content.</div>
showImage();
</script> </div>
<div id="body">Your body content.</div>
Jo Rice
Senior Advisor
10,951 posts
Hiya Adriano,
Nice, thanks for the share. I do know you can do it the way you are wanting with the dymanically changing backgrounds when using some of the themes in the Joomla CMS that have that built into it, but I'm going to guess it's a major lot of php coding which of course is why I didn't bother to answer before since I don't have php knowledge at all. It gives some thoughts to possibilities that I hadn't thought of though which is always a good thing hehe. When I used Joomla it was all done for me so I never had to think about that stuff lol, but I'm finding it a lot more fun and interesting to learn it for myself no matter how bad I fumble through it sometimes LOL
Nice, thanks for the share. I do know you can do it the way you are wanting with the dymanically changing backgrounds when using some of the themes in the Joomla CMS that have that built into it, but I'm going to guess it's a major lot of php coding which of course is why I didn't bother to answer before since I don't have php knowledge at all. It gives some thoughts to possibilities that I hadn't thought of though which is always a good thing hehe. When I used Joomla it was all done for me so I never had to think about that stuff lol, but I'm finding it a lot more fun and interesting to learn it for myself no matter how bad I fumble through it sometimes LOL
Adriano Martins
Registered User
55 posts
I agree, probably requires loads of flash and php knowledge to make such a thing, witch i don't have ...so i search to see how to do it...internet has answer for everything.
Jo Rice
Senior Advisor
10,951 posts
hehe ain't that the truth!
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.
