Hi, I have the following code:
function addHandlers()
{
var elementList = new Array();
elementList.push(new Element("newhomesdiv", "images/newhomes.png", "images/newhomes-over.png"));
elementList.push(new Element("additionsdiv", "images/additions.png", "images/additions-over.png"));
elementList.push(new Element("homeimprovdiv", "images/homeimprove.png", "images/homeimprove-over.png"));
elementList.push(new Element("aboutusdiv", "images/aboutus1.png", "images/aboutus-over1.png"));
for(var i = 0; i < elementList.length; i++)
{
var curNode = document.getElementById(elementList[i].parentId).firstChild;
var item = elementList[i];

if(curNode)
{
/*if(curNode.addEventListener)
{
curNode.addEventListener("mouseover", function(){makeCallback(item.parentId, item.hoverImage)}, false);
curNode.addEventListener("mouseout", function(){makeCallback(item.parentId, item.regImage)}, false);
}
else if(curNode.attchEvent)
{
curNode.attachEvent("onmouseover", function(){makeCallback(item.parentId, item.hoverImage)});
curNode.attachEvent("onmouseout", function(){makeCallback(item.parentId, item.regImage)});
}
else
{
curNode["onmouseover"] = makeCallback(item.parentId, item.hoverImage);
curNode["onmouseout"] = makeCallback(item.parentId, item.regImage);
}*/
curNode.onmouseover = makeCallback(item.parentId, item.hoverImage);
curNode.onmouseout = makeCallback(item.parentId, item.regImage);
}
}
}

function makeCallback(parId, image)
{
return function() {
changeImage(parId, image);
};
}

function changeImage(parId, image)
{
document.getElementById(parId).firstChild.src = image;
}

The curNode.onmouseover = makeCallback(item.parentId, item.hoverImage); works, but I want to use addEventListener and fallback to the other methods. I don't understand why the addEventListener and attachEvent parts doesn't work. Any ideas?

else if(curNode.attchEvent)It's not asking quite the right question...

Ok, after fixing the typo, it still doesn't work. I think the problem has something to do with passing parameters in the addEventListener and attachEvents.

function addHandlers()
{
var elementList = new Array();
elementList.push(new Element("newhomesdiv", "images/newhomes.png", "images/newhomes-over.png"));
elementList.push(new Element("additionsdiv", "images/additions.png", "images/additions-over.png"));
elementList.push(new Element("homeimprovdiv", "images/homeimprove.png", "images/homeimprove-over.png"));
elementList.push(new Element("aboutusdiv", "images/aboutus1.png", "images/aboutus-over1.png"));
for(var i = 0; i < elementList.length; i++)
{
var curNode = document.getElementById(elementList[i].parentId).firstChild;
var item = elementList[i];

if(curNode)
{
/*if(curNode.addEventListener)
{
curNode.addEventListener("mouseover", function(){makeCallback(item.parentId, item.hoverImage)}, false);
curNode.addEventListener("mouseout", function(){makeCallback(item.parentId, item.regImage)}, false);
}
else if(curNode.attachEvent)
{
curNode.attachEvent("onmouseover", function(){makeCallback(item.parentId, item.hoverImage);});
curNode.attachEvent("onmouseout", function(){makeCallback(item.parentId, item.regImage);});
}
else
{
curNode["onmouseover"] = makeCallback(item.parentId, item.hoverImage);
curNode["onmouseout"] = makeCallback(item.parentId, item.regImage);
}*/
curNode.onmouseover = makeCallback(item.parentId, item.hoverImage);
curNode.onmouseout = makeCallback(item.parentId, item.regImage);
}
}
}

function makeCallback(parId, image)
{
return function() {
changeImage(parId, image);
};
}

function changeImage(parId, image)
{
document.getElementById(parId).firstChild.src = image;
}

makeCallback returns the the handler's address and therefore must be called:

curNode.addEventListener("mouseover", makeCallback( item.parentId, item.hoverImage), false);

Oh wow, I was going off of this (https://developer.mozilla.org/en/DOM/element.addEventListener) where it says if you want to pass parameters, you have to use an anonymous function. I wonder why it works anyways...