更改图像和标题

Question

I am trying to work out a way to change the text that goes along with an image that is changed with javascript...

var x = 0;
var images = new Array(".jpg", ".jpg", ".jpg", ".jpg", ".jpg");
var i = setInterval(auto, 10000);

function auto() {
    x++;
    if (x == images.length) x = 0;
    document.getElementById('bigImage').src = images[x];
}

function changeImage(img, imagetitle) {
    document.getElementById('bigImage').src = img;
    /* document.getElementById('mainimagetitle').innerHtml = imagetitle; */
}​​​

The commented part is how i suppose I could possibly change the text that goes with the image. How do i code the html. Should i use a with the id mainimagetitle? If so, where and how do i add the different texts i want to show and hide?

Answer 1

As I see from your posting, this should do the job.

<img id="bigImage" src="img1.jpg" alt="" />
<div id="mainimagetitle"></div>

Be sure to add a (filled) src tag or you will get strange results in IE. As you start with the second image (x++ before the change) this will be no problem. Happy accident I think. ;-)

// Edit: Of course any element will do as long as you use the right id. But you didn't tell us what html you use (xhtml/html5/...).

Answer 2

You could potentially have another array that stores the captions for each of the images

var captions = ['Caption 1', 'Caption 2', ...];

Assuming the mainimagetitle is an id of a <p> element, you could do:

function changeImage(img, imagetitle) {
     document.getElementById('bigImage').src = img;
     document.getElementById('mainimagetitle').innerText = imagetitle;
}​​​

You can see the full example, based on your code here .