Assigning event functions with a loop in JS
<p>Here is the script I have:
And I'm trying to assign event to each element in an array.</p>

<pre><code>window.onload = sliding;

function sliding() {
    document.getElementById('tag1').onmouseover = slideout; 
    document.getElementById('tag1').onmouseout = slidein;
}
</code></pre>

<p>And I tried do using the code below but that didn't work. It would trigger all the function buy it self.</p>

<pre><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 that slide out

function sliding() {
    for (var i = 0; i &lt; tags.length; ++i) {
        document.getElementById('tag1').onmouseover =  setslideout(tags[i],pics[i]);
        document.getElementById('tag1').onmouseout=  setslidein(tags[i],pics[i]);
    }
}
</code></pre>

<p>Here is full code </p>

<pre><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 that slide out

function sliding() {
  /*for (var i = 0; i &lt; 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') &lt; 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') &gt; 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; 
}
</code></pre>

<p>Here what im trying to to <a href="http://signsourceak.com/index2.html" rel="nofollow">http://signsourceak.com/index2.html</a> (first link in the drop down works )</p>
