Random Image Rotation

[bluestrobe]

I have about 10 banner images I want to use in some type of rotation on my web page. They are all JPG. They can rotate in a random or listed/ordered way. I want them to change with each page load if possible. My web page is HTML/CSS at the moment but willing to try other routes that are simple enough for me (basic HTML/CSS). Thanks!

 

[techfuzz]

You could easily accomplish this with some Javascript I think. I don't have any examples readily available, but I'm positive you could Google and probably find 100 different examples immediately.

techfuzz

 

[QED]

yep, javascript is easist if you don't have a server-side language to code in.

Name your images "img1.jpg", "img2.jpg", etc.

Where you want you image to go in the HTML, put this javascript there:

<script language="Javascript">
document.write("<img src='img" + Math.floor(Math.random * 6 + 1) + ".jpg'>")
</script>


Of course, replace 6 with the actual number of images you have...

 

[techfuzz]

Originally posted by: QED
yep, javascript is easist if you don't have a server-side language to code in.

Name your images "img1.jpg", "img2.jpg", etc.

Where you want you image to go in the HTML, put this javascript there:

<script language="Javascript">
document.write("<img src='img" + Math.floor(Math.random * 6 + 1) + ".jpg'>")
</script>


Of course, replace 6 with the actual number of images you have...

Like QED said, if you have a server-side language to code in, you could write some code that not only rotated your images but also counted the number of images in a "/img_rotation" directory without having to update your code every time you wanted to add/remove an image from the rotation. I wrote some ASP.NET code for a business site that does this. I think it was only about 8 lines of code.

techfuzz

 

[bluestrobe]

I don't have or know how to code SSL. I'll try the javascript route for now. My only issue is the java script looks to pull them out of the same directory the page sits on. Where do I change the image directory to "/images" or "/banners"? Thanks all!

 

[QED]

Try this if your images are in the "/banners" directory:

<script language="Javascript">
document.write("<img src='/banners/img" + Math.floor(Math.random * 6 + 1) + ".jpg'>")
</script>

 

[bluestrobe]

Thanks again, I'll give it a whirl later when I get time.