Onmouseover et centrage

Bonjour à tous,

Je viens vers vous avec un joli casse tête.

Je tente de réaliser un petit schéma animé : voir image

http://img7.hostingpics.net/thumbs/m...._24_12.34.gif

Le but de la manœuvre est d'afficher un cadre au milieu qui contiendra du texte en fonction de la zone grise survolé.

Mon souci est que je n'arrive pas à dire :
"Garde le cadre au centre lorsque celui-ci est survolé par la souris"

Le cadre disparait dés que je le survole, logique puisque j'ai mi une fonction onmouseout sur chacune dés DIV contenant une image grise.

Je pense que vous avez compris ou je voulais en venir mais en tant que débutant je pense que je me complique bien la vie. donc avis au amateur si vous avez une solution efficace pour faire cela.

Pour l'instant voici le code JS

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
function setButton_on(x)
{
	var button=document.getElementById(x);
	var fichier = 'images/shema-actif_0'+button.id+'.gif';
	var centre2 = document.getElementById(11).style;
 
 
	button.src=fichier;
 
	centre2.zIndex= "100";
 
}
function setCentre()
{
	document.getElementById(11).onmouseover==1;
	alert ( 'valeur : '+document.getElementById(11).onmouseover);
}
 
function setButton_off(x)
{
	if (document.getElementById(11).onmouseover!=1)
	{
	var button=document.getElementById(x);
	var fichier = 'images/shema_0'+button.id+'.gif';
	button.src=fichier;
	var centre2 = document.getElementById(11).style;
 
 
	button.src=fichier;
 
	centre2.zIndex= "0";
	}
}
</script>
 
</head>
 
<body>
<div style="width:784px; height:749px; margin:auto;">
<div style=" width:321px; height:221px; position:absolute; margin-left:233px; margin-top:268px; z-index:1 " id="10">
<img src="images/centre_05.gif" width="321" height="221" border="0" />
</div>
 
<div style=" background-image:url(images/centre_actif_05.gif); width:321px; height:221px; position:absolute; margin-left:233px; margin-top:268px; z-index:0 " id="11" onmouseover="setCentre()" >
ererrerrerererererere
</div>
 
 
 
 
<div style=" width:306px; height:297px; float:left">
<img src="images/shema_01.gif" width="306" height="297" id="1" border="0" onmouseover="setButton_on(this.id)" onmouseout="setButton_off(this.id)"/>
</div>
<div style=" width:172px; height:297px; float:left">
<img src="images/shema_02.gif" width="172" height="297" id="2" border="0" onmouseover="setButton_on(this.id)" onmouseout="setButton_off(this.id)"/>
</div>
<div style="width:306px; height:297px; float:left">
<img src="images/shema_03.gif" width="306" height="297" id="3" border="0" onmouseover="setButton_on(this.id)" onmouseout="setButton_off(this.id)"/>
</div>
<div style=" width:306px; height:166px; float:left">
<img src="images/shema_04.gif" width="306" height="166" id="4" border="0" onmouseover="setButton_on(this.id)" onmouseout="setButton_off(this.id)"/>
</div>
<div style=" width:173px; height:166px; float:left">
<img src="images/shema_05.gif" width="173" height="166" id="5" border="0" onmouseover="setButton_on(this.id)" onmouseout="setButton_off(this.id)"/>
</div>
<div style=" width:305px; height:166px; float:left">
<img src="images/shema_06.gif" width="305" height="166" id="6" border="0" onmouseover="setButton_on(this.id)" onmouseout="setButton_off(this.id)"/>
</div>
<div style=" width:306px; height:286px; float:left">
<img src="images/shema_07.gif" width="306" height="286" id="7" border="0" onmouseover="setButton_on(this.id)" onmouseout="setButton_off(this.id)"/>
</div>
<div style=" width:173px; height:286px; float:left">
<img src="images/shema_08.gif" width="173" height="286" id="8" border="0" onmouseover="setButton_on(this.id)" onmouseout="setButton_off(this.id)"/>
</div>
<div style=" width:305px; height:286px; float:left">
<img src="images/shema_09.gif" width="305" height="286" id="9" border="0" onmouseover="setButton_on(this.id)" onmouseout="setButton_off(this.id)"/>
</div>

Merci par avance