CSS Background Image using a variable

**Brianro3** · 07-08-2010 05:57 PM

Hi All,

I am attempting to put a simple slideshow of pictures on our company's website as the background of a div. The code I have works fine for a single picture:

obj.style.backgroundImage = 'url("photo.jpg")';

but does not work when I try to use a variable for the file name instead of the file name itself, ie:

obj.style.backgroundImage = 'url("processed[i].src")';

Is there anyway to set the background image using variable names? I really don't want to have to use a switch statement with each case being a different picture. Any ideas?

Thanks!

Brian Rost

**tirna** · 07-08-2010 06:27 PM

In its simplest form maybe do the following:

1) preload the slideshow images using javascript in the <head>

2) create a window.onload function that uses setInterval() to then cycle through the images at whatever time period you want.

Back 3-4 months ago I posted some example code in reply to a similar query.

**Brianro3** · 07-08-2010 06:31 PM

I have this code, and am just wondering about that one line that doesn't work the way I want it to. I'm not exactly sure what you're suggesting, could you elaborate? My javascript knowledge is limited, thanks

<script language="JavaScript1.2">
var HomeSlideArray=new Array()
HomeSlideArray[0]="Images/photo1.jpg"
HomeSlideArray[1]="Images/photo2.jpg"
HomeSlideArray[2]="Images/photo3.jpg"
HomeSlideArray[3]="Images/photo4.jpg"
HomeSlideArray[4]="Images/photo5.jpg"
HomeSlideArray[5]="Images/photo6.jpg"
HomeSlideArray[6]="Images/photo7.jpg"
HomeSlideArray[7]="Images/photo8.jpg"
var speed=1
var processed=new Array()
for (i=0;i<HomeSlideArray.length;i++){
processed[i]=new Image()
processed[i].src=HomeSlideArray[i]
}
var inc=-1
function slideback(){
if (inc<HomeSlideArray.length-1)
inc++
else
inc=0
var obj = document.getElementById('main_image');
obj.style.backgroundImage = 'url("processed[inc].src")';
}
if (document.all||document.getElementById)
window.onload=new Function('setInterval("slideback()",speed)')
</script>

**tirna** · 07-08-2010 07:17 PM

try

Code:

 
obj.style.backgroundImage = 'url("'+processed[inc].src+'")';

so that processed[inc].src is actually evaluated and not taken as part of the string.

**Declan1991** · 07-08-2010 07:23 PM

Code:

'url("'+processed[inc].src+'")'

Some general suggestions.

Code:

<script type="text/javscript">
var HomeSlideArray=["photo1.jpg","photo2.jpg","photo3.jpg","photo4.jpg","photo5.jpg","photo6.jpg","photo7.jpg","photo8.jpg"];
var speed=1; // Every millisecond? Sure you don't mean 1000?
var processed=[];
for (i=0;i<HomeSlideArray.length;i++){
processed[i]=new Image();
processed[i].src="Images/"+HomeSlideArray[i];
}
var inc=-1
function slideback(){
if (inc<HomeSlideArray.length-1) {
    inc++;
}
else {
inc=0;
}
document.getElementById('main_image').style.backgroundImage = 'url("'+processed[inc].src+'")';
}
window.onload=function() {setInterval(slideback,speed);};
</script>

If the picture names are that regular, it's even easier.

Code:

<script type="text/javscript">
var no = 8
var speed=1; // Every millisecond? Sure you don't mean 1000?
var processed=[];
for (i=0;i<no;i++){
processed[i]=new Image();
processed[i].src="Images/photo"+i+".jpg";
}
var inc=-1
function slideback(){
if (inc<no-1) {
    inc++;
}
else {
inc=0;
}
document.getElementById('main_image').style.backgroundImage = 'url("'+processed[inc].src+'")';
}
window.onload=function() {setInterval(slideback,speed);};
</script>

**Brianro3** · 07-08-2010 08:46 PM

Thanks! That worked perfectly. Thanks for the general code suggestions too, as I said my javascript knowledge isn't the best so the help is much appreciated

Thread: CSS Background Image using a variable

Thread Tools

Display

CSS Background Image using a variable

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions