PDA

View Full Version : GetelementbyID help



iammow
03-17-2011, 10:36 AM
Hi there, I am currently working with a javascript background script that changes the background on a timer and and in reference to day and night this works great but I'm trying to make the background stretch to 100% of the browser width, I've done this through CSS. It works in safari and chrome but not firefox (maybe IE too) instead it see's the 100% as showing the image at 100% of it's size....

the basic javascript is this:

<script language="JavaScript1.2">

//Specify background images to slide
var bgslides=new Array()

var currentTime = new Date().getHours();
if (9 <= currentTime && currentTime < 18) {
bgslides[0]="images/webcam1.jpg"
bgslides[1]="images/webcam2.jpg"
bgslides[2]="images/webcam3.jpg"
}
else
{
bgslides[0]="images/webcamnight.jpg"
bgslides[1]="images/webcamnight.jpg"
bgslides[2]="images/webcamnight.jpg"
}

//Specify interval between slide (in miliseconds)
var speed=5000

//preload images
var processed=new Array()
for (i=0;i<bgslides.length;i++){
processed[i]=new Image()
processed[i].src=bgslides[i]
}

var inc=-1

function slideback(){
if (inc<bgslides.length-1)
inc++
else
inc=0
document.body.background=processed[inc].src
}

if (document.all||document.getElementById)
window.onload=new Function('setInterval("slideback()",speed)')
window.onload=new Function('setInterval("slideback()",speed)')

</script>


but then I decided it might be easier to write to a div to control the background so like this:


<style type="text/css">
body, html { margin: 0; padding: 0 }
#bgimg { position:absolute; z-index:-1; width:100%; height:100% }
</style>

and


<img id="bgimg" src="startingimage.gif" />


but I now need to write in the javascript so that it sends to the bgimg appose to the background, I've had a go but can't get it to work can anybody help?

Here's what I've tried but I think I'm doing somthing wrong..


function slideback(){
if (inc<bgslides.length-1)
inc++
else
inc=0
document.getElementById('bgimg')=processed[inc].src