How can I show a background image with its associated title - php

Question

I have a question regarding how I might display a number of different background images on my site (not a slideshow but page specific backgrounds) along with an image title/credit line of text specific to each image?
I can position the text ok but not sure how to change the text with each new image.
This is what I have so far:
#header #headerbanner {
float: right;
width: 468px;
margin: 30px 0 10px 0;
text-align: left;
padding: 10px;
background: font-size: .8em;
line-height: 1.5em;
}
#header #headerbanner h3 {
font-size: 1.1em;
font-family: "Lucida Grande", "Lucida Sans
Unicode",Verdana,Arial,Helvetica,sans-serif;
}
#header #headerbanner p a {
border-bottom: 1px dashed #a8ef9d;
}
#header #headerbanner a:hover {
background: url(images/blacktrans.png);
}
<div id="headerbanner" class="widget widget_block widget_text">
<p>Image: Eildon Hills, Scottish Borders</p>
</div>
Thanks in advance.
S

Answer 1

I would use some JavaScript to always move to the next image/text:
setInterval(nextImage, 10000);
function nextImage() {
// Repeats every 5 seconds
}
Before this function just select the image and text element by using IDs and the JavaScript getElementById function.
<p id="text"></p>
<img id="img"></img>
text = document.getElementById('text');
img = document.getElementById('img');
And in this function set content of these elements
text.innerHTML = "Your Authors Name";
img.style.background = "url(newUrl/)";
In the function you should also use an Array with all names and images. And an counter and
if(counter>=imgArray.length) {
counter=0;
} else {
counter++;
}
And use the counter to display the text and image on the current position.