Tips y Trucos | el 10 de Octubre del 2009

Trucos HTML [Parte 9]



Barra de estado animada:

Puedes darle movimiento a la barra de estado del navegador del visitante en tu sitio. Es un efecto fabuloso que te permite destacar lo que desees.

Copia el siguiente código y pegalo en tus páginas debajo de la etiqueta <Body>.

 

<script language="JavaScript">
tempo = 10;
chars = 5;
texto = "-- Ingresa el texto aquí --";
wtexto = new Array(33);
wtexto[0] = texto;
blnk = " ";//Mantén estos espacios
for (i = 1; i < 32; i++) {
b = blnk.substring(0, i);
wtexto[i] = "";
for (j = 0; j < texto.length; j++) wtexto[i] = wtexto[i] + texto.charAt(j) + b;
}
function animastatus() {
if (chars > -1) str = wtexto[chars];
else str = wtexto[0];
if (chars-- < -40) chars = 31;
status = str;
clearTimeout(tempo);
tempo = setTimeout("animastatus()", 150);
}
animastatus()
</script>


 

 

Efecto de apertura múltiple:

Este efecto ofrece otra alternativa de apertura para tu sitio, una forma diferente de presentarlo a los visitantes. Es sólo copiar y pegar el código en tu página. Siempre que alguien acceda a tu sitio el efecto será activado.

 

<style>
.intro{position:absolute;
left:0;
top:0;
layer-background-color:green;
background-color:green;
border:0.1px solid green
}
</style>

<div id="i1" class="intro"></div>
<div id="i2" class="intro"></div>
<div id="i3" class="intro"></div>
<div id="i4" class="intro"></div>
<div id="i5" class="intro"></div>
<div id="i6" class="intro"></div>
<div id="i7" class="intro"></div>
<div id="i8" class="intro"></div>
<script language="JavaScript1.2">
var velocidade=20
var tempo=new Array()
var tempo2=new Array()
if (document.layers){
for (i=1;i<=8;i++){
tempo[i]=eval("document.i"+i+".clip")
tempo2[i]=eval("document.i"+i)
tempo[i].width=window.innerWidth
tempo[i].height=window.innerHeight/8
tempo2[i].top=(i-1)*tempo[i].height
}
}
else if (document.all){
var clipright=document.body.clientWidth,clipleft=0
for (i=1;i<=8;i++){
tempo[i]=eval("document.all.i"+i+".style")
tempo[i].width=document.body.clientWidth
tempo[i].height=document.body.offsetHeight/8
tempo[i].top=(i-1)*parseInt(tempo[i].height)
}
}
function openit(){
window.scrollTo(0,0)
if (document.layers){
for (i=1;i<=8;i=i+2)
tempo[i].right-=velocidade
for (i=2;i<=8;i=i+2)
tempo[i].left+=velocidade
if (tempo[2].left>window.innerWidth)
clearInterval(stopit)
}
else if (document.all){
clipright-=velocidade
for (i=1;i<=8;i=i+2){
tempo[i].clip="rect(0 "+clipright+" auto 0)"
}
clipleft+=velocidade
for (i=2;i<=8;i=i+2){
tempo[i].clip="rect(0 auto auto "+clipleft+")"
}
if (clipright<=0)
clearInterval(stopit)
}
}
function gogo(){
stopit=setInterval("openit()",100)
}
gogo()
</script>


 

¿Quieres cambiar el color? Puedes cambiarlo por cualquier otro color. ¡Es muy fácil:

Observa que existe una parte del código que contiene:

 

<style>
<!--
.entrada{
position:absolute;
left:0;
top:0;
layer-background-color:green;
background-color:green;
border:0.1px solid green
}
-->
</style>


Donde dice "green", tienes que poner el nombre en inglés o el código hexadecimal del color que deseas.

Puedes también seleccionar uno de los colores que siguen y sustituir la referida parte del código original por esta nueva que vas a recibir.

 

 

Cambiando la barra de estado:

¿Quieres que la barra de estado cambie cuando el mouse pase sobre los enlaces? ¡Es fácil! Puedes hacer que cualquier mensaje aparezca en la barra de estado del navegador cuando alguien pase el mouse sobre los enlaces de tu página. Observa cómo hacerlo aquí:

- Ejemplo- El código HTML de un enlace común se parece al siguiente ejemplo:


<a href=fotos.html>Fotos del Viaje</a>


 

Sólo tienes que incluir el siguiente código:


ONMOUSEOVER="window.status='COLOCA EL TEXTO AQUI';return true;" ONMOUSEOUT="window.status='';return true;"


<a href=fotos.html ONMOUSEOVER="window.status='COLOCA EL TEXTO AQUI';return true;" ONMOUSEOUT="window.status='';return true;">Fotos del Viaje</a>


Copia el código y pégalo en tus páginas debajo de la etiqueta <Body>