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
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.
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?
If you want to use ASP, check out Random Image Sample and for JavaScript: Random Image. Of course ASP would be better since it is server side
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.
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>
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
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
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.
Corey, J.D., J.D., Corey, thanks guys, I really, really appreciate your help and wisdom 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
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..