DyDy
colaborador/moderador 1º full
Cantidad de envíos: 12912
Puntos de posteo: 8310
inscripción: 31/10/2007
 | | Tema: Creando un menu en Scroll con textos e imagenes Vie Nov 09, 2007 4:47 pm | |
| Hola de
nuevo, aquí hoy vamos a aprender como crear un menú en forma de scroll, ya
sea con imágenes que nos servirán de enlaces, con solo texto o con links en
forma de texto. Y bueno se preguntaran ¿que es scroll? , pues bien scroll
quiere decir en palabras castizas jejejje, una acción que nos permite
desplazarnos por una ventana, ya sea de arriba a abajo o viceversa, como lo
que hacemos cuando estamos en alguna pagina y movemos la barra de
desplazamiento para poder ver toda la pagina, o todo un documento. Muy bien
explicado que es un scroll o que significa esa acción, nos vamos a disponer
a crear mediante un código un menú de navegación con efecto de scroll. He de
avisarles que este código funciona correctamente con IExplorer y con
Opera, no funciona con Mozilla. 1-Lo primero que les mostrare es
el código y luego les diré las partes modificables de dicho código así que
lo pueden copiar y pegar en el block de notas o donde les quede mas fácil,
pero creo que mas fácil que el block de notas no hay, así que copienlo y
péguenlo, para que luego puedan hacer sus modificaciones, este será el
código para colocar en su scroll solo frases que vayan subiendo o bajando
según lo elijan Uds., he modificado el menú para 4 opciones así que escojan
cual quieren o cual les gusta o cual necesitan, mejor dicho entre gustos no
hay disgustos jejejje, así que este código que sigue solo es para que vayan
pasando frases hechas por Uds. en una especie de cajita en la
posición donde
quieran que se vaya a ver......1-| Código: | <SCRIPT LANGUAGE="JavaScript"> document.write('<marquee id="iescroller" direction="up" width="250" height="75" scrollamount="2" scrolldelay="100" style="border:3 solid red;background-color:black">'); iescroller.onmouseover=new Function("iescroller.scrollAmount=0"); iescroller.onmouseout=new Function("iescroller.scrollAmount=2"); document.write('<font size="3" face="Monotype corsiva" color="Yellow">') document.write('<Div align="center">AQUI FRASES QUE SE VERAN</div><br><br>'); document.write('<Div align="center">AQUI FRASES QUE SE VERAN</div><br><br>'); document.write('<Div align="center">AQUI FRASES</div><br><br>'); document.write('<Div align="center">AQUI MAS FRASES</div><br><br>'); document.write('</font>'); document.write('</marquee>'); </script> |
2-Muy bien ahora vamos con el segundo
código que será para colocar solo imágenes en vez de frases, o sea
para que se vean solo imágenes subiendo o bajando en el menú, según Uds. elijan,
porque como ya les dije, este código se puede modificar a nuestro gusto. ahí va
el segundo código, para que se vean solo imágenes, me falta decirles que aquí en
este código, deben ajustar el tamaño de sus imágenes para que sea igual al menú,
me explico:por ejemplo este menú en su código dice que tiene un ancho(widht) de
200 x un alto(heigth) de 75px, pues deben usar imágenes de ese mismo tamaño para
que no se salga de su menú y queden las imágenes perfectamente
alineadas.2-| Código: | <SCRIPT LANGUAGE="JavaScript"> document.write('<marquee id="iescroller" direction="up" width="250" height="75" scrollamount="2" scrolldelay="100" style="border:3 solid red;background-color:black">'); iescroller.onmouseover=new Function("iescroller.scrollAmount=0"); iescroller.onmouseout=new Function("iescroller.scrollAmount=2"); document.write('<font size="3" face="Monotype corsiva" color="Yellow">') document.write('<Div align="center"><img src="AQUI LA URL DE LA IMAGEN"/></div><br><br>'); document.write('<Div align="center"><img src="AQUI LA URL DE LA IMAGEN"/></div><br><br>'); document.write('<Div align="center"><img src="AQUI LA URL DE LA IMAGEN"/></div><br><br>'); document.write('<Div align="center"><img src="AQUI LA URL DE LA IMAGEN"/></div><br><br>'); document.write('</font>'); document.write('</marquee>'); </script> |
3-Sigamos con la tercera opción, que
es colocar links (urls,enlaces,paginas) en forma de texto y al
pasar el mouse por encima de alguno de estos textos, se pare y podamos dar clic
en el, para que nos lleve a la pagina enlazada en dicho texto, ahí
va.....| Código: | <SCRIPT LANGUAGE="JavaScript"> document.write('<marquee id="iescroller" direction="up" width="250" height="75" scrollamount="2" scrolldelay="100" style="border:3 solid red;background-color:black">'); iescroller.onmouseover=new Function("iescroller.scrollAmount=0"); iescroller.onmouseout=new Function("iescroller.scrollAmount=2"); document.write('<font size="3" face="Monotype corsiva" color="Yellow">') document.write('<Div align="center"><a href="AQUI URL DE TU LINK">AQUI NOMBRE QUE SE VERA DEL LINK</a></div><br><br>'); document.write('<Div align="center"><a href="AQUI URL DE TU LINK">AQUI NOMBRE QUE SE VERA DEL LINK</a></div><br><br>'); document.write('<Div align="center"><a href="AQUI URL DE TU LINK">AQUI NOMBRE QUE SE VERA DEL LINK</a></div><br><br>'); document.write('<Div align="center"><a href="AQUI URL DE TU LINK">AQUI NOMBRE QUE SE VERA DEL LINK</a></div><br><br>'); document.write('</font>'); document.write('</marquee>'); </script> |
4-Ok ya este es el ultimo código, se
trata de colocar imágenes que sirvan de link, o sea que al pinchar
en ellas te lleven a determinada pagina.....
| Código: | <SCRIPT LANGUAGE="JavaScript"> document.write('<marquee id="iescroller" direction="up" width="250" height="75" scrollamount="2" scrolldelay="100" style="border:3 solid red;background-color:black">'); iescroller.onmouseover=new Function("iescroller.scrollAmount=0"); iescroller.onmouseout=new Function("iescroller.scrollAmount=2"); document.write('<font size="3" face="Monotype corsiva" color="Yellow">') document.write('<Div align="center"><a href="AQUI URL DEL SITIO" target="_blank"><img src="AQUI LA URL DE LA IMAGEN"</a></div><br><br>'); document.write('<Div align="center"><a href="AQUI URL DEL SITIO" target="_blank"><img src="AQUI LA URL DE LA IMAGEN"</a></div><br><br>'); document.write('<Div align="center"><a href="AQUI URL DEL SITIO" target="_blank"><img src="AQUI LA URL DE LA IMAGEN"</a></div><br><br>'); document.write('<Div align="center"><a href="AQUI URL DEL SITIO" target="_blank"><img src="AQUI LA URL DE LA IMAGEN"</a></div><br><br>'); document.write('</font>'); document.write('</marquee>'); </script> |
[size=16]Muy bien , ya tenemos las 4
opciones o los 4 códigos, así que ahora les diré que partes de esos códigos
son modificables a nuestros gustos:
1-Donde dice "dirección="up",
lo podemos cambiar el "up" por "down", que quiere decir eso? pues que
nuestros enlaces o imágenes podrán ir o para arriba(up) o para
abajo(down)segun lo elijamos.
2-Donde dice "widht"250 y "heigth"75,
es su tamaño , o sea aquí puedes modificarle el tamaño.width=ancho y height=alto.
3-Donde dice "scrollamount"=2,
quiere decir la velocidad con que salen, los links, los textos o las
imágenes, así que entre mas alto coloques ese numero el 2 mas rápido saldrán
tus links, etc.
4-Donde dice style="border:3
solid red,aqui puedes cambiarle el tamaño del borde y el color.
5-Donde dice background-color:black,
aquí es el color de fondo de tu menú, recuerda si lo vas a cambiar, escribe
el color en ingles.
6-Donde dice document.write('
size="3" face="Monotype cursiva"
color="Yellow">').
aquí puedes cambiarle el tipo de letra a las frases o
enlaces, también puedes modificarle el tamaño(size)de la letra y también
puedes cambiarle el color, recuerda escribir el color en ingles.
Muy bien amigos eso es todo,
no es tan difícil como parece, además es muy divertido crear tus propios
menús, espero les sirva de ayuda este tuto y puedan hacer sus creaciones mas
fácil con esta ayuda. Hasta pronto.
http://didita.iespana.es/scroll.htm |
|
