properly accessing images within a <ul>

Question

I currently have:

<div id="thumbImages">
        <ul>
            <li><img src="thumbimages/test1.jpg" alt="thumb1" width="125" height="100" /></li>
            <li><img src="thumbimages/test2.jpg" alt="thumb2" width="125" height="100" /></li>
            <li><img src="thumbimages/test3.jpg" alt="thumb3" width="125" height="100" /></li>
            <li><img src="thumbimages/test4.jpg" alt="thumb4" width="125" height="100" /></li>
        </ul>
    </div>

in my HTML

and I am attempting to add button like functionality to the thumbnails with this javascript

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[i];
      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)
   }
}

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?

Answer 1

You are invoking functions instead of assigning them as handlers. So you need to fix that first. To fix it according to your current approach, each function you invoke would need to return a function that references the current i value.

But instead of tracking the mouseover state in an Array, it would be simpler to track it on the DOM element itself by adding a property.

function DoStuffWithThumbs() {
   var thumbs = document.getElementById("thumbImages"),
       itemsUL = thumbs.getElementsByTagName("ul"),
       itemsLI = itemsUL.item(0).getElementsByTagName("li");

   for (var i = 0; i < itemsLI.length; ++i) { 
      itemsLI[i].onclick = DoStuff;
      itemsLI[i].onmouseover = MouseOver;
      itemsLI[i].onmouseout = MouseOut;
   }
}

function MouseOver(val) {
   this._over = true;
}

function MouseOut(val) {
   this._over = false;
}

function DoStuff(val) {
   if(this._over === true) {
       // do your stuff
   }
}