help with DOM and mouseover functions

[linda838]

Hi, I'm relatively new to javascript (an admitted copy-and-paster). I've read that you should keep your html document clean of javacript and to include it in a header tag such as: <script type="text/javascript" src="rollover.js"></script>

I currently have a web page that contains tags like

<a href="project1.html" onMouseOver="javascript:showHilight(1)" onMouseOut="javascript:clearHilight(1)">Project 1</a>
<a href="project2.html" onMouseOver="javascript:showHilight(2)" onMouseOut="javascript:clearHilight(2)">Project 2</a>
...

I'd like to create a javascript function to include in the header, say "rollover.js" to find these <a> tags and replace the onmouseover and onmouseout functions so that i do not need to include them inline in my <a> tags like I currently do.

Looking at code examples on the net, I've tried something like this, but it doesn't work, could you help me figure out why? Thank you:

in my html document:

<a class="pj1" href="project1.html">Project 1</a>
<a class="pj2" href="project2.html">Project 2</a>
...

in "rollover.js":

window.onload=function() {
setTarget();
}

function setTarget() {
var anchor=document.getElementsByTagName('a');
for (var i=0;i<anchor.length;i++) {
for (var j=1;j<7;j++) {
var pjname="pj"+j;
if (anchor[i].className==pjname) {
anchor[i].onmouseover=function() { showHilight(j); };
anchor[i].onmouseover=function() { clearHilight(j); };
}
}
}
}

function showHilight(n) {
//show project n hightlights
}
function clearHilight(n) {
//clear all project hightlights
}

Thanks for your help,
Linda.

[Clueful]

The value of j isn't saved. Try:
anchor[i].onmouseover = ( function(n){ return function(){showHilight(n);} } )(j);

anchor[i].onmouseout = ( function(n){ return function(){clearHilight(n);} } )(j);

[linda838]

hi clueful, thank you. doh!! it seems obvious now..