Aqui unos buenos codigos para hacer que el titulo se mueva de diferentes formas, al igual que la barra de estado, donde ademas del movimiento, un codigo para mostrar varios mensajes en ella.
Movimiento en el Titulo de la Pagina
Codigo 1. De derecha a izquierda - (Mira el ejemplo)
Pegalo dentro de las etiquetas <HEAD> y </HEAD>
Nota: Solo puedes editar lo que esta en Rojo!
<script type="text/JavaScript">
var repeat=1 //enter 0 to not repeat scrolling after 1 run, othersise, enter 1
var title=document.title
var leng=title.length
var start=1
function titlemove() {
titl=title.substring(start, leng) + title.substring(0, start)
document.title=titl
start++
if (start==leng+1) {
start=0
if (repeat==0)
return
}
setTimeout("titlemove()",150)
}
if (document.title)
titlemove()
</script>
----------------------------------
setTimeout("titlemove()",150), esta línea se refiere a la velocidad del movimiento del titulo.
Lo mas probable es que cuando se mueva el titulo se junte el final con el inicio del mismo. Para evitarlo puedes usar un espacio al final del titulo con "& n b s p ;" (todo junto incluyendo el punto y coma pero no las comillas) porque el HTML no lee un espacio si no hay otro caracter al lado.
Ejemplo: <title>Creando Web - Codigos y recursos</title> al estar en movimiento se vería: Creando Web - Codigos y recursosCreando Web - Codigos y recursos.
Entonces hacemos esto: <title>Creando Web - Codigos y recursos& n b s p ;</title>
A menos que uses blogger, wordpress o cualquiera de esos en que ponen el titulo dentro de una caja de texto y no necesariamente necesitas editarlo en HTML. Si es asi solo agregas un espacio normal al final del titulo ^^
Codigo 2. Flechas hacia el titulo - (Mira el ejemplo)
Pegalo dentro de las etiquetas <HEAD> y </HEAD>
<Script>
var titletext="CreandoWeb.cl.nu"
var thetext=""
var started=false
var step=0
var times=1
function welcometext()
{
times--
if (times==0)
{
if (started==false)
{
started = true;
document.title = titletext;
setTimeout("anim()",1);
}
thetext = titletext;
}
}
function showstatustext(txt)
{
thetext = txt;
setTimeout("welcometext()",4000)
times++
}
function anim()
{
step++
if (step==7) {step=1}
if (step==1) {document.title='>==='+thetext+'===<'}
if (step==2) {document.title='=>=='+thetext+'==<='}
if (step==3) {document.title='==>='+thetext+'=<=='}
if (step==4) {document.title='=>=>'+thetext+'<=<='}
if (step==5) {document.title='==>='+thetext+'=<=='}
if (step==6) {document.title='===>'+thetext+'<==='}
setTimeout("anim()",200);
}
if (document.title)
window.onload=onload=welcometext
</script>
-----------------------------------
A diferencia del anterior, aqui debemos escribir el titulo en el codigo. Por lo que cuando este cargando la pagina va a salir el titulo normal, y al terminar de cargar saldrá el del codigo con las flechas que se mueven hacia el.
Editas el titulo donde dice: CreandoWeb.cl.nu
y las flechas que estan en rojo las cambias por lo que quieras, recuerda que van apareciendo en orden.
La velocidad la cambias más abajo en setTimeout("anim()",200);
Barra de Estado
Nota: Solo funcionan en IExplorer!!
Codigo 1. Mensaje en la Barra de Estado con Efecto - (Mira el ejemplo)
Pegalo dentro de las etiquetas <HEAD> y </HEAD>
<script language="JavaScript">
function snapIn(jumpSpaces,position)
{
var msg = "CREANDOWEB - CODIGOS Y RECURSOS"
var out = ""
if (killScroll) {return false}
for (var i=0; i<position; i++)
{out += msg.charAt(i)}
for (i=1;i<jumpSpaces;i++)
{out += " "}
out += msg.charAt(position)
window.status = out
if (jumpSpaces <= 1)
{
position++
if (msg.charAt(position) == ' ') {position++}
jumpSpaces = 100-position
}
else if (jumpSpaces > 3) {jumpSpaces *= .75}
else {jumpSpaces--}
if (position != msg.length) {
var cmd = "snapIn(" + jumpSpaces + "," + position + ")";
scrollID = window.setTimeout(cmd,5);
} else {
scrolling = false
return false
}
return true
}
function snapSetup() {
if (scrolling)
if (!confirm('Re-initialize snapIn?'))
return false
killScroll = true
scrolling = true
var killID = window.setTimeout('killScroll=false',6)
scrollID = window.setTimeout('snapIn(100,0)',10)
return true
}
//-------------------------------------------------------------
var scrollID = Object
var scrolling = false
var killScroll = false
//-------------------------------------------------------------
</script>
<body onload="snapSetup()">
Codigo 2. Varios Mensajes en la Barra de Estado - (Mira el ejemplo)
Pegalo dentro de las etiquetas <HEAD> y </HEAD>
<script language="JavaScript">
<!--
var current = 0
var x = 0
var speed = 40
var speed2 = 1000
function initArray(n) {
this.length = n;
for (var i =1; i <= n; i++) {
this[i] = ' '
}
}
typ = new initArray(12)
typ[0]=" • Texto 1 "
typ[1]=" • Texto 2 "
typ[2]=" • Texto 3 "
typ[3]=" • Texto 4 "
typ[4]=" • CreandoWeb "
typ[5]=" • Codigos "
typ[6]=" • Recursos "
typ[7]=" • Lecciones "
typ[8]=" • y Mucho mas... "
typ[9]=" • Texto 10 "
typ[10]=" • Texto 11 "
typ[11]=" • Y ahora volvemos al Texto 1 ^^ "
function typewrite() {
var m = typ[current]
window.status = m.substring(0, x++) + "•"
if (x == m.length + 1) {
x = 0
current++
if (current > typ.length - 1) {
current = 0
}
setTimeout("typewrite()", speed2)
}
else {
setTimeout("typewrite()", speed)
}
}
typewrite()
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v3.0
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
---------------------------
La velocidad La editas en:
var speed = 10
var speed2 = 300
* Entre más grande el numero más lento se mueve.
Los textos... si quieres quitar textos, empieza eliminando desde el 11 hacia arriba. Pero luego tienes que cambiar la cantidad de textos que dejaste aqui:
typ = new initArray(12) <-- Aqui 12, porque hay [11] textos empezando desde el [0]
Eso es to, eso es to, es todo amigos! xD
11 junio 2007
8 comentarios:
hola, gracias por tu apoyo a los que apenas estamos comenzando, tengo una pregunta, quiero ubicar algunos efectos en mi pagina, pero siempre dices, ubicar entre head y head, a que te refieres, puedes explicarme esto.
Ademas quiero abuscar de tu tiempo y solicitarte apoyo en esto, necesito ubicar en mi sitio una ventana de noticias en movimiento como la que aparece en el sitio www.uninorte.edu.co, puedes orientarme en esto? por lo menos decirme como se llama ese efecto. mil y un millón de gracias
Hola edwin!
Con respecto a ubicar los codigos entre <head> y </head>...
Las paginas HTML tienen la siguiente esctructura:
<html>
<head>
Encabezado, titulos, meta tags, scripts, etc...
</head>
<body>
cuerpo, todo el contenido de tu pagina.
</body>
</html>
Si te fijas, en el codigo fuente de tu pagina encontrarás esos tags, por lo tanto poner un codigo entre <head> y </head> quiere decir que lo pongas en medio de ellos, no importa donde, por ejemplo puede ser justo antes de </head>
es decir:
[Codigo]
</head>
Lo complique mucho? jeje
Bueno, con respecto a lo de las noticias, eso que necesitas es un marquee, ahora haré un post para eso..
Nos vemos!
quien me explica eso de esos codigos como los convierto en la pagina porfavor expliquenme y como publico mi pagina web cuando la tenga gracias y como se hace el menu y todo eso porfa expliquenme gracias
Hola anonimo, para empezar a crear tu web puedes leer aqui
salu2
me gustaria saber los codigos html que no sean especialmente para java escrip
me sirvio el codigo gracias raulitolok
Hola amigo! Muy excelente tu explicación, estoy estudiando computación e informatica, y la parte de diseño web me es muy interesante, aún no tocamos JavaScript pero quiero adelantarme un poco.
Estoy haciendo un diseño web, y quiero que en ella halla un area donde los visitantes (no usuarios, porque aún no llevo PHP) puedan dejar comentarios y/o sugerencias. Si hay algún código sobre eso, me sería muy útil!
Gracias de antemano y espero sigas con esto que está muy bueno. Éxitos
Atte.
Steven
Lo más facil es entrar aqui y crear tu formulario de contacto :)
Publicar un comentario
Gracias por visitar Creando Web, si tienes alguna duda, solo pregunta! ^^
- He activado la moderación de comentarios por el spam :)