Cambio de estados en javascript

Este código sirve para establecer los diferentes estados de una barra de herramientas.

Pero no solo eso sino que nos puede servir como introducción para el manejo de eventos de Javascript.


La parte de javascript seía:

// Función asociada a un evento vacio
var doNothing = function () {
return true;
};
// Número de Imagenes o botones que dispone la botonera (se Incia en 1)
var _numButtons;
/** Inicializa la botonera
// Para ello se debe introducir el numero de las diferentes imagenes que
// se van a utilizar como botonera.
// las imagenes deben ser identificados por id="ImageX"
// donde X es el número de la imagen (empezando por 1)
**/
function initButtonTool(_num) {
_numButtons = _num;
var x;
try {
for (i = 1; i <= _numButtons; i++) {
x = document.getElementById("Image" + i);
// Firefox
if (x.addEventListener) {
x.addEventListener("mouseover", buttonIn, true);
x.addEventListener("mouseout", buttonOut, true);
x.addEventListener("click", buttonClick, true);
}
// IE
if (x.attachEvent) {
x.attachEvent("onmouseover", buttonIn);
x.attachEvent("onmouseout", buttonOut);
x.attachEvent("onclick", buttonClick);
}
}
}
catch (e) {
alert(e);
}
}
/**
Función asociada al evento que se produce cuando el
puntero del ratón entra en la imagen
**/
function buttonIn() {
try {

if (/MSIE/.test(navigator.userAgent)) {
_this = event.srcElement;
} else {
_this = this;
}
img = _this.src;
if ((img.search("_active") == -1) && (img.search("_off") == -1)) {
_this.src = img.replace(".gif", "_on.gif");
}
}
catch (e) {
alert(e);
}
}
/**
Función asociada al evento que se produce cuando el
puntero del ratón sale de la imagen
**/
function buttonOut() {
var img;
try {
if (/MSIE/.test(navigator.userAgent)) {
_this = event.srcElement;
} else {
_this = this;
}
img = _this.src;
if ((img.search("_active") == -1) && (img.search("_off") == -1)) {
_this.src = img.replace("_on.gif", ".gif");
}
}
catch (e) {
alert(e);
}
}
/**
Función asociada al evento que se produce cuando el
puntero del ratón pulsa la imagen
**/
function buttonClick() {
var img;
var img_old;
var elemento;
try {

if (/MSIE/.test(navigator.userAgent)) {
_this = event.srcElement;
} else {
_this = this;
}
img = _this.src;

for (var i = 1; i <= _numButtons; i++) {
if (/MSIE/.test(navigator.userAgent)) {

elemento = document.getElementById("Image" + i);
}else{
elemento = document.getElementById("Image" + i);
}
if (elemento == _this) {

if (img.search("_on.gif") != -1) {
elemento.src = img.replace("_on.gif", "_active.gif");
}
// Firefox
if (elemento.addEventListener) {
elemento.addEventListener("mouseout", doNothing, false);
}
// IE
if (elemento.attachEvent) {
elemento.attachEvent("onmouseout", doNothing);
}
} else {

img_old = elemento.src;
if (img_old.search("_active.gif") != -1) {
elemento.src = img_old.replace("_active.gif", ".gif");
}
}
}
}
catch (e) {
alert(e);
}
}





Para más información puede consultar también:

http://www.anieto2k.com/2006/10/16/gestion-de-eventos-en-javascript/

http://www.elcodigo.com/tutoriales/javascript/javascript5.html