En este pequeño tutorial vamos a aprender a realizar un RollOver Activo, que no se si exactamente ese termino exista, pero asi lo llame, y se debe a que ultimamente algunas comadres del msn me han preguntado como pueden tener un menu que al dar click en uno de sus items, este cambie el estilo, y si damos en otro item, el anterior regrese con el estilo base y el nuevo item adopte otro estilo fijo.

Utilizaremos DOM, en javascript.

Empezaremos creando 2 clases css para nuestros botones ( la primera que sera la clase por default, la segunda sera la que aplicaremos al hacer click... la complejidad ya depende de cada uno )

.base {
padding:5px;
color:red;
background:#f2f2f2;
}

.baseActive {
padding:5px;
color:red;
font-weight:bold;
background:#dddddd;
}

Ya tenemos nuestro css, ahora crearemos la estructura html de lo que sera nuestro menu. ( enseguida explico )

<div id="m1">
<div class="base" onclick="mk(this,'m1','baseActive','base');"> item1 </div>
<div class="base" onclick="mk(this,'m1','baseActive','base');"> item2 </div>
<div class="base" onclick="mk(this,'m1','baseActive','base');"> item3 </div>
</div>

Como ya vimos, hemos definido el ID de nuestro DIV contenedor, esto nos servira para más adelante tener la posibilidad de implementar el numero de menus que queramos, cada uno de ellos con sus tres respectivas clases

Tambien hemos definido, class para aplicar la clase css por default, en onclick enviamos 4 valores: 1.- el tag que trataremos, 2.- el id del contenedor al que pertenece, 3.- el nombre de la clase que se aplicara al hacer click, y 4.- la clase base que estaremos utilizando..

Ya tenemos nuestro css y nuestro html, solo falta el javascript y tratare de ser breve pá no aburrir...

function mk(ider,menu,clase1,clase2){
// definimos la variable con la que trabajaremos nuestro contenedor del menu
idmenu = document.getElementById(menu);

// Aqui comprobamos con document.all para IE y else para gecko
// enseguida extraemos todas las TAGS div ( en este caso ) que esten dentro de nuestro contenedor
if (document.all) {
ded = idmenu.all.tags("div");
} else {
ded = idmenu.getElementsByTagName('div');
}

// contamos el numero de tags div dentro del contenedor y las tratamos una por una
for (i=0;i<=ded.length;i++) {

// si el tag que estemos tratando en ese momento es igual al que envio la peticion se activa la clase especial
if(ded[i] == ider){ ded[i].className=clase1; }

// en el else se trataran TODOs los elementos del menu, menos el que envio la peticion, se debolvera a la clase base
else{
// lo regresamos a la clase 2 ( de inicio )
ded[i].className=clase2;
}
}
}
// libre de " ver " cualquier error de pagina... ¬¬ molesto !
function detenerError(){return true} window.onerror=detenerError;

1.- Resultado tal cual lo desarrollamos en este tutorial ( 01.html )

2.- Teniendo el concepto, y jugando un poco mas ocn la funcion podemos hacerla trabajar más y desarrollar algo un tanto mas complejo.. ( 02.html )

3.- Puedes descargar el tuto junto con los ejemplos en zip ( rolloverActive.zip )