properly accessing images within a <ul>

[ellapony]

I currently have:\[code\]<div id="thumbImages"> <ul> <li><img src="http://stackoverflow.com/questions/12791309/thumbimages/test1.jpg" alt="thumb1" width="125" height="100" /></li> <li><img src="http://stackoverflow.com/questions/12791309/thumbimages/test2.jpg" alt="thumb2" width="125" height="100" /></li> <li><img src="http://stackoverflow.com/questions/12791309/thumbimages/test3.jpg" alt="thumb3" width="125" height="100" /></li> <li><img src="http://stackoverflow.com/questions/12791309/thumbimages/test4.jpg" alt="thumb4" width="125" height="100" /></li> </ul> </div>\[/code\]in my HTMLand I am attempting to add button like functionality to the thumbnails with this javascript\[code\]var isMousedOver = [false,false,false,false];function init(){ DoStuffWithThumbs();}this.onload = init();function DoStuffWithThumbs(){ var thumbs = document.getElementById("thumbImages"); var itemsUL = thumbs.getElementsByTagName("ul"); var itemsLI = itemsUL.item(0).getElementsByTagName("li"); for (var i = 0; i < itemsLI.length; ++i) { var curThumb = itemsLI; curThumb.onclick = DoStuff(i); curThumb.onmouseover = MouseOver(i); curThumb.onmouseout = MouseOut(i); }}function MouseOver(val){ isMousedOver[val] = true;}function MouseOut(val){ isMousedOver[val] = false;}function DoStuff(val){ if(isMousedOver[val] == true) { //stuff is done here ( I know the stuff in question is working) }}\[/code\]However currently I am getting no visible response from this at all on the page when I have separately tested the result itself ( simply flipping an image and changing some text on the page based on another array). Which leads me to believe I am accessing the elements incorrectly. I am new to using Javascript alongside html so forgive me if I have made some grave error. Am I accessing my elements properly? or is this entirely the wrong way to go about accessing them/using onmouseover/onmouseout?