javascript - Assigning event functions with a loop in JS -
here script have: , i'm trying assign event each element in array.
window.onload = sliding; function sliding() { document.getelementbyid('tag1').onmouseover = slideout; document.getelementbyid('tag1').onmouseout = slidein; }
and tried using code below didn't work. trigger function buy self.
window.onload = sliding; var tags = new array('tag1','tag2','tag3','tag4','tag5','tag6','tag7','tag8');// list of headings var pics = new array('popout1','popout2','popout3','popout4','popout5','popout6','popout7','popout8');// list of images slide out function sliding() { (var = 0; < tags.length; ++i) { document.getelementbyid('tag1').onmouseover = setslideout(tags[i],pics[i]); document.getelementbyid('tag1').onmouseout= setslidein(tags[i],pics[i]); } }
here full code
window.onload = sliding; var tags = new array('tag1','tag2','tag3','tag4','tag5','tag6','tag7','tag8');// list of headings var pics = new array('popout1','popout2','popout3','popout4','popout5','popout6','popout7','popout8');// list of images slide out function sliding() { /*for (var = 0; < tags.length; ++i) { setslideout(tags[i],pics[i]); }/*/ document.getelementbyid('tag1').onmouseover = slideout; document.getelementbyid('tag1').onmouseout = slidein; }/* function setslideout(tagsid,picsid){ document.getelementbyid(tagsid).onmouseover = slideout(tagsid,picsid); }*/ function slideout(){ //alert('over '+ lid); if(currpos('popout1') < 200){ document.getelementbyid('popout1').style.left = currpos('popout1') + 10 + "px"; var timer = settimeout(slideout,10) }else{ cleartimeout(timer); } } function slidein(){ //alert('over '+ lid); if(currpos('popout1') > 0){ document.getelementbyid('popout1').style.left = currpos('popout1') - 20 + "px"; var timer2 = settimeout(slidein,10) }else{ cleartimeout(timer2); } } function currpos(element){ return document.getelementbyid(element).offsetleft; }
here im trying to http://signsourceak.com/index2.html (first link in drop down works )
here's version of code modified use closures, trick:
window.onload = sliding; var tags = new array('tag1','tag2','tag3','tag4','tag5','tag6','tag7','tag8');// list of headings var pics = new array('popout1','popout2','popout3','popout4','popout5','popout6','popout7','popout8');// list of images slide out function sliding() { (var = 0; < tags.length; ++i) { document.getelementbyid(tags[i]).onmouseover = (function(j){ return function(){ setslideout(tags[j], pics[j]); } })(i); document.getelementbyid(tags[i]).onmouseout = (function(j){ return function(){ setslidein(tags[j], pics[j]); } })(i); }
}
Comments
Post a Comment