[css] random image in a container?

snow patrol

snow patrol

snow patrol

Soldato
Joined
20 Oct 2002
Posts
3,923
Location
London
Hi all, i am making a website for someone. Just a small site with about 5 pages. I've done the css style sheet, into which i have the following:

#containerleft
{
float: left;
width: 350px;
height: 350px;
background-image:url('pic1.jpg');
border-right: 20px solid #FFF;
padding: 10px;
}

the 'pic1.jpg' is the picture that is inside the left hand column of the page (it's a small picture/page). However, i'd actually like to rotate, randomly if possible, between several pictures.

Can i do it?

Thanks!
 
Use JavaScript code to rotate the images, don't worry about the background-image bit. In the HTML add the JavaScript in the div layer containerleft.
 
why do they call it image rotate when its random images without any set sequence....anyway not important :P

If you need a set sequence or you cannot use php, for whatever reason then this should work instead;

put this in the <head>

Code: 
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin 
var theImages = new Array() 
theImages[0] = ''
theImages[1] = ''
theImages[3] = ''
theImages[4] = ''
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>

add more of 'the images' and dont forget to add the path to the image.

and
Code: 
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
showImage();
//  End -->
</script>
goes where ever you want the images displayed
 
You must log in or register to reply here.
Back
Top Bottom