I'm working on a CSS-image map where when you hover over certain portions, a highlighted section is brought into view using background-position. But there's also a text menu on the same page with links to the different parts of the image and I'd like to be able to change the map when the text links are hovered over as well as when the map itself is hovered over.

I thought I could do something like this which inputs the IDs of the two lists on page load:

PHP Code:
  function rollover(textNav,mapNav) {
      var 
textNav document.getElementById(textNav).getElementsByTagName("li");
      var 
mapNav document.getElementById(mapNav).getElementsByTagName("li");
      for (var 
i=0i<textNav.lengthi++) {
          var 
textID document.getElementById(textNav);
          for (var 
j=0j<mapNav.lengthj++) {
              var 
mapID document.getElementById(mapNav[j]);
              if (
mapID textID.substring(2)) {
                  
textID.onmouseover=function() {
                      
mapID.className+=(this.className.length>0" """) + "roll";
                  }
                  
textID.onmouseout=function() {
                      
map.className=this.className.replace(new RegExp("( ?|^)roll\\b"), "");
                  }
              }
          }
      }
  }
  
window.onload=rollover
The IDs of the list items look like - #t_item1 #item1.
I thought I could loop through the two collections and when a comparison was made (ie first ID name less the 't_'), add the class to that list item with the class then styled through CSS but I'm stuck on the bit where I compare variable names. Treating the object as a string's obviously not right.
Or is there a better way to do this than what I've got so far?