Question

I created this site which uses a simple javascript function to show images based on the user mousing over or clicking numbered boxes on the right. Now after testing it’s been determined that an automatic slideshow should be added on top of this, so that next image will show after a few seconds.

http://www.philippedollo.com/photo/fineart/f_amw.htm

Is there a way to amend this code easily to make it happen easily? —

function showPic(whichpic) {
    if (document.getElementById) {
        document.getElementById('placeholder').src = whichpic.href;
        if (whichpic.title) {
            document.getElementById('desc').childNodes[0].nodeValue = whichpic.title;
        } else {
            document.getElementById('desc').childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue;
        }
        return false;
    } else {
        return true;
    }
}

Answer 1

Use setInterval().

function getNextPic()
{
    // ???
}

setInterval(function ()
{
    showPic(getNextPic());
}, 3000); // 3 seconds

There’s no need for the if(document.getElementById) check, since the function is 100% cross-browser.

function showPic(whichpic)
{
    document.getElementById('placeholder').src = whichpic.href;

    document.getElementById('desc').childNodes[0].nodeValue = whichpic.title ?
        whichpic.title : whichpic.childNodes[0].nodeValue;

    return false;
}