"Зависимый" принцип переключения кнопок(нажатие на кнопку отжимает нажатую прежде)
 

Здравствуйте.
Уперся со следующей задачкой:
есть набор кнопок, выводится в цикле в виде:

<img id=$n src='Img/sl1.jpg' width='20' height='20' border='0' onclick=\" return mju(event); \"   onMouseOver=\"this.src='Img/sl2.jpg'\" onMouseOut=\"this.src='Img/sl1.jpg'\">

где $n переменная от 1 до "общего количества кнопок".
Каждая кнопка может находиться в трех состояниях:
- исходное sl1
- наведение мыши sl2
- нажатое sl3
При нажатии очередной кнопки, нажатая до нее должна возвращаться в исходное состояние, т.е. единовременно может быть нажата только одна кнопка, остальные должны находиться в исходном состоянии (меняться при наведении мыши и возвращаться в исходное при onMouseOut).
Вот моя функция:

function mju(e) {	
/*Нахожу все теги Img в диве с id=tabel*/
var buttons = document.getElementById("tabel").getElementsByTagName("img");
/*меняю все изображения на исходную картинку*/
var i=0;
for (i=0; i<buttons.length; i++)
{buttons[i].src="img/sl1.jpg";}
/*Определяю на каком объекте произошло событие онклик*/
e = e || window.event;
var tar=e.target || e.srcElement;
/*На найденом объекте меняю изображение на "нажатое"*/
tar.src="img/sl3.jpg";
/*Фиксирую изображение на найденном объекте. чтобы не реагировало на перемещение мыши*/
document.getElementById(tar.id).onmouseout = "src=img/sl3.jpg";
document.getElementById(tar.id).onmouseover = "src=img/sl3.jpg";
}

В результате получается странный эффект - кнопки на которых произошел onClick больше не реагируют на onmouseout и onmouseover, находятся в исходном состоянии и меняются только при очередном клике.
Чую, что накосячил в 14 и 15 строчках функции, но как иначе зафиксировать нажатое состояние кнопки не могу сообразить.
Плиаз... Хелп...

Прошу прощения, не в тот раздел тему запихнул видимо....