Menú CSS con cambio de color en los enlaces.

En categoría: Menús CSS

Este JavaScript cambia el color de fondo del texto que utilizamos como enlace hacia otra página. El Script utiliza código CSS y JavaScript para realizar cambios en las propiedades de las celdas y enlaces de la página. Si sabemos algo de CSS podemos configurar el ejemplo a nuestro gusto, asignando los atributos y valores correspondientes a cada elemento.

| Descripción del ejemplo JavaScript

Lo primero que encontramos en la página es el Script que nos permite definir mediante variables el color de fondo para los enlaces del menú. Las variables fcolor1, fcolor2 y fcolordefault guardan un valor de color en sistema hexadecimal. El definir en uns variable los colores para cada uno de los fondos y texto permite controlar mediante una sola línea los valores que tomarán todos los elementos que utilicen esta variable. Además el código nos queda "más a mano" para su posterior configuración.

Mediante la etiqueta <STYLE> definimos el valor de algunos atributos para los enlaces del menú.

font-size: tamaño de fuente
font-family: tipo de fuente
text-decoration: subrayado del enlace
color: color del enlace de texto
font-weight: estilo de fuente negrita

Para cambiar el color de fondo en la celda que contiene al enlace utilizamos el evento onMouseOver. Como valor escribimos la propiedad bgColor y damos el valor de la variable fcolor[1][2]. Mediante el evento onClick definimos que el objeto window.location tome como valor la URL escrita. El evento onMouseOut cambia el color de la celda al valor definido en fcolordefault.

Para complementar el ejemplo utilizamos una imagen que aparece y desaparece al lado del texto del enlace. Este cambio en la propiedad visibility la controlamos mediante los eventos onMouseOver y onMouseOut de la fila que contiene el enlace y la imagen. Si agregamos más enlaces al menú tenemos que asegurarnos de cambiar los id para cada una de las imágenes que acompañan al mismo.

Este ejemplo muestra como es posible controlar con JavaScript las propiedades CSS de los elementos que conforman el documento HTML.

Información relativa al Script

Compatible con: Internet Explorer

Internet Explorer

Firefox

Tamaño del Script: 3KB

Probar el Script

Temas relacionados a este Script

Ejemplo JavaScript para cambiar el color de fondo del texto que utilizamos como enlace
dentro de nuestro menú CSS.

Código fuente del script:

<HTML>
<HEAD>

<script language="javascript">

/* Definimos el color primario que tomará el fondo 
del enlace cuando el puntero del Mouse active el mismo */
fcolor1 = '#206080'
// Definimos el color secundario
fcolor2 = '#2060c0'
/* Definimos el color que tomará el fondo 
cuando no está activo el enlace */
fcolordefault = '#ffffff'

</script>

<STYLE type="text/css">
/* Controlamos por medio de CSS algunas propiedades de los enlaces */
a:hover.tditem {
font-size: 12px;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: underline;
color: #ffffff;
font-weight: bold;
}
a.tditem {
font-size: 12px;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
color: 806020;
font-weight: bold;
}

</STYLE>

</HEAD>

<BODY>

<TABLE border="0" cellpadding="0" cellspacing="0" align="left" height="80px" width="100px">
	<TR>
		<TD height="30" colspan="2">
			<B>Mis enlaces</B>
		</TD>
	</TR>
	

	<TR onMouseOver="document.getElementById('bult1').style.visibility = 'visible';"
	onMouseOut="document.getElementById('bult1').style.visibility = 'hidden';">

<TD onMouseOver="bgColor=fcolor1" onClick="window.location='page1.html'" 
		style="cursor:pointer; " onMouseOut="bgColor=fcolordefault">
		<a href="page1.html" class="tditem">Enlace 1</a>
		<IMG src="bulet1.gif" style="visibility:hidden" id="bult1" 
		width="16" height="16" align="absmiddle">
		</TD>
		<TD width="20%"></TD>
		
	</TR>
	
	<TR onMouseOver="document.getElementById('bult2').style.visibility = 'visible';" 
	onMouseOut="document.getElementById('bult2').style.visibility = 'hidden';">
	
		<TD onMouseOver="bgColor=fcolor2" onClick="window.location='page2.html'" 
		style="cursor:pointer; " onMouseOut="bgColor='#FFFFFF'">
		<a href="page2.html" class="tditem">Enlace 2</a>
		<IMG src="bulet1.gif" style="visibility:hidden" id="bult2" 
		width="16" height="16" align="absmiddle">
		</TD>
		<TD></TD>
		
	</TR>
	
	<TR onMouseOver="document.getElementById('bult3').style.visibility = 'visible';" 
	onMouseOut="document.getElementById('bult3').style.visibility = 'hidden';">
	
		<TD onMouseOver="bgColor=fcolor1" onClick="window.location='page3.html'" 
		style="cursor:pointer; " onMouseOut="bgColor='#FFFFFF'">
		<a href="page3.html" class="tditem">Enlace 3</a>
		<IMG src="bulet1.gif" style="visibility:hidden" id="bult3" 
		width="16" height="16" align="absmiddle">
		</TD>
		<TD></TD>
		
	</TR>
	
</TABLE>

</BODY>
</HTML>

	Temas relacionados a este Script:
	Menú CSS con efecto Flash más descripción Menú simple en CSS con enlaces y descripción Menú simple horizontal con efecto Scrool Menú CSS con efecto SlideIn Menú css con efecto SlideIn automático Menú css estático siempre visible Menú de navegación horizontal desplegable en CSS Menú CSS con cambio de color en el fondo de los enlaces

Comentarios Recibidos sobre: Menú CSS con cambio de color en el fondo de los enlaces

Todavía nadie comentó este artículo.
Para insertar un comentario hacé clic en "Comentar artículo"

Comentar Artículo

Agradecemos todos los comentarios. Gracias por ayudarnos a mejorar el sitio.
Importante: Los comentarios están para ampliar el artículo propuesto en esta página, proponer o responder alguna consulta de otro visitante. En ningún caso nos hacemos responsables del contenido publicado en los comentarios. En el caso que formules una pregunta y ésta no sea respondida, puedes solicitarnos ayuda desde el formulario de ayuda aunque no te aseguramos una respuesta inmediata.