Ventanas emergentes, que se abren y cierran al clicar en ellas para página web
Hola quiero que me ayudes con este problema que tengo quiero saber como es que se hace esto.
Visita esta página web http://www.gapadventures.com en el apartado donde dice testimonials.
¿Quiero sabes como se hace que cuando le hacen clic en more se abre una ventanita con todo el texto y tiene la opción de cerrar también? Quiero hacer algo así para mi web.
Otra cosa más si tu actualizas la página te darás cuenta que cambia de testimonio cada que actualizas no entiendo como puedo hacer eso que cada que entren a mi página cambie los testimonios.
Gracias...
Visita esta página web http://www.gapadventures.com en el apartado donde dice testimonials.
¿Quiero sabes como se hace que cuando le hacen clic en more se abre una ventanita con todo el texto y tiene la opción de cerrar también? Quiero hacer algo así para mi web.
Otra cosa más si tu actualizas la página te darás cuenta que cambia de testimonio cada que actualizas no entiendo como puedo hacer eso que cada que entren a mi página cambie los testimonios.
Gracias...
1 Respuesta
Respuesta de greeham
1
A ver, para hacer esas dos cosas necesitas tener nociones de programación en javascript.
Lo de las ventanitas se llaman "capas" o "layers". Puedes obtener el código para generar algo similar en:
http://www.codelifter.com/main/javascript/dragablelayer.html
Lo de que cambien las noticias o testimonios pues simplemente necesitas una función que te genere un número aleatorio de entre las noticias que tengas.
Por ejemplo, imagínate que tienes un vector de noticias llamado noticias[] que contiene 10 noticias.
Bien, pues entonces deberás primero calcular un número aleatorio POR entre el 1 y el 10 para luego mostrar la noticias[X]
La función que calcula ésto en Javascript es:
function Random10() {
random_num = (Math.round((Math.random()*9)+1));
return(random_num);
}
Lo de las ventanitas se llaman "capas" o "layers". Puedes obtener el código para generar algo similar en:
http://www.codelifter.com/main/javascript/dragablelayer.html
Lo de que cambien las noticias o testimonios pues simplemente necesitas una función que te genere un número aleatorio de entre las noticias que tengas.
Por ejemplo, imagínate que tienes un vector de noticias llamado noticias[] que contiene 10 noticias.
Bien, pues entonces deberás primero calcular un número aleatorio POR entre el 1 y el 10 para luego mostrar la noticias[X]
La función que calcula ésto en Javascript es:
function Random10() {
random_num = (Math.round((Math.random()*9)+1));
return(random_num);
}
Ok sabes ya lo tengo eso de las ventanas, ahora mi problema es solo eso de los mensajes aleatorios como es que se hace si me lo puedes explicar detallado paso a paso.
Gracias.
Gracias.
Ante todo gracias por tu tiempo. Esta muy bueno lo que me explicas pero ok ahora quiero complicarlo más esto quiero que cada noticia tenga su imagen/foto y un enlande en una palabra more... que haga visible su layer que le corresponde.
Gracias y eso es lo ultimo...
Gracias y eso es lo ultimo...
Te lo explicaré con un ejemplo real.
Créate un html vacío y copia y pega este código:
<script language="JavaScript">
<!--
noticias = new Array
noticias[1]="Noticia 1"
noticias[2]="Noticia 2"
noticias[3]="Noticia 3"
noticias[4]="Noticia 4"
noticias[5]="Noticia 5"
noticias[6]="Noticia 6"
noticias[7]="Noticia 7"
noticias[8]="Noticia 8"
noticias[9]="Noticia 9"
noticias[10]="Noticia 10"
random_num = (Math.round((Math.random()*9)+1))
document.write(noticias[random_num]);
-->
</script>
Guárdalo y ábrelo con el navegador.
Actualiza varias veces y verás como la frase cambia cada vez aleatoriamente.
Bien, pues ese concepto es el que necesitas adaptar a tus necesidades.
Ve haciendo pruebas y verás como al final lo sacas.
Suerte.
Créate un html vacío y copia y pega este código:
<script language="JavaScript">
<!--
noticias = new Array
noticias[1]="Noticia 1"
noticias[2]="Noticia 2"
noticias[3]="Noticia 3"
noticias[4]="Noticia 4"
noticias[5]="Noticia 5"
noticias[6]="Noticia 6"
noticias[7]="Noticia 7"
noticias[8]="Noticia 8"
noticias[9]="Noticia 9"
noticias[10]="Noticia 10"
random_num = (Math.round((Math.random()*9)+1))
document.write(noticias[random_num]);
-->
</script>
Guárdalo y ábrelo con el navegador.
Actualiza varias veces y verás como la frase cambia cada vez aleatoriamente.
Bien, pues ese concepto es el que necesitas adaptar a tus necesidades.
Ve haciendo pruebas y verás como al final lo sacas.
Suerte.
Ok gracias
¿Vaya veo que vas complicando las cosas eh? ;)
Bien, sólo comentarte que dentro del texto de la noticia puedes meter código HTML. Por tanto las posibilidades son casi infinitas.
Prueba por ejemplo con alguna cosa como:
noticias[1]="<img src='imagen1.jpg'><br>Texto de prueba<br><a href='http://www.google.es' target='_blank'>Abrir Google</a>"
Fíjate en el uso de las comillas simples ' dentro de la cadena de texto.
Creo que con esto más o menos lo tendrás resuelto.
Un abrazo.
Bien, sólo comentarte que dentro del texto de la noticia puedes meter código HTML. Por tanto las posibilidades son casi infinitas.
Prueba por ejemplo con alguna cosa como:
noticias[1]="<img src='imagen1.jpg'><br>Texto de prueba<br><a href='http://www.google.es' target='_blank'>Abrir Google</a>"
Fíjate en el uso de las comillas simples ' dentro de la cadena de texto.
Creo que con esto más o menos lo tendrás resuelto.
Un abrazo.
