Foros del Web » Creando para Internet » HTML »

comportamiento de enlace en el cursor, sin ser enlace

Estas en el tema de comportamiento de enlace en el cursor, sin ser enlace en el foro de HTML en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 11/08/2010, 06:37
 
Fecha de Ingreso: julio-2010
Mensajes: 7
Antigüedad: 7 años, 4 meses
Puntos: 1
comportamiento de enlace en el cursor, sin ser enlace

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.
  #2 (permalink)  
Antiguo 11/08/2010, 06:43
 
Fecha de Ingreso: agosto-2010
Ubicación: Madrid
Mensajes: 53
Antigüedad: 7 años, 4 meses
Puntos: 1
Respuesta: comportamiento de enlace en el cursor, sin ser enlace

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!
  #3 (permalink)  
Antiguo 11/08/2010, 06:57
 
Fecha de Ingreso: julio-2010
Mensajes: 7
Antigüedad: 7 años, 4 meses
Puntos: 1
Respuesta: comportamiento de enlace en el cursor, sin ser enlace

Muchas gracias. Es justo lo que necesitaba!!

Con la regla CSS del cursor:pointer va perfecto.
  #4 (permalink)  
Antiguo 11/08/2010, 08:06
Avatar de ElJavista
Colaborador
 
Fecha de Ingreso: marzo-2007
Ubicación: Lima Perú
Mensajes: 2.231
Antigüedad: 10 años, 9 meses
Puntos: 67
Respuesta: comportamiento de enlace en el cursor, sin ser enlace

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!

Última edición por ElJavista; 11/08/2010 a las 20:25
  #5 (permalink)  
Antiguo 11/08/2010, 12:34
 
Fecha de Ingreso: julio-2010
Mensajes: 7
Antigüedad: 7 años, 4 meses
Puntos: 1
Respuesta: comportamiento de enlace en el cursor, sin ser enlace

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,
  #6 (permalink)  
Antiguo 11/08/2010, 15:51
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 10 años, 5 meses
Puntos: 1567
Respuesta: comportamiento de enlace en el cursor, sin ser enlace

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

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

en cuanto a
Cita:

<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
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #7 (permalink)  
Antiguo 11/08/2010, 20:27
Avatar de ElJavista
Colaborador
 
Fecha de Ingreso: marzo-2007
Ubicación: Lima Perú
Mensajes: 2.231
Antigüedad: 10 años, 9 meses
Puntos: 67
Respuesta: comportamiento de enlace en el cursor, sin ser enlace

Cita:
Iniciado por kuei Ver Mensaje
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!

Etiquetas: cursor, enlace
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 14:19.