Jueves, 17 de febrero de 2005

Eventos en capas

Tras un pequeño receso causado por la cantidad de trabajo que tengo, aquí os traigo un pequeño tutorial que me han pedido sobre la utilización de eventos en capas.

Muchos seguro que habéis usado javascript para conseguir efectos muy parecidos a los que os explico en este mini-tutorial, pero que a fin de cuentas son más incómodos, por lo menos, los pocos que he podido ver, ya que tenías que tocar los estilos tanto en el html como en el propio javascript. En cambio, con este método, se simplifica a tener que modificar únicamente la hoja de estilos para cambiar totalmente el efecto.

En mi ejemplo voy a utilizar unos estilos muy simples, el resto, lo dejo a voluntad de vuestra imaginación.

Primer paso: Creamos dos clases diferentes, una de ellas para el evento 'onMouseOver' (Este evento es cuando situamos el puntero del ratón encima del elemento) y otro distinto para el evento 'onMouseOut' (Lógicamente, para cuando apartamos el puntero del ratón del elemento), si os fijáis he utilizado la propiedad cursor: pointer, esto lo hago para que al situar el ratón encima, aparezca el cursor de vínculo. En mi caso utilizaré los siguientes estilos:

.mouseout { /* Estilo para evento onMouseOut */
background: #F5F5F5;
color: #808080;
border: 1px solid #C0C0C0;
padding: 2px;
}

.mouseover { /* Estilo para evento onMouseOver */
background: #C0C0C0;
color: #808080;
border: 1px dotted #808080;
padding: 2px;
cursor: pointer;
}

Segundo paso: Elegir y crear el elemento al que deseemos aplicar el estilo en los eventos (Ojo que debemos tener en cuenta que utilizamos CSS, y algunos atributos de CSS no se pueden aplicar a determinados elementos). En mi caso voy a utilizar una capa <div></div>.

Tercer paso: Le aplicamos los estilos de evento a la capa, de la siguiente forma:

<div id="capa" class="mouseout" onMouseOver="this.className='mouseover'" onMouseOut="this.className='mouseout'"></div>

No es imprescindible ponerle un id a la capa, pero yo lo he hecho, lo que si hay que tener siempre en cuenta es ponerle la clase mouseout independientemente de que utilicemos un evento onMouseOut, ya que una vez se cargue el html, como no se ha ejecutado todavía este evento, el estilo no se cargaría y por lo tanto no funcionaría correctamente. Otro consejo es que la propiedad this.className, la escribáis tal cual, por que más de una vez me he encontrado que si no pongo la N en mayúsculas, el evento no ha funcionado.

Y si habéis seguido los pasos correctamente, los estilos de los eventos quedarían de la siguiente forma:



Este método me fué muy útil en su día, y espero que a vosotros os sea igual de útil de lo que me fué a mí.

d-_-b Mientras tanto escucho: Suzann - Little Bandit

Puesto en: CSS | Comentarios (9) | Referencias (0) | Permalink