var changing_images = [];

function imgOn(event) {
	event = event || window.event;
	var srcElement = event.srcElement ? event.srcElement : event.target;
	imgName = srcElement.id;
	document.images[imgName].src = changing_images[imgName].on.src;
}

function imgOff(event) {
	event = event || window.event;
	var srcElement = event.srcElement ? event.srcElement : event.target;
	imgName = srcElement.id;
	document.images[imgName].src = changing_images[imgName].off.src;
}

function addChangingImage(name,src_off,src_on,width,height) {
	img_on = new Image (width,height);
	img_on.src = src_on;
	img_off = new Image (width,height);
	img_off.src = src_off;
	changing_images[name] = { 'on' : img_on, 'off' : img_off };
}

// should be called at the end of the page, when all elements are in place
function registerChangingImagesEvents() {
	for (var name in changing_images) {
		obj = getObjById(name);
		if (obj) {
			obj.onmouseover = imgOn;
			obj.onmouseout = imgOff;
		}
	}
}