Foros del Web » Programando para Internet » Javascript »

Realizar un efecto de pestañas dinamicas

Estas en el tema de Realizar un efecto de pestañas dinamicas en el foro de Javascript en Foros del Web. Buenas a todos necesito saber como podria realizar un efecto en el que hubieran varias pestañas en vertical y al pasar el raton por encima ...
  #1 (permalink)  
Antiguo 07/01/2008, 11:31
 
Fecha de Ingreso: septiembre-2007
Mensajes: 51
Antigüedad: 17 años, 5 meses
Puntos: 1
Realizar un efecto de pestañas dinamicas

Buenas a todos necesito saber como podria realizar un efecto en el que hubieran varias pestañas en vertical y al pasar el raton por encima se ocultaran unas y aparecieran otras.

aqui podeis ver un ejemplo de lo que necesito.

http://www.apple.com/es/mac/

en el lateral derecho donde pone las mejores descargas / los mejores widgets / novedades.

Saludos y gracias por adelantado
  #2 (permalink)  
Antiguo 07/01/2008, 11:35
Avatar de popobcn
Moderador
 
Fecha de Ingreso: noviembre-2006
Ubicación: Cerdanyola del Vallès
Mensajes: 3.892
Antigüedad: 18 años, 4 meses
Puntos: 1142
Re: Realizar un efecto de pestañas dinamicas

Buenas,

Aqui encontrarás un script completito para hacer exactamente lo que deseeas. Tan solo has de adaptar el mismo con tu hoja de estilos personalizada...

http://www.dynamicdrive.com/dynamici...daccordion.htm

Saludos
  #3 (permalink)  
Antiguo 07/01/2008, 11:40
Avatar de popobcn
Moderador
 
Fecha de Ingreso: noviembre-2006
Ubicación: Cerdanyola del Vallès
Mensajes: 3.892
Antigüedad: 18 años, 4 meses
Puntos: 1142
Re: Realizar un efecto de pestañas dinamicas

... Una puntualización más, aprovechando el código al que hago referencia... Para conseguir el mismo efecto que en la página de tu ejemplo, tan solo tendrias que cambiar el código de los enlaces de esto

Código PHP:
<a href="#" onClick="ddaccordion.expandone('mypets', 0); return false">Expand 1st header</a> | <a href="#" onClick="ddaccordion.collapseone('mypets', 0); return false">Collapse 1st header</a> | <a href="#" onClick="ddaccordion.toggleone('mypets', 1); return false">Toggle 2nd header</a
a esto
Código PHP:
<a href="#" [B]onMouseOver[/B]="ddaccordion.expandone('mypets', 0); return false">Expand 1st header</a> | <a href="#" onClick="ddaccordion.collapseone('mypets', 0); return false">Collapse 1st header</a> | <a href="#" [B]onMouseOver[/B]="ddaccordion.toggleone('mypets', 1); return false">Toggle 2nd header</a
Con el fin de que cuando pases el puntero del raton sobre la opción/enlace se abra inmediatamente el div con el contenido.

Saludos
  #4 (permalink)  
Antiguo 07/01/2008, 11:46
 
Fecha de Ingreso: septiembre-2007
Mensajes: 51
Antigüedad: 17 años, 5 meses
Puntos: 1
Re: Realizar un efecto de pestañas dinamicas

Muchísimas gracias por la información, por la variación del código y sobretodo por la velocidad de respuesta, muy agradecido.
  #5 (permalink)  
Antiguo 07/01/2008, 11:54
Avatar de GatorV
$this->role('moderador');
 
Fecha de Ingreso: mayo-2006
Ubicación: /home/ams/
Mensajes: 38.567
Antigüedad: 18 años, 9 meses
Puntos: 2135
Re: Realizar un efecto de pestañas dinamicas

Tema trasladado a Javascript.

Por favor publica en los foros correctos.
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 12:16.