rollovers with a diffrent location

Hi,

I am trying to create a page where I can click on one image, and have the image change in another location. For instance if I have a listing of Product codes in 2 columns of a table and above the table I have the entire product code I want the user to be able to click on an item from column 1 and have it change what is above the table then click on an item from column 2 and have it change the second part of the product code above the table. I know I am not explaining this well but I hope that some one understands what I mean. I have seen this done before but I don't remember where. If you could help it would be greatly appreciated.
Thanks,
confusion123

Heres a rough example of what I want it to look like

If someone clicks on a letter it will change ;)

and if someone clicks on a number it will change :D

but ;) :D will always remain unless something is clicked.


;) :D

a 1
b 2
c 3
d 4
e 5
f 6
g 7
h 8
i 9

Do you mean something like this?

<table border="1">
<tr><td colspan="2"><span id="span1">&nbsp;</span><span id="span2">&nbsp;</span></td>
<tr>
<td onclick="document.getElementById('span1').innerHTML=this.innerHTML">123</td>
<td onclick="document.getElementById('span2').innerHTML=this.innerHTML">456</td>
</tr>
<tr>
<td onclick="document.getElementById('span1').innerHTML=this.innerHTML">abc</td>
<td onclick="document.getElementById('span2').innerHTML=this.innerHTML">def</td>
</tr>
</table>

Mr. J,
Thank you so very very much, that was exactly what I had been looking for!

You were a big help.

Thanks,
confusion123 :)

Mr. J,
With that script is there any way to get it to pull 2 items from the same column

ie XX- YY

1
2
3
4
a
b
c
d

where it would pull 1 & c and 1 would be XX and c would be YY

Thanks,
Confusion123