getElementById value concatener

Bonjour, le script ci dessous affiche un Div en cliquant sur la cellule A1. Un formulaire apparait avec l'id "a1" de la case A1.
Sur la case A2 j'ai fait un onmouseover afin de recuperer l'id "a2.
Ici en fait lors du onmouseover la 'value' a1 est remplacé par a2 dans le div.
J'aimerais reussir a afficher 'a1 - a2'.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
 
<html>
<head>
<title>TEST</title>
<script>
	function afficheId(baliseId,di){
		if (document.getElementById && document.getElementById(baliseId) != null){
		    document.getElementById(baliseId).style.visibility='visible';
		    document.getElementById(baliseId).style.display='block';
		    //document.getElementById(baliseId).appendChild(document.createTextNode(di.id))
		    document.getElementById('idduchamp').value=(di.id);
		}
	}
 
	function afficheId2(baliseId,di){
		    //document.getElementById(baliseId).appendChild(document.createTextNode(di.id))
		    document.getElementById('idduchamp').value=(di.id);
	}
 
	function cacheId(baliseId){
		if (document.getElementById && document.getElementById(baliseId) != null){
			document.getElementById(baliseId).style.visibility='hidden';
			document.getElementById(baliseId).style.display='none';
		}
	}
</script>
</head>
<body>
	<div style="display:none;position:absolute;background-color:#1f1643; 
				width:200px;height:100px;border-style:solid;border-color:red;
				filter:alpha(opacity=60);-moz-opacity:.60;opacity:.60;color:red;"
				id="contenu">
		coucou - <a href="javascript:cacheId('contenu');">Fermer</a>
		<form action="test3.php" method="post">
			<input id="idduchamp" type="text" name="resultat" value=""/>
			<input type="submit" name="connexion" value="Connexion"/>
		</form>
	</div>
	<table style="border:1px solid black;height:400px;width:1000px;">
		<tr id="a">
			<td id="a1" onclick="afficheId('contenu',this);" style="border:1px solid black;">A1 et id="a1"</td>
			<td id="a2" onmouseover="afficheId2('contenu',this);" style="border:1px solid black;">A2 et id="a2"</td>
		</tr>
		<tr id="b">
			<td id="b1" style="border:1px solid black;">B1 et id="b1"</td>
			<td id="b2" style="border:1px solid black;">B2 et id="b2"</td>
		</tr>
	</table>
<?php if (isset($_POST['connexion']) && $_POST['connexion'] == 'Connexion') {echo $resultat;}?>
</body>
</html>

Merci de votre aide.

Nico