Welcome to WebmasterWorld Guest from

Forum Moderators: incrediBILL

Message Too Old, No Replies

How to change an image and text every time the page is refreshed



12:42 am on Nov 5, 2003 (gmt 0)

10+ Year Member

I assume that this is going to involve using a database, which I will need to school myself on as well (so please point me in the right direction for that as well), but I would like to set up a page that would change an image and text every time the page is refreshed. And I would like to have the ability to have it access a database with up to 1000 different images and text.

What would be the HTML coding that I would use?

Is there a certain type of database that I should use?

Also, would the text have to be a gif/jpeg file vs. plain HTML text?

And would the files be shown in a random order, or would they be shown sequentially?

If they would be shown randomly, would the page still not repeat an image until after it has shown all of the images in the database?


1:50 am on Nov 5, 2003 (gmt 0)

10+ Year Member

this can be done any (many) number of ways.. js, perl, php, flatfile, mysql, etc etc. search 'cgi resource index' and 'php resource index' for the category 'random'. items can be displayed randomly or sequentially without repeats as specified by each script.

Shannon Moore

2:12 am on Nov 5, 2003 (gmt 0)

10+ Year Member

There was an article last week or so on A List Apart (web design & usability reference) called "Random Image Rotation". It offers up a slick way to do this with a simple PHP script and a directory that contains all files you want rotated.

Some limitations of the script as posted were lack of support for ALT and TITLE tag attributes among other things, so surf around the web for alternatives. There are lots out there in every programming language available.


2:14 am on Nov 5, 2003 (gmt 0)

10+ Year Member

OK. Thanks. I'll check them both out.


5:52 am on Nov 5, 2003 (gmt 0)

WebmasterWorld Senior Member jomaxx is a WebmasterWorld Top Contributor of All Time 10+ Year Member

If you do it in Javascript, then in my experience the content will be randomized every time you display the page, even via the BACK arrow.

With server-side solutions, I would think that the page would frequently remain cached. In that case either the browser would not query the server at all, or the server would return a 304 code. You'd have to test it out to see exactly how the script behaves. Anyway you could override the cacheing by using a meta tag to expire the page.


11:07 pm on Nov 5, 2003 (gmt 0)

10+ Year Member

I have 2 points.

There really are a lot of ways to go about that, but before jumping into research mode on a particular one, I would take a look at what your hosting provider has loaded on the server. Perl, PHP, or what?

Secondly, on the question of the image, a random image can be loaded with the following bit of JavaScript:

<script language='JavaScript'>
document.write("<img src='graphics/" + Math.floor(Math.random() * 4) + ".jpg'>");

I have 4 images named 0.jpg, 1.jpg, 2.jpg and 3.jpg all in a directory called graphics/. Need a 1000 images instead of 4? Just change the 4 to 1000 and name your images 0.jpg - 999.jpg.


12:46 am on Nov 6, 2003 (gmt 0)

10+ Year Member

Cool. Thanks for the tips.

A poster hooked me up with a free program called HTML Rotate. It works great. You can "rotate" both text and/or HTML. Only thing is, you can't rotate them randomly. At least not that I saw.

NOTE: My server has both PHP and Perl.


Featured Threads

Hot Threads This Week

Hot Threads This Month