Image Change (rotate) on Refresh in Sequence Order

JavaScript
1

I want the images to change (rotate) in sequence when the page is refreshed not random like i have below. Can someone help me with this please? Also I also need text to change on refresh to because I am going to have a descritption of the image below. So the image and text sync up together when some refreshes the page or goes page to the home page. Thanks

I want the images to change like on this page Loading A Specific Image Sequence On Page Refresh Via JavaScript / DOM


<script type="text/javascript" language="JavaScript">

var imgs = new Array('<a href="VW_1.shtml"><img border=0 src="img/samples/VW/large_1.jpg" width=165 height=109" class="thumbnail_img">',
'<a href="fortshelby1.shtml"><img border=0 src="img/samples/Fort Shelby/image1-large.jpg" width=165 height=109 class="thumbnail_img">',
'<a href="jaguar1.shtml"><img border=0 src="img/samples/Jag_of_Novi/large_1.jpg" width=165 height=109 class="thumbnail_img">',
'<a href="harley1.shtml"><img border=0 src="img/samples/wolverine_harley/large_1.jpg" width=165 height=109 class="thumbnail_img">',
'<a href="bc1.shtml"><img border=0 src="img/samples/BC_Coney_Island/large_1.jpg" width=165 height=109 class="thumbnail_img">',
'<a href="mama1.shtml"><img border=0 src="img/samples/Pozios_Retail_Mama_Vickys_Coney_Island/large_1.jpg" width=165 height=109 class="thumbnail_img">',
'<a href="children1.shtml"><img border=0 src="img/samples/Detroit_Childrens_Museum/large_1.jpg" width=165 height=109 class="thumbnail_img">',
'<a href="harper1.shtml"><img border=0 src="img/samples/Harper_Woods_Library/large_1.jpg" width=165 height=109 class="thumbnail_img">',
'<a href="dps1.shtml"><img border=0 src="img/samples/DPS_Facilities_building/large_1.jpg" width=165 height=109 class="thumbnail_img">',
'<a href="lakeland1.shtml"><img border=0 src="img/samples/Lakeland_School_Huron_Valley/large_1.jpg" width=165 height=109 class="thumbnail_img">',
'<a href="auto1.shtml"><img border=0 src="img/samples/Manhattan_Auto_Group/large_1.jpg" width=165 height=109 class="thumbnail_img">',
'<a href="maxey1.shtml"><img border=0 src="img/samples/Maxey_Ford/large_1.jpg" width=165 height=109 class="thumbnail_img">',
'<a href="benz1.shtml"><img border=0 src="img/samples/Mercedes_Benz_of_St_Clair_Shores/large_1.jpg" width=165 height=109 class="thumbnail_img">',
'<a href="metro_lofts1.shtml"><img border=0 src="img/samples/Metro_Lofts/large_1.jpg" width=165 height=109 class="thumbnail_img">',
'<a href="mtclemens1.shtml"><img border=0 src="img/samples/Mt_Clemens_Library/large_1.jpg" width=165 height=109 class="thumbnail_img">',
'<a href="st_gertrudes.shtml"><img border=0 src="img/samples/st_gertrudes/large_1.jpg" width=165 height=109 class="thumbnail_img">',
'<a href="rayconnect1.shtml"><img border=0 src="img/samples/Rayconnect/large 1.jpg" width=165 height=109 class="thumbnail_img">',
'<a href="faulhauber1.shtml"><img border=0 src="img/samples/Faulhauber/large1.jpg" width=165 height=109 class="thumbnail_img">');

var max = imgs.length;
var num = Math.floor((Math.random() * max));

document.writeln(imgs[num]);

</script>
2

Is that when one person refreshes the same page?

How about when you have more than one visitor to the page. Do you want them all to start with seeing image number 1, or do you want the image sequence to be spread across all visitors.

3

It seems then that using cookies to remember which was the last image to be shown to the visitor, could be an appropriate way to go.

Any client-side solution is guaranteed to fail when javascript is not available though, so using a server-side script such as PHP or ASP is a preferred solution for this type of thing.

4

Either a new visitor or when they refresh because I am going to have a text description of the each image that needs to be in the same order with the image so they are in sync.