Replacing image with browser refresh
-
I used to have a small code snippet (I believe it was javascript) that allowed me to have a page pull up a different image each time the page was loaded. The images were kept in a specified folder and each time the page was refreshed or revisited a different photo would show up. I have searched for days and can't find anything anywhere!! :omg:Does anyone have this code or something similar? I am looking because I have a small client who has photos of office staff and drivers from 3 offices that all need to be displayed but they are not worthy of their own page. Help!
-
I used to have a small code snippet (I believe it was javascript) that allowed me to have a page pull up a different image each time the page was loaded. The images were kept in a specified folder and each time the page was refreshed or revisited a different photo would show up. I have searched for days and can't find anything anywhere!! :omg:Does anyone have this code or something similar? I am looking because I have a small client who has photos of office staff and drivers from 3 offices that all need to be displayed but they are not worthy of their own page. Help!
If the list if images is not going to change (or at least not going to change much) then this should be easy to accomplish with some simple JavaScript. I am making an assumption that you are familiar with JavaScript and will be able to run on your own with the following code snippets. If not, then let me know.
var arrOfPics = new Array(10); // Create an array
arrOfPics[0] = "images/Joe.jpg"; // and populate it ...
arrOfPics[1] = "images/Sue.jpg";
arrOfPics[2] = "images/John.jpg";
arrOfPics[3] = "images/Peter.jpg";
arrOfPics[4] = "images/Paul.jpg";
arrOfPics[5] = "images/Mary.jpg";
arrOfPics[6] = "images/Eddy.jpg";
arrOfPics[7] = "images/Jason.jpg";
arrOfPics[8] = "images/Wanda.jpg";
arrOfPics[9] = "images/Albert.jpg";Once you have created an array of the location to the pictures you possibly want to display all you need to do is randomly choose one and write the HTML to display the image. The easiest way that I can think do that is to do something like the following:
document.write("<img src=" + arrOfPics[Math.floor(Math.random()*10)] + ">");
That should do it ... of course you could create a Server-Side script (if that is an option) that could do basically the same thing, but you mentioned JavaScript and that makes plenty of sense for something like this. Every time this page is loaded a new random image will be selected from the array to be displayed.