El Rincón Del Pipiolo
Portada
  • El Rincón del Pipiolo

    Trucos HTML 5

    Atrás y Adelante:

    Atrás:

    <a href="javascript:history.go(-1)">Atrás </a>

    Adelante: 

    <a href="javascript:history.go(1)">Adelante</a>

     

     

    Imprimir pagina actual:

    <a href="javascript:print()">Imprimir</a>

     

     

    Cartel de novedades:

    Este efecto te permite tener un cartel o letrero de mensajes incluyendo enlaces para tu sitio. Los mensajes van cruzando la pantalla como si fueran noticias; es un recurso excelente para destacar características especiales de tu sitio. Cada mensaje tendrá un enlace

    Paso 1Copiá el siguiente código y pegalo en tu página:

     

    <script language="JavaScript1.2">
    var largura=150
    var altura=120
    var bgcolor='white'
    var fundo=''

    var mensagens=new Array()
    mensagens[0]="<center><font face='Arial' size=2><a href='Coloca la dirección de la página 1 aquí'>Coloca el texto del enlace 1 aquí</a></font></center>"
    mensagens[1]="<center><font face='Arial' size=2><a href='Coloca la dirección de la página 2 aquí'>Coloca el texto del enlace 2 aquí</a></font></center>"
    mensagens[2]="<center><font face='Arial' size=2><a href='Coloca la dirección de la página 3 aquí'>Coloca el texto del enlace 3 aquí</a></font></center>"
    mensagens[3]="<center><font face='Arial' size=2><a href='Coloca la dirección de la página 4 aquí'>Coloca el texto del enlace 4 aquí</a></font></center>"
    mensagens[4]="<center><font face='Arial' size=2><a href='Coloca la dirección de la página 5 aquí'>Coloca el texto del enlace 5 aquí</a></font></center>"

    if (mensagens.length>1)
    i=2
    else
    i=0

    function mover1(whichlayer){
    tlayer=eval(whichlayer)
    if (tlayer.top>0&&tlayer.top<=5){
    tlayer.top=0
    setTimeout("mover1(tlayer)",3000)
    setTimeout("mover2(document.principal.document.segundo)",3000)
    return
    }
    if (tlayer.top>=tlayer.document.height*-1){
    tlayer.top-=5
    setTimeout("mover1(tlayer)",100)
    }
    else{
    tlayer.top=altura
    tlayer.document.write(mensagens[i])
    tlayer.document.close()
    if (i==mensagens.length-1)
    i=0
    else
    i++
    }
    }

    function mover2(whichlayer){
    tlayer2=eval(whichlayer)
    if (tlayer2.top>0&&tlayer2.top<=5){
    tlayer2.top=0
    setTimeout("mover2(tlayer2)",3000)
    setTimeout("mover1(document.principal.document.primeiro)",3000)
    return
    }
    if (tlayer2.top>=tlayer2.document.height*-1){
    tlayer2.top-=5
    setTimeout("mover2(tlayer2)",100)
    }
    else{
    tlayer2.top=altura
    tlayer2.document.write(mensagens[i])
    tlayer2.document.close()
    if (i==mensagens.length-1)
    i=0
    else
    i++
    }
    }

    function mover3(whichdiv){
    tdiv=eval(whichdiv)
    if (tdiv.style.pixelTop>0&&tdiv.style.pixelTop<=5){
    tdiv.style.pixelTop=0
    setTimeout("mover3(tdiv)",3000)
    setTimeout("mover4(segundo2)",3000)
    return
    }
    if (tdiv.style.pixelTop>=tdiv.offsetHeight*-1){
    tdiv.style.pixelTop-=5
    setTimeout("mover3(tdiv)",100)
    }
    else{
    tdiv.style.pixelTop=altura
    tdiv.innerHTML=mensagens[i]
    if (i==mensagens.length-1)
    i=0
    else
    i++
    }
    }

    function mover4(whichdiv){
    tdiv2=eval(whichdiv)
    if (tdiv2.style.pixelTop>0&&tdiv2.style.pixelTop<=5){
    tdiv2.style.pixelTop=0
    setTimeout("mover4(tdiv2)",3000)
    setTimeout("mover3(primeiro2)",3000)
    return
    }
    if (tdiv2.style.pixelTop>=tdiv2.offsetHeight*-1){
    tdiv2.style.pixelTop-=5
    setTimeout("mover4(segundo2)",100)
    }
    else{
    tdiv2.style.pixelTop=altura
    tdiv2.innerHTML=mensagens[i]
    if (i==mensagens.length-1)
    i=0
    else
    i++
    }
    }

    function iniciar(){
    if (document.all){
    mover3(primeiro2)
    segundo2.style.top=altura
    segundo2.style.visibility='visible'
    }
    else if (document.layers){
    document.principal.visibility='show'
    mover1(document.principal.document.primeiro)
    document.principal.document.segundo.top=altura+5
    document.principal.document.segundo.visibility='show'
    }
    }
    </script>

    <table width="150" border="1" cellspacing="1" cellpadding="0">
    <tr>
    <td>
    <ilayer id="principal" width=&{largura}; height=&{altura}; bgColor=&{bgcolor}; background=&{fundo}; visibility=hide>
    <layer id="primeiro" left=0 top=1 width=&{largura};>
    <script language="JavaScript1.2">
    if (document.layers)
    document.write(mensagens[0])
    </script>
    </layer>
    <layer id="segundo" left=0 top=0 width=&{largura}; visibility=hide>
    <script language="JavaScript1.2">
    if (document.layers)
    document.write(mensagens[1])
    </script>
    </layer>
    </ilayer>

    <script language="JavaScript1.2">
    if (document.all){
    document.writeln('<span id="principal2" style="position:relative;width:'+largura+';height:'+altura+';overflow:hiden;background-color:'+bgcolor+' ;background-image:url('+fundo+')">')
    document.writeln('<div style="position:absolute;width:'+largura+';height:'+altura+';clip:rect(0 '+largura+' '+altura+' 0);left:0;top:0">')
    document.writeln('<div id="primeiro2" style="position:absolute;width:'+largura+';left:0;top:1;">')
    document.write(mensagens[0])
    document.writeln('</div>')
    document.writeln('<div id="segundo2" style="position:absolute;width:'+largura+';left:0;top:0;visibility:hidden">')
    document.write(mensagens[1])
    document.writeln('</div>')
    document.writeln('</div>')
    document.writeln('</span>')
    }
    iniciar()
    </script>
    </td>
    </tr>
    </table>>

     

    PersonalizandoPara cambiar el color de fondo o incluir una imagen de fondo, observa esta parte del código: 
     

    var largura=150
    var altura=120
    var bgcolor='white'
    var fundo=''

     

    Donde dice "white" podés ingresar el valor hexadecimal del nuevo color; por ejemplo: #FFCC00 

    En "fondo" p
    odés colocar el nombre de la imagen de fondo del letrero; por ejemplo:


    var largura=150
    var altura=120
    var bgcolor='white'
    var fundo='Nombre del archivo de imagen' 


    Para incluir más mensajes en el letrero, observá que el último mensaje aparece de la siguiente forma:


    mensagens[4]="<center><font face='Arial' size=2><a href='Coloca la dirección de la página 5 aquí'>Coloca el texto del enlace 5 aquí</a></font></center>"

    Sólo tenés que agregar una unidad al número indicado al final del mensaje. Por ejemplo:


    mensagens[5]="<center><font face='Arial' size=2><a href='Coloca la dirección de la página 5 aquí'>Coloca el texto del enlace 5 aquí</a></font></center>" 
    mensagens[6]="<center><font face='Arial' size=2><a href='Coloca la dirección de la página 6 aquí'>Coloca el texto del enlace 6 aquí</a></font></center>"

    Seguí hasta llegar al número total de mensajes que desees incluir.

     

     

    Barra de estado fija:

    Podés colocar la palabra o el mensaje que quieras en la barra de estado de tu sitio y mantenerlo fijo. De esta forma tu sitio quedará mucho más personalizado, además de contar con otras ventajas. Por ejemplo: el visitante no verá la dirección del enlace al que está apuntando, sólo el mensaje definido por vos.

     

    <Script language="JavaScript">
    statuss(); 
    function statuss()
    {
    window.status = "
    www.pauluk.8k.com - Un Sitio. Muchas Opciones.";
    setTimeout("statuss()", 1);
    }
    </script>



    Hoy habia 2 visitantes (6 clics a subpáginas) ¡Aqui en esta página!
    :
Registro
Video de la semana
Pol - Buenos días princesa
Música
Reproductor de texto