Boton rollover

gulys · #1 (**permalink**) 06/02/2011, 18:36

Buenas, se como se hace un boton rollover con los eventos onmouseover y
onmouseout, mejor dicho tengo el codigo y se como aplicarlo, ahora lo que quiero saber es como se llama y como se hace el evento para que al entrar al vinculo el boton quede con el color fijo, me explico mejor.......

Tengo 3 botones azules Inicio, Servicios, Contacto

Al pasar el mouse se hacen naranja y al sacar el mouse vuelven a azul, hasta ahi todo bien

Ahora cuando clickeo en Servicios y entra a servicios.html quiero que el boton "Servicios" quede en naranja y los otros en azul, al irme a "Contacto" que quede Contanto en naranja y los demas en azul.

No puedo expresarme bien en google por lo que no encuentro como hacerlo, y al parecer es bastante comun, ya que vi muchas paginas con esos efectos de botones.

Gracias.

Perr0 · #2 (**permalink**) 06/02/2011, 21:07

hola gulys, quizá hay muchas formas pero aquí va una idea.

en cada pagina coloca un input "hidden", uno cada nombre:
- <input type="hidden" name="paginaquetoy" value="Inicio">
- <input type="hidden" name="paginaquetoy" value="Servicios">
- <input type="hidden" name="paginaquetoy" value="Contacto">

ademas a cada boton le das como name cada uno de los valores, algo asi:
<input type="button" name="Inicio" >
<input type="button" name="Servicios" >
<input type="button" name="Contacto" >

no inclui los eventos onmouseover y onmouseout, tu se los agregas:

lo otro es que te hagas un js asi, llamado "botones.js"

Código Javascript:

Ver originalwindow.onload=function(){
bot1=document.getElementsByName("Inicio")[0];
bot2=document.getElementsByName("Servicios")[0];
bot3=document.getElementsByName("Contacto")[0];
bot1.onmouseover=bot2.onmouseover=bot3.onmouseover="this.style.color='#ff6633'";
bot1.onmouseout=bot2.onmouseout=bot3.onmouseout="this.style.color='blue'";
bot1.style.color=bot2.style.color=bot3.style.color="blue";
bot1.onclick=function(){location.href='Inicio.htm'};
bot2.onclick=function(){location.href='Servicios.htm'};
bot3.onclick=function(){location.href='Contacto.htm'};
indicador=document.getElementsByName("paginaquetoy")[0];
boton=document.getElementsByName(indicador.value)[0];
boton.style.color="#ff6633";
boton.onmouseover=null;
boton.onmouseout=null;
boton.onclick=null;
}

lo cargues en todas las paginas y en cada pagina coloque el correspondiente hidden, algo asi

pagina Inicio

Código HTML:

Ver original<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Prueba</title>
<script src="botones.js" type="text/javascript"></script>
</head>
 
<body>
<input type="hidden" name="paginaquetoy" value="Inicio">
<h1>Inicio</h1>
<input type="submit" name="Inicio" value="Inicio" />
<input type="submit" name="Servicios" value="Servicios" />
<input type="submit" name="Contacto" value="Contacto" />
</body>
</html>

pagina Servicios

Código HTML:

Ver original<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Prueba</title>
<script src="botones.js" type="text/javascript"></script>
</head>
 
<body>
<input type="hidden" name="paginaquetoy" value="Servicios">
<h1>Servicios</h1>
<input type="submit" name="Inicio" value="Inicio" />
<input type="submit" name="Servicios" value="Servicios" />
<input type="submit" name="Contacto" value="Contacto" />
</body>
</html>

pagina Contacto

Código HTML:

Ver original<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Prueba</title>
<script src="botones.js" type="text/javascript"></script>
</head>
 
<body>
<input type="hidden" name="paginaquetoy" value="Contacto">
<h1>Contacto</h1>
<input type="submit" name="Inicio" value="Inicio" />
<input type="submit" name="Servicios" value="Servicios" />
<input type="submit" name="Contacto" value="Contacto" />
</body>
</html>

pruebalos

salu2

gulys · #3 (**permalink**) 06/02/2011, 22:24

Ahora voy a probarlo, se agradece el esfuerzo. Saludos!

EDIT:

No logro hacerlo andar, nose si me exprese bien, quiero algo como esta botonera, la de arriba

http://www.flynax.com/

Perr0 · #4 (**permalink**) 07/02/2011, 06:16

bueno, yo entendi botones y los asemejo al type button de un input
eso se llaman etiquetas TAB y asimila una especie de expediente...

déjame arreglarlo y te mando el ejemplo

anoto lo siguiente, hay dos tipos de TAB, uno que no va a otra página sino que la carga dentro, ya sea con ajax o que tenga divs ocultos y se van mostrando, el ejemplo que me mostraste carga páginas diferentes.

lo haré lo mas simple y lo estudias, salu2

Perr0 · #5 (**permalink**) 07/02/2011, 07:40

Listo, esta validado en IE, FF, Ch

prueba y descarga el código

http://perr0.netii.net/exs/etiquetasTAB/Inicio.htm

salu2

gulys · #6 (**permalink**) 07/02/2011, 10:29

Ahora si!, ya logre entender como aplicarlo

Me pidio contraseña el rar y puse tu nick, asi que ya tengo el codigo

Muchisimas gracias.