What's the best way to rotate image + text + url on a webpage?

I have a story archive, and part of this archive includes a collection more than 50 writing challenges. Each of these challenges is on its own webpage, and includes a photo and block of text to describe the challenge. At the moment I highlight one or two on the front page of the story archive, but I’m fairly bad at remembering to update the HTML to give visitors new challenges to see as soon as they enter the site rather than me remembering to change it myself every couple of months.

So it would be nice to find a way to display a new one either every day or each time the site is reloaded by the same visitor.

Ideally, I’d like to automatically display:

  • the photo <–lowest priority
  • the text for the challenge
  • the url to take one to the specific challenge page

of say, 3-5 of the challenges (with only one being seen at a time, if that wasn’t clear).

I’ve looked at a few sites that allow you to enter in codes to create a java script, but these seem to only deal with a photo+url or just a URL. I’m still a newbie when it comes to java so I’m not sure how to alter any of them to add in the additional information I’d like to display, namely the text to give the challenge elements below the photo since a photo and url is covered by banner makers like this one (removing the size restriction for the picture was obvious, but adding text is much less so). If someone could explain what you alter to do what, I’d probably pick it up pretty quickly.

Any suggestions for the best way to accomplish what I’d like to do?

I’ve got a bit of php code that I use on the front page of my website to display random articles & to assign random charity ad blocks to each page.

i’m away from home at the moment so i can’t post the code but all it does is pick a selection of single lines out of a text file. And you can code pretty much anything you like in a sinle line of html.

you can see it in action on my site - www.atomicshrimp.com