Remplacer un tableau par des icones

Bonjour,
D'abord, merci pour votre forum qui semble super intéressant et que je viens de découvrir. J’espère pouvoir y participer au mieux.

Voilà mon problème, je suis en train de réaliser un serveur à base d'arduino 2560 et un PC en HTML et js. Celui qui m'a aidé à réaliser le code HTML n'est plus en mesure de m'aider pour essayer de rendre mes pages plus belles.

Je voudrais remplacer un petit tableau par des icônes. En fait, je voudrais y mettre une lampe blanche lorsque c'est éteint et jaune lorsque je clique pour allumer.

/Traitement envoi de commandes - sorties digitales.
function doSend(message){
	if (message=='action_bouton_A1'){
		if (document.getElementById('id_bouton_A1').value == bouton_A1_off){
			websocket.send('('+ ident_board+';'+ chaine_trans_A1_on +')');
		}
		else{
			websocket.send('('+ ident_board+';'+ chaine_trans_A1_off +')');	
		}      
	}
...
<!-- Tableau des Boutons pour l'envoi de commandes digitales -->
<table border-style="ridge" align="center" border="2" bordercolor="#1e90ff">
<tbody><tr>
<td align='center'><input style="background-color: blue; color: white;" value="?" id="id_bouton_A1" onclick="javascript:doSend('action_bouton_A1')" type="button" /></td>
<td style="background-color: grey;">&nbsp;</td>

Donc, là j'ai mis le code pour le bouton A1 et il y en a 8 (A1 - B1 - C1 - D1 et A2 - B2 - C2- D2) juste en On et Off.
Si quelqu'un peut m'aider à comprendre et ajouter le code nécessaire pour remplacer ce tableau par 8 icônes cliquables qui changeraient en mode On et inversement en mode Off, avec un commentaire lors passage dessus (par exemple lampe chambre).
merci d'avance en espérant avoir mis le code nécessaire
Modifié par bluemax (20 Nov 2013 - 16:46)

Que dire de cela :

case chaine_trans_A1_on:
document.getElementById('id_bouton_A1').value = bouton_A1_on;
document.getElementById('icone_bouton_A1').src = "icone_vert.png";
break;
case chaine_trans_A1_off:
document.getElementById('id_bouton_A1').value = bouton_A1_off;
document.getElementById('icone_bouton_A1').src = "icone_orange.png";
break;

puis
<td align='center'><button type="button" style="background-color:
white; color: white;border: 0px" value="?" id="id_bouton_A1"
onclick="javascript:doSend('action_bouton_A1');" ><img
id="icone_bouton_A1" width=25px /></button></td>