Displaying random images in .htm files

Myspace Codes - Free Advertising - Free Myspace Layouts - Buy Anything On eBay - Car Loan

View Full Version : Displaying random images in .htm files

Lever

Mar 17th 2005, 4:43 pm

OK, so I'm designing a site for someone... there's an image to be placed in the same position, with same dimensions on each page... only I was thinking it could be randomly swapped for another image from a set, every time the page is refreshed/ displayed.

Anyone know a "clean" and easy way to do this? I seem to remember seeing this being done in JavaScript many years ago but I've not needed to do this until now. Most pages are .htm with a couple of .asp pages, so the method would need to be suitable for both instances.

Any help/ pointers greatly appreciated :)

J.D.

Mar 17th 2005, 5:18 pm

If you are using MySQL and you just need random images, run the following query:

select col1, col2 from table1 order by rand() desc limit 5;

This statement will select you 5 random images. This approach will work nicely with small tables. If you have thousands of records, it's better to use different SQL (this one will do a full table scan).

J.D.

Lever

Mar 17th 2005, 5:32 pm

Thanks J.D. :) I don't know if MySQL is running on this particular server and my dev/db knowledge is fairly (aka very) limited, so that may be a little tricky for me to work out/ understand for now. That would only work if the pages were changed to ASP extensions though, is that right?

Corey Bryant

Mar 17th 2005, 5:33 pm

If you want to use ASP, check out Random Image Sample (http://www.asp101.com/samples/random_image.asp) and for JavaScript: Random Image (http://javascript.internet.com/miscellaneous/random-image.html). Of course ASP would be better since it is server side

J.D.

Mar 17th 2005, 5:39 pm

You need some server-side script for this. It can be VBS or JS. If you have only few images, you can rotate them using an in-memory array. So, for ASP (in JS) it would look like this:

<%@ language="JScript">

<script runat="server">
var images = new Array(0);
images.push("image-1-url");
images.push("image-2-url");
images.push("image-3-url");

var index = Math.floor(Math.random()*images.length);
</script>

...

<img src="<%= images[index] %>">

J.D.

J.D.

Mar 17th 2005, 5:41 pm

You can also do this client side, although in this case you would need some backup plan in case if JS is disabled. Here's an example:

<html>
<head>
<script type="text/javascript">
var images = new Array(0);
images.push("image-1-url");
images.push("image-2-url");
images.push("image-3-url");

var index = Math.floor(Math.random()*images.length);
</script>
</head>

<body onload="document.getElementById('img1').src = images[index]">
<img id="img1" src="no-js-image-url">
</body>
</html>

Lever

Mar 17th 2005, 5:56 pm

Thanks Corey :) A plan is hatching... if the pages are .asp with no asp in them (for now), the javascript could suffice for the meantime and the ASP can be experimented with and dropped in after the weekend... Cheers dude

J.D. - Wow, thanks again :) I'll have a look at both those methods and see which one is suitable... that version of keeping a default img file for non JS looks very handy...

Preference is for non-JS, as there's always the possibility of it being switched off, but it may suit the purpose until the asp can be understood, digested and implemented. Thanks guys, really appreciated - I'll let ya know which one works best in the end :D

Corey Bryant

Mar 17th 2005, 6:00 pm

Glad I could help. Just to let you know, I usually use method 3 on the ASP code site. It is a bit more server intensive, but if you do not know the names of these images - it is a great piece of code. I just have my clients dump their images into one folder & leave it as is

J.D.

Mar 17th 2005, 6:05 pm

If you decide to go with ASP (I would definitely use server-side script for this if I had a choice) and want all images from a certain folder, look up something called FileSystemObject. Using this object you can enumerate all files in a folder and populate the image array dynamically, not knowing actual file names beforehand.

J.D.

Lever

Mar 17th 2005, 6:25 pm

Corey, J.D., J.D., Corey, thanks guys, I really, really appreciate your help and wisdom :cool:

Been a long day so gotta put the knowledge down for the evening and go check the state of the back o' my eyelids... adios :)

Cartman

Mar 18th 2005, 8:24 am

I did it with PHP.. Very slick script that does everything for me, you may want to check it out:

http://www.sitepoint.com/forums/showpost.php?p=1731976&postcount=3

I like PHP.. :)