Rollover HTML Code

[MechanicalMan64]

Hey guys, does anyone know the HTML code for the following rollover: when onmouseover on square A, i want D to turn white, when i onmouseover B i want C to turn white.

Can anyone give me the html code for the following if possible? I know it has something to do with swaping, but i can't seem to find the right html code.

Any help will be much appreciated. Thanks

Image:
[ A ][ B ]
[ C ][ D ]

[Tereno]

The only way I can think of would be have a javascript function that gets called when you do the mouseover.

[GroceryBagHead]

<a href="" id ="a" onmouseover = "document.getElementByID('d').style='color: red'">A</a>
<a href="" id ="b" onmouseover = "document.getElementByID('c').style='color: red'">B</a>
<a href="" id ="c" onmouseover = "document.getElementByID('b').style='color: red'">C</a>
<a href="" id ="d" onmouseover = "document.getElementByID('a').style='color: red'">D</a>

[MechanicalMan64]

yes, but instead these are images, and not exactly texts


<a href="" id ="a" onmouseover = "document.getElementByID('d').style='color: red'">A</a>
<a href="" id ="b" onmouseover = "document.getElementByID('c').style='color: red'">B</a>
<a href="" id ="c" onmouseover = "document.getElementByID('b').style='color: red'">C</a>
<a href="" id ="d" onmouseover = "document.getElementByID('a').style='color: red'">D</a>