comportamiento de enlace en el cursor, sin ser enlace

[kuei]

Hola,

Tengo una pregunta de principiante a la que no he conseguido dar respuesta. La cosa es que quiero hacer una serie de botones para navegar por la página, y quiero manejar el evento con javascript para no cambiar de página, sólo ocultar divs o mostrarlos. En esencia eso sería una barra de navegación, por lo que para que quede realmente bien el cursor debe cambiar cuando pasa por encima de los botones. Las opciones que he barajado son:

- Los botones los hago con <div> y mediante javascript hago el comportamiento. Esta opción la he probado y funcionalmente me sirve, pero no encuentro ninguna manera de hacer con CSS u otra manera que el cursor cambie a la manita.

- Los botones los hago con <a>. En esta solución consigo que el cursor cambie, pero al no saber ponerle en el campo href="" pues el comportamiento del javascript no es el que yo quiero. De hecho lo dejo en blanco y es como si me recargara la página cuando pulso.


Imagino que la respuesta será fácil, pero no la he conseguido encontrar. Muchas gracias de antemano.

[Gashe]

Haz los botones con divs y solo tienes que poner esto:

<div onClick="parent.location.href='enlace.php'" style="cursor:pointer">Boton</div>

Esto te hará el efecto del cursor, y con el onclick enviar mediante javascript a la pagina.

Espero que te sirva!

[kuei]

Muchas gracias. Es justo lo que necesitaba!!

Con la regla CSS del cursor:pointer va perfecto.

[ElJavista]

Te puedo dar otra opción, con la solución que te han dado funciona, sin embargo te propongo algo más simple. En vez de darle a un div apariencia de un botón con manita de link, haz que un link tenga apariencia de botón.

<a href="JavaScript:;" onclick="funcion();" class="boton">Link</a>

.boton {
display: block;
width: 100px;
padding: 5px;
background-color: #99CCFF;
}
.boton {
background-color: #3300CC;
}

Obviamente los valores de color, tamaño y demás son solo ejemplos. No quiero decir que mi solución sea mejor, solo quise enseñarte una alternativa. Suerte!

[kuei]

Pues ciertamente es otra opción a tener en cuenta. Y de hecho era la segunda que yo contemplaba, aunque no sabía implementar.

Sólo una pequeña duda (de novato también) con tu solución. Cuando pones href="Javascript", ¿qué pones, la ruta al fichero javascript externo? ¿El comportamiento del navegador no será intentar redireccionar a ese archivo?

El caso es que para lo que yo quiero, no me interesa que la página se recargue. Sólo modifico una parte de la página, cambiando los div que se visualizan, pero no quiero cargar otro recurso a modo de frames ni nada de eso.

Gracias a tí también. Me apunto la solución por si la puedo utilizar en otro momento.

Saludos,

[emprear]

kuei:
Para mostrar - ocultar capas, mira el siguiente ejemplo

http://foros.emprear.com/mostrarcapas/varias-capas.html

en cuanto a

<a href="JavaScript" onclick="funcion();" class="boton">Link</a>

como indicó ElJavista, creo que lo que te quizo indicar es hacer un link nulo, para que funcione el evento onclik solamente, aunque ahi hay un pequeño error
la sintáxis correcta es
<a href="javascript:;" onclick="funcion();" class="boton">Link</a>

Saludos

[ElJavista]

Iniciado por kuei

Pues ciertamente es otra opción a tener en cuenta. Y de hecho era la segunda que yo contemplaba, aunque no sabía implementar.

Sólo una pequeña duda (de novato también) con tu solución. Cuando pones href="Javascript", ¿qué pones, la ruta al fichero javascript externo? ¿El comportamiento del navegador no será intentar redireccionar a ese archivo?

El caso es que para lo que yo quiero, no me interesa que la página se recargue. Sólo modifico una parte de la página, cambiando los div que se visualizan, pero no quiero cargar otro recurso a modo de frames ni nada de eso.

Gracias a tí también. Me apunto la solución por si la puedo utilizar en otro momento.

Saludos,

Sorry, como te indicó el amigo "emprear" la intención era que ese link no direccione a ninguna parte y la forma correcta es como ya se te indicó. Suerte!