Hi all,

I have a little bit of Javascript that almost works correctly. Here's the code:

Code:
function toggle(curlink) {
 curlink.style.backgroundColor = curlink.style.backgroundColor == "yellow" ? "transparent" : "yellow";
 var links = document.getElementById("grid").getElementsByTagName("a");
 var list = "";
 for (var i = 0; i < links.length; ++i) {
  var link = links[i];
  if (link.style.backgroundColor == "yellow") {
   list += ("," + parseInt(link.style.left, 10) + "-" + parseInt(link.style.top, 10));
  }
 }
 document.theForm.theList.value = list.substring(1);
 return false;
};

window.onload = function() {
 var links = document.getElementById("grid").getElementsByTagName("a");
 for (var i = 0; i < links.length; ++i) {
  links[i].onclick = function() { return toggle(this); }
 }
};
The issue is with the bold, italicized line; it only works when I specify values for the top and left style property of every link in the array (eg <a style="top:10px;left:3px;>). How do I get those coordinates with Javascript without specifying them? I've tried using the offsetLeft and offsetTop properties, but they return values relative to the document, not the parent object.

Also, what would the code above look like in jquery? Not that it's needed - I just want to reduce my code a little and dabble in the jquery framework (I'm a Javascript newbie).

Thanks in advance, Dude-Dastic