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();
精彩评论