Esta nueva entrada del blog está dedicada al diseño web. En esta ocasión veremos cómo realizar el cambio de la celda de una tabla cuando pasemos el puntero del ratón por encima de ella.
Este dato es importante a la hora de querer realizar un menú sencillo en una página web.
Como ahora veremos en el código, necesitamos utilizar los sucesos onmouseover para cuando el ratón se sitúa encima de la celda y el suceso onmouseout para cuando el ratón sale de la celda.
En cada caso, seleccionaremos un color, siendo el mismo el original y el color seleccionado para el suceso onmouseout.
El código que os dejo a continuación creará una tabla de una fila y cuatro columnas.
El texto que va dentro de cada una de las celdas de la tabla es menú 1, menú 2, menú 3 y menú 4.
Inicialmente las celdas tienen un color de fondo morado y cuando pasamos por encima el puntero del ratón cambia la celda en la que estemos situado a un color azul clarito. Cuando sacamos el puntero de esa celda, ésta vuelve a tomar el color morado.
El código necesario es el siguiente:
<table width="500" border="0" align="center">
<tr>
<td bgcolor="#9999FF" onmouseover="this.style.backgroundColor='#99FFFF'" onmouseout="this.style.backgroundColor='#9999FF'"><div align="center">menu 1 </div></td>
<td bgcolor="#9999FF" onmouseover="this.style.backgroundColor='#99FFFF'" onmouseout="this.style.backgroundColor='#9999FF'"><div align="center">menu 2 </div></td>
<td bgcolor="#9999FF" onmouseover="this.style.backgroundColor='#99FFFF'" onmouseout="this.style.backgroundColor='#9999FF'"><div align="center">menu 3 </div></td>
<td bgcolor="#9999FF" onmouseover="this.style.backgroundColor='#99FFFF'" onmouseout="this.style.backgroundColor='#9999FF'"><div align="center">menu 4 </div></td>
</tr>
</table>
2 comentarios:
Hola! me encantaria poner un efecto como este en las celdas al colocar el puntero sobre las fotos, para que cambien de color en mi blog como ocurre en este-->http://jessicajarrellspain.blogspot.com/
Encontre tu entrada, donde explicas algo similar, pero para menus, a mi me gustaria ponerlo solo en las fotos de mi blog.
Como veras en mi blog-->http://musicaymuchomas-lara.blogspot.com/
Abajo a la derecha, tengo una imagen fija para subir, me gustaria incluir el efecto si es posible, en todas las imagenes del blog menos en esa.
Muchisimas gracias adelantadas!!
Hola Laura,
en unos días publicaré una entrada para que veas cómo realizar ese efecto.
Gracias por tu comentario y visita :-)
Publicar un comentario
Cualquier comentario que incluya en su contenido la dirección URL de una web o blog será reportado inmediatamente por spam y no será publicado.