So I'm pretty terrible at javascript but I think I have made some script that works but I have run into one last wall and I don't exactly know what to do to finish the script. So, what I'd like my script to do is when a person mouseovers an image in one table, it changes the class that deals with background color in a separate table. I have most of everything down, but I can't think of how to execute the very last, and arguably most important, part. Here's the combined sections of script I have so far. The "******" is where I can't think of what to add:

CSS
Code:
.default {background-color: black;}

.rock {background-color: red;}

.pop {background-color: blue;}
HTML
Code:
<html>
<head>
<script src="www.mysite.com/myjs.js"></script>
</head>
<body>

<table id="genres">
  <tr>
    <td id="rock">
      <a href="#"><img="/rock.jpg"></a>
    </td>
    <td> id="pop"
      <a href="#"><img="/pop.jpg"></a>
    </td>
  </tr>
</table>

<table id="schedule">
  <tr>
    <td class="default pop rock">
      text
    </td>
    <td class="default rock">
      text
    </td>
    <td class="default pop">
      text
    </td>
   <tr>
</table>

</body>
</html>
Notice the multiple classes. I anted to do this so that a roll over pop will change the first and last cell and a rollover of rock would change the first and second cell. And, as long as default is in front, only the default class will show through, effectively turning the other classes into a kind of id. See if this makes sense with the following:

JavaScript
Code:
var W3CDOM = (document.createElement && document.getElementsByTagName);

var mouseOversGenre = new Array();
var mouseOutsGenre = new Array();

var mouseOversRock = new Array();
var mouseOutsRock = new Array();

var mouseOversPop = new Array();
var mouseOutsPop = new Array();


window.onload = initGenre;

function initGenre()
{
	if (!W3cDOM) return;
	var genre = document.getElementById('genres');
	var genreImgs = genre.getElementsByTagName('img');
	for (var x=0;x<genreImgs.length;x++)
	{
	  genreImgs[x].onmouseover = mouseGoesOverGenre;
	  genreImgs[x].onmouseout = mouseGoesOutGenre;		  
	  mouseOutsGenre[x] = new Image();
	  mouseOutsGenre[x].src = genreImgs[x].src;
	  mouseOversGenre[x] = new Image();
	  mouseOversGenre[x].src = genreImgs[x].src;
	  genreImgs[x].number = x;
	}
	
	if (!W3cDOM) return;
	var schedule = document.getElementById('schedule');
	var scheduleCell = schedule.getElementByTagName('td');
	for (var y=0;y<scheduleCell.length;y++)
	{
	  if (scheduleCell[y].className.match('rock') == 'rock')
	  {
	    var def = scheduleCell[y].className.substring(0,scheduleCell[y].className.length);
	    mouseOutsRock[y] = def;
	    mouseOversRock[y] = scheduleCell[y].className.substring(0,0) + 'rock';
	    scheduleCell[y].number = y;
	  }
	  
	  if (scheduleCell[y].className.match('pop') == 'pop')
	  {
	    var def = scheduleCell[y].className.substring(0,scheduleCell[y].className.length);
	    mouseOutsPop[y] = def;
	    mouseOversPop[y] = scheduleCell[y].className.substring(0,0) + 'pop';
	    scheduleCell[y].number = y;
	  }
	}
}

function mouseGoesOverGenre()
{
	if (this.id == 'rock')
	{
	  this.src = mouseOversGenre[this.number].src;
	  **********
	}
	
	if (this.id == 'pop')
	{
	  this.src = mouseOversGenre[this.number].src;
	  **********
	}
}

function mouseGoesOutGenre()
{
	if (this.id == 'rock')
	{
	  this.src = mouseOutsGenre[this.number].src;
	  **********
	}
	
	if (this.id == 'pop')
	{
	  this.src = mouseOutsGenre[this.number].src;
	  **********
	}
}
But I'm stuck in the end. I just want to tell it to also execute the appropriate Arrays onto the appropriate class for the appropriate cell and I'm just not quite sure how to articulate this.

If anyone could help me out or tell me if this script is fundamentally flawed, I would be grateful.

Thanks