1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Displaying random images in .htm files

Discussion in 'HTML & Website Design' started by Lever, Mar 17, 2005.

0
  1. #1
    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 :)
     
    Lever, Mar 17, 2005 IP
  2. J.D.

    J.D. Peon

    Messages:
    1,198
    Likes Received:
    65
    Best Answers:
    0
    Trophy Points:
    0
    #2
    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.
     
    J.D., Mar 17, 2005 IP
  3. Lever

    Lever Deep Thought

    Messages:
    1,823
    Likes Received:
    94
    Best Answers:
    0
    Trophy Points:
    145
    #3
    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?
     
    Lever, Mar 17, 2005 IP
  4. Corey Bryant

    Corey Bryant Texan at Heart

    Messages:
    1,126
    Likes Received:
    51
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Corey Bryant, Mar 17, 2005 IP
    Lever likes this.
  5. J.D.

    J.D. Peon

    Messages:
    1,198
    Likes Received:
    65
    Best Answers:
    0
    Trophy Points:
    0
    #5
    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 17, 2005 IP
  6. J.D.

    J.D. Peon

    Messages:
    1,198
    Likes Received:
    65
    Best Answers:
    0
    Trophy Points:
    0
    #6
    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>
     
    J.D., Mar 17, 2005 IP
  7. Lever

    Lever Deep Thought

    Messages:
    1,823
    Likes Received:
    94
    Best Answers:
    0
    Trophy Points:
    145
    #7
    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
     
    Lever, Mar 17, 2005 IP
  8. Corey Bryant

    Corey Bryant Texan at Heart

    Messages:
    1,126
    Likes Received:
    51
    Best Answers:
    0
    Trophy Points:
    0
    #8
    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
     
    Corey Bryant, Mar 17, 2005 IP
  9. J.D.

    J.D. Peon

    Messages:
    1,198
    Likes Received:
    65
    Best Answers:
    0
    Trophy Points:
    0
    #9
    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.
     
    J.D., Mar 17, 2005 IP
  10. Lever

    Lever Deep Thought

    Messages:
    1,823
    Likes Received:
    94
    Best Answers:
    0
    Trophy Points:
    145
    #10
    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 :)
     
    Lever, Mar 17, 2005 IP
  11. Cartman

    Cartman Active Member

    Messages:
    354
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    88
    #11
    Cartman, Mar 18, 2005 IP