How to optimize jQuery code for hovering elements that impact another element

[chronos]

I picked up some code here (can't recall the link) but I'd like to see if it can be optimized. I have a table and in the first row there will be an image. In the 2nd row, there are cells that as you hover over, the image at the top changes. My JSFiddle is using colors for now. I'll swap in images later.The rows have only 3 cells now, but once I figure this out, they will probably contain 12 or cells, so I need to display different images when hovering over all these cells.The code works but I think if I get up to 12 cells/boxes, it won't be very efficient. How can this code be optimized?\[code\]// box 1$('#whybox1').mouseover(function(){ $('#whybox1').css('background-color', '#F7FE2E'); $('#animalbox').css('background-color', '#F7FE2E');});$('#whybox1').mouseout(function(){ $('#whybox1').css('background-color', '#d1e6f8'); $('#animalbox').css('background-color', '#d1e6f8');});\[/code\]As a side point, I have seen implementations like this one using n:child, however that gets broken on older browsers that I must support.http://jsfiddle.net/ccamacho/WfJvh/Cheers