How to display a description text image for 3 seconds in Dom?

Hi I'm working on a site. I need help making a text appear in a div where it saids any image开发者_如何学运维 clicked their title and size. in DOM scripting. Can anyone help? No innerhtml.

Thanks

using pure dom scripting and no helper framework like jquery, gotta dust off some things I haven't used in awhile!

That said here ya go. Must be placed after page has loaded. (Or remove the last "showCredit();" line and put it in your body onload.

Note you'll need to alter this, I just put the "source" in the text, other attributes and styling is up to you.

function showCredit(){

    //find all image tags we want
    var elements = document.getElementsByTagName('img')

    //iterate through them
    for(var i=0; i<elements.length;i++){
        //bind the onclick function to all image tags
        elements[i].onclick=function(){
            //create the new div
            var el = document.createElement('div')

            //alter this to be whatever text you want
            var text = document.createTextNode('Source = '+this.getAttribute('src'));

            //alter this if you're going to have more than one clickable div
            el.id = 'test';

            //add the text to the div
            el.appendChild(text);

            //add the new div after the image tag
            this.parentNode.insertBefore(el, this.nextSibling);

            //set a timer to find the element we've named "test" and remove it
            window.setTimeout(function(){
                var element = document.getElementById('test');
                if(element){
                    element.parentNode.removeChild(element);
                }
            }, 4000);
    }
    }
}

//execute the function (bind all images)
showCredit();