Bonjour j'ai un petit soucis, je m'explique,

Le but du jeu est d'afficher quand on passe la souris sur un bouton, on affiche au milieur le nom de l'élément courant, son type et sa masse atomique, a gauche le précédent et à droite le suivant.



j'ai donc fait des tableaux avec les id, nom,masse atomique, type....
Je sais que je dois récupérer l'id de l'élément courant avec this et ensuite aller dans mon array, Pour le suivant id actuel +1 sauf pour le dernier et inversement pour le précédent! Mais je ne vois pas comment mettre cela en oeuvre avec ceci


Code : Sélectionner tout - Visualiser dans une fenêtre à part
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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
 
 
 
<html>
<head>
 
<style type="text/css">
 
.gaz {
color:grey;
background-color:white;
width:37px;
 
}
 
 
.solide {
color:red;
background-color:white;
width:37px;
}
 
.liquide {
color:blue;
background-color:white;
width:37px;
}
 
.other {
color:yellow;
background-color:white;
width:37px;
 
 
}
 
</style>
 
 
 
<script type="text/javascript" language="javascript">
 
 
var tIdElements ("", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10" );
var tEtatsNaturels = new Array("", "Gazeux", "Gazeux", "Solide", "Solide", "Solide", "Solide", "Gazeux", "Gazeux", "Gazeux", "Gazeux");
var tNoms = new Array("", "Hydrogene", "Helium", "Lithium", "Bérylium", "Bore", "Carbone", "Azote", "Oxygène", "Fluor", "Néon");
var tMassesAtomiques = new Array("", "1.00794", "4.002602", "6.941", "9.012182", "10.811", "12.0107", "14.00674", "15.9994", "18.9984032", "20.1797") ;
 
 
 
 
 
 
 
 
	function affichage(vlr) {
		document.getElementById('cel').innerHTML = vlr.id;
	}
 
 
 
 
 
 
 
</script>
 
</head>
 
<body>
<div id="cel"></div>
<center>
 
<table>
 
<td><input class="gaz" type="button" id="1" value="H" onMouseOver="affichage(this)"></td><td></td><td></td><td></td><td></td><td></td><td><input class="gaz" type="button" id="2" value="He" onMouseOver="affichage(this)"></td>
 
<tr><td><input class="solide" type="button" id="3" value="Li"onMouseOver="affichage(this)"> <input class="solide" type="button" id="4" value="Be" onMouseOver="affichage(this)"></td><td><input class="solide" type="button" id="5" value="B" onMouseOver="affichage(this)"></td><td><input class="solide" type="button" id="6" value="C" onMouseOver="affichage(this)"></td><td><input class="gaz" type="button" id="7" value="N" onMouseOver="affichage(this)"></td><td><input class="gaz" type="button" id="8" value="O"onMouseOver="affichage(this)"></td><td><input class="gaz" type="button" id="9" value="F"onMouseOver="affichage(this)"></td><td><input class="gaz" type="button" id="10" value="Ne"onMouseOver="affichage(this)"></td>
<tr><td><input class="solide" type="button" id="11" value="Na"> <input class="solide" type="button" id="12" value="Mg"></td><td><input class="solide" type="button" id="13" value="Al"></td><td><input class="solide" type="button" id="14" value="Si"></td><td><input class="solide" type="button" id="15" value="P"></td><td><input class="solide" type="button" id="16" value="S"></td><td><input class="gaz" type="button" id="17" value="Ci"></td><td><input class="gaz" type="button" id="18" value="Ar"></td>
<tr><td><input class="solide" type="button" id="19" value="K"> <input class="solide" type="button" id="20" value="Ca"> <input class="solide" type="button" id="21" value="Sc"> <input class="solide" type="button" id="22" value="Ti"> <input class="solide" type="button" id="23" value="V"> <input class="solide" type="button" id="24" value="Cr"> <input class="solide" type="button" id="25" value="Mn"> <input class="solide" type="button" id="26" value="Fe"> <input class="solide" type="button" id="27" value="Co"> <input class="solide" type="button" id="28" value="Ni"> <input class="solide" type="button" id="29" value="Cu"> <input class="solide" type="button" id="30" value="Zn"></td><td> <input class="solide" type="button" id="31" value="Ga"></td><td> <input class="solide" type="button" id="32" value="Ge"></td><td> <input class="solide" type="button" id="33" value="As"></td><td> <input class="solide" type="button" id="34" value="Se"></td><td> <input class="solide" type="button" id="35" value="Br"></td><td><input class="gaz" type="button" id="36" value="Kr"></td>
<tr><td><input class="solide" type="button" id="37" value="Rb"> <input class="solide" type="button" id="38" value="Sr"> <input class="solide" type="button" id="39" value="Y"> <input class="solide" type="button" id="40" value="Zr"> <input class="solide" type="button" id="41" value="Nb"> <input class="solide" type="button" id="42" value="Mo"> <input class="solide" type="button" id="43" value="Tc"> <input class="solide" type="button" id="44" value="Ru"> <input class="solide" type="button" id="45" value="Rh"> <input class="solide" type="button" id="46" value="Pd"> <input class="solide" type="button" id="47" value="Ag"> <input class="solide" type="button" id="48" value="Cd"></td><td> <input class="solide" type="button" id="49" value="In"></td><td> <input class="solide" type="button" id="50" value="Sn"></td><td> <input class="solide" type="button" id="51" value="Sb"></td><td> <input class="solide" type="button" id="52" value="Te"></td><td> <input class="solide" type="button" id="53" value="I"></td><td><input class="gaz" type="button" id="54" value="Xe"></td>
<tr><td><input class="solide" type="button" id="55" value="Cs"> <input class="solide" type="button" id="56" value="Ba"> <input class="solide" type="button" id="57" value="La"> <input class="solide" type="button" id="72" value="Hf"> <input class="solide" type="button" id="73" value="Ta"> <input class="solide" type="button" id="74" value="W"> <input class="solide" type="button" id="75" value="Re"> <input class="solide" type="button" id="76" value="Os"> <input class="solide" type="button" id="77" value="Ir"> <input class="solide" type="button" id="78" value="Pt"> <input class="solide" type="button" id="79" value="Au"> <input class="liquide" type="button" id="80" value="Hg"></td><td> <input class="solide" type="button" id="81" value="Ti"></td><td> <input class="solide" type="button" id="82" value="Pb"></td><td> <input class="solide" type="button" id="83" value="Bi"></td><td> <input class="solide" type="button" id="84" value="Po"></td><td> <input class="solide" type="button" id="85" value="At"></td><td><input class="gaz" type="button" id="86" value="Rn"></td>
<tr><td><input class="solide" type="button" id="87" value="Fr"> <input class="solide" type="button" id="88" value="Ra"> <input class="solide" type="button" id="89" value="Ac"> <input class="other" type="button" id="104" value="Rf"> <input class="other" type="button" id="105" value="Db"> <input class="other" type="button" id="106" value="Sg"> <input class="other" type="button" id="107" value="Bh"> <input class="other" type="button" id="108" value="Hs"> <input class="other" type="button" id="109" value="Mt"> <input class="other" type="button" id="110" value="Ds"> <input class="other" type="button" id="111" value="Rg"> <input class="gaz" type="button" id="112" value="Cn"></td><td> <input class="other" type="button" id="113" value="Uut"></td><td> <input class="other" type="button" id="114" value="Uuq"></td><td><input class="other" type="button" id="115" value="Uup"></td><td> <input class="other" type="button" id="116" value="Uuh"></td><td> <input class="other" type="button" id="117" value="Uus"></td><td><input class="other" type="button" id="118" value="Uuo"></td>
 
 
 
 
<table>
 
<tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><input class="solide" type="button" id="57" value="La"> <input class="solide" type="button" id="58" value="Ce"> <input class="solide" type="button" id="59" value="Pr"> <input class="solide" type="button" id="60" value="Nd"> <input class="solide" type="button" id="61" value="Pm"> <input class="solide" type="button" id="62" value="Sm"> <input class="solide" type="button" id="63" value="Eu"> <input class="solide" type="button" id="64" value="Gd"> <input class="solide" type="button" id="65" value="Tb"> <input class="solide" type="button" id="66" value="Dy"> <input class="solide" type="button" id="67" value="Ho"> <input class="solide" type="button" id="68" value="Er"> <input class="solide" type="button" id="69" value="Tm"> <input class="solide" type="button" id="70" value="Yb"> <input class="solide" type="button" id="71" value="Lu"></td></td></td></td></td></td></td></td></td></td></td></td></td></td></td></td></td></td></td></td></td></td></td></td></td></td></td></td></td></td></td></td></td>
<tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><input class="solide" type="button" id="89" value="Ac"> <input class="solide" type="button" id="90" value="Th"> <input class="solide" type="button" id="91" value="Pa"> <input class="solide" type="button" id="92" value="U"> <input class="gaz" type="button" id="93" value="Np"> <input class="solide" type="button" id="94" value="Pu"> <input class="other" type="button" id="95" value="Am"> <input class="other" type="button" id="96" value="Cm"> <input class="other" type="button" id="97" value="Bk"> <input class="other" type="button" id="98" value="Cf"> <input class="other" type="button" id="99" value="Es"> <input class="other" type="button" id="100" value="Fm"> <input class="other" type="button" id="101" value="Md"> <input class="other" type="button" id="102" value="No"> <input class="other" type="button" id="103" value="Lr"></td></td></td></td></td></td></td></td></td></td></td></td></td></td></td></td></td></td></td></td></td></td></td></td></td></td></td></td></td></td></td></td></td>
 
</table>
 
</table>
 
</center>
 
</body>
 
</html>
Un grand merci pour votre aide!!