Cambiar colores de botones

krlosva · #1 (**permalink**) 13/05/2005, 02:52

Muy buenas!!!
Como puedo conseguir el fecto de...que cuando pinchas en un boton de un menu, mientras estes dentro de ese apartado, el boton que has pinchado sea de color distinto al del resto de botones?

Muchas gracias!!

franju · #2 (**permalink**) 13/05/2005, 05:21

Bueno no se si sera esto lo quieres pero si usas dreamweaver para programar tus asp tienes una opcion en la que puedes poner un boton por ejemplo rojo i cuando pases por encima de el te salga verde ( por decir algo). dreamweaver lo que hace es poner una imagen i cuando pasas por encima de ella te la cambia por la que has elegido.

esta opcion la encuentras en insertar --> imagen objeto --> image rollover (es que mi dreamweaver esta en ingles).

Si ves que no puedes o no tienes dreamweaver hazmelo saber y te envio el codigo de como lo puedes hacer.

Espero que te haya ayudado

Un saludo

Fran

krlosva · #3 (**permalink**) 13/05/2005, 05:50

Es posible...q en vez de cambiartelo cuando pases el cursor por encima...te lo cambie una vez lo pinches(selecciones) y se mantenga cambiado hasta que piches en otro boton(en el cual , cambiara el nuevo boton)?
Joder, q mal me he explicao, pero......espero q se me entienda:pjejeje
saludos;)

franju · #4 (**permalink**) 13/05/2005, 08:16

De esta manera no solo es possible que cuando pases por encima cambie pero en el momento que sales del boton vuelves a tenerlo igual que antes i cuando pinches en boton se pone como el primero.

Lo q me pides no se como se hace puedo mirar-lo a ver si podemos ver como se puede hacer a lo mejor con javascript se podria hacer. pero no lo se

Un saludo

Fran

angsanchez · #5 (**permalink**) 13/05/2005, 12:11

Hola
Básicamente es lo mismo, cambiando el onMouseOver por onClick el color quedará cambiado tras hacer clic. Luego, para que se recupere al pasar a otra sección, tendrás que usar una función JS que "desactive" todos los demás botones cada vez que se activa uno.
Si no te sale, pega el ejemplo que tengas ya hecho (o el que te hace DW) y lo trabajamos.

angsanchez · #6 (**permalink**) 13/05/2005, 12:38

Aquí estoy de nuevo.
Este ejemplo funciona con "n" botones en sus dos variantes, normal y pulsado (2n imágenes de 110x20pix); deben llamarse boton1.gif, boton1a.gif, boton2.gif, boton2a.gf, etc.

Código HTML:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>menú botones</title>
<script type="text/javascript">
var n=5
var btn = new Array(n), btna = new Array(n)
for (i=0;i<n;i++) 
{	btn[i] = new Image(110,20); btna[i] = new Image(110,20) 
	btn[i].src = "boton"+i+".gif"
	btna[i].src = "boton"+i+"a.gif"
}

function hazTabla()
{	var tx = '<table border="0" cellspacing="0" cellpadding="0">'
	for (i=0;i<n;i++) 
	{	tx += '<tr><td><img name="btn'+i+'" src="boton'+i+'.gif" onClick="elige('+i+')"></td></tr>'
	}
	tx += '</table>'
	document.writeln(tx)  
}
function elige(j)
{	for (i=0;i<n;i++)
	{	if (i==j) document.images['btn'+i].src=btna[i].src
		else document.images['btn'+i].src=btn[i].src
	}
}
</script>
</head>

<body>
<script type="text/javascript">hazTabla()</script>
</body>
</html>

angsanchez · #7 (**permalink**) 13/05/2005, 13:35

Me he picado con esto...
Aquí va otra versión que utiliza CSS y no imágenes (con lo cual todos los botones tienen el mismo color, en la anterior podían ser distintos):

Código HTML:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>menú botones</title>
<script type="text/javascript">
var n=5
function hazTablaCSS()
{	var tx = '<table id="menuBotones">'
	for (i=0;i<n;i++) 
	{	tx += '<tr><td id="boton'+i+'" class="normal" onClick="eligeCSS('+i+')">Opción '+i+'</td></tr>'
	}
	tx += '</table>'
	document.writeln(tx)  
}
function eligeCSS(j)
{	for (i=0;i<n;i++)
	{	var celda=document.getElementById('boton'+i)
		if (i==j) celda.className="pulsado"
		else celda.className="normal"
	}
}
</script>
<style type="text/css">
#menuBotones { border:0; font-family:Arial, Helvetica, sans-serif; font-size:0.8em; }
#menuBotones td { margin:5px; padding:1px 7px; }
.normal { background-color:#cccccc; border:2px outset #cccccc; color:#000000;}
.pulsado { background-color:#aa0000; border:2px inset #aa0000; color:#ffffff; }
</style>
</head>

<body>
<script type="text/javascript">hazTablaCSS()</script>
</body>
</html>

josepruiz · #8 (**permalink**) 14/06/2009, 06:50

Hola Fran,

Puedes porfavor, decirme a mi ese código, uso jaleston, que acepta códigod javascript y html, [email protected]

un saludo gracias

Cita:

Iniciado por franju

Bueno no se si sera esto lo quieres pero si usas dreamweaver para programar tus asp tienes una opcion en la que puedes poner un boton por ejemplo rojo i cuando pases por encima de el te salga verde ( por decir algo). dreamweaver lo que hace es poner una imagen i cuando pasas por encima de ella te la cambia por la que has elegido.

esta opcion la encuentras en insertar --> imagen objeto --> image rollover (es que mi dreamweaver esta en ingles).

Si ves que no puedes o no tienes dreamweaver hazmelo saber y te envio el codigo de como lo puedes hacer.

Espero que te haya ayudado

Un saludo

Fran

JavierB · #9 (**permalink**) 14/06/2009, 07:14

El mensaje original es de hace más de 4 años. Por favor, no reviváis temas tan antiguos.

Saludos,