Códigos de: Trucos y Efectos HTML | Todos los que hay
A continuación te mostrare la mayor recopilación de códigos HTML, CSS y JavaScript para incorporar pequeñas funcionalidades o caracteristicas a tu páginas web, ya sea esta una estatica, una tienda, un blog o de cualquier otro tipo.
Seguro sabras que practicamente todos sirven para tu sitio, pues al ser simples lineas de texto HTML en la mayoria de plataformas de desarrollo web se pueden colocar con facilidad.
¿Para que te pueden servir estos trucos y efectos?
Para infinidad de cosas, como para mostrar una marquesina o una ventana emergente (pop up) al clickear un enlace.
Lo genial es que la mayoria son configurables, en pocos pasos se puede alterar el resultado y al mismo tiempo empezar a comprender el lenguaje HTML.
Estos códigos para paginas web han sido recopilados, con el único y simple propósito de volverlos a compartir.
Espero que te sirvan. Si alguno no funciona como debiera te pido que por favor me lo notifiques enviando un mensaje a este correo electrónico.
NOTA: Recuerda eliminar el texto que aparece al final cuando pegas un código en tu web:
(Leer Mas: www.todopatuweb.net/codigos/)
Ventajas y desetajas de usarlos
Su ventaja general es el ampliar la interactividad del usuario, en otras palabras el tranfromar los simpless documento (páginas) en practicamente aplicaciones para ciertas cuestiones.
La desventaja primordial en su utilización es la gran posibilidad de perjudicar la usabilidad en cuanto a diseño y tiempo de carga.
Líbrate de los copiones. No dejar seleccionar el texto y bloquear “Click Der” y “Ctrl”
<BODY oncontextmenu="return false" onselectstart="return false" ondragstart="return false"> </body>
Inserta el famoso botón de “Ir Arriba”. Imaen modificable (solo cambia la URL)
</script></div><div class="n"><div class="n"> <a href="#" title="Ir arriba"><img alt="Ir arriba" border="0" src="http://2.bp.blogspot.com/_qgZA1ny_dAs/S0QFsV1WD7I/AAAAAAAADhs/ZBKrnpzqBrk/s200/arrow8a.png" style=position:fixed;bottom:0;right:0;/></a> </div>
Muestra al visitante un mensaje (alerta) al entrar a tu sitio web
<BODY onLoad="alert('Bienvenido a mi Página Web. Disfruta el contenido');" onUnLoad="confirm('Gracias por tu visita, espero que no sea la última');">
Añade una atractiva Marquesina con el texto que quieras
<center> <div class="n"><p> <b><font color="#000000" face="georgia" size="4"><marquee width="400" scrollamount="5" bgcolor="#FFFFFF">Aquí tu texto</marquee> </font></b></p><center>
Contenido oculto (ejemplo: código html) con botón “Mostrar”
<div class="pre-spoiler"> <span style="color: #00ffff;">Clic Para Mostrar El Contenido</span> <input type="button" value="Mostrar Contenido" style="width:80px;font-size:15px;margin:0px;padding:0px;" onclick= "if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'Ocultar'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Mostrar';}" /> </div><div> <div class="spoiler" style="display: none;"> AQUI ESCRIBEN TODO EL CONTENIDO QUE OCULTARAN YA SEA UN CHAT, REPRODUCTOR,ETC </div></div>
Pon en tu web un texto con Movimiento (Arriba-Abajo)
<marquee id="ejemplo" direction="up">AQUI VA EL TEXTO QUE DESEES </marquee><a href="javascript:void(0);" onclick="getElementById('ejemplo').direction='down';">Hacia abajo</a>---<a href="javascript:void(0);" onclick="getElementById('ejemplo').direction='up';">Hacia arriba</a>
Titulo en la barra de direcciones con movimiento
<SCRIPT LANGUAGE="JavaScript">var txt=" TITULO DE LA WEB ";var espera=140;var refresco=null;function rotulo_title() {document.title=txt;txt=txt.substring(1,txt.length)+txt.charAt(0);refresco=setTimeout("rotulo_title()",espera);}rotulo_title();</script>
Añádele un increíble efecto eléctrico a tus enlaces
<style type="text/css"> a.navbar:hover{color:red; font-weight:bold;background-image:url(http://www.nackvision.com/myspace/links/lightningline.gif);} a:hover, a.redlink:hover, a.navbar:hover {background-image:url(http://www.nackvision.com/myspace/links/lightningline.gif); text-decoration:none; border:0px solid;} a:hover img {background-image:url(http://www.nackvision.com/myspace/links/lightningline.gif); filter:alpha(finishopacity=0, style=2); } </style>
Insertar un simple botón: “Imprimir Página Actual”
<h2><a href="javascript:print()"><span style="color: rgb(0, 255, 255);"><span style="font-family: Arial;"><span style="font-size: x-large;">Imprimir Contenido</span></span></span></a></h2>
Texto (modificable) con un Efecto Parpadeante
<script language="JavaScript"> var estado=true; setTimeout("ver()",450); function ver (){ estado=!estado; if(estado==true) texto1.style.visibility="visible"; else texto1.style.visibility="hidden"; setTimeout("ver()",450); } </script><p align="center" id="texto1" style="visibility:visible"><font face="Arial, Helvetica, sans-serif size="3">AÑADE AQUI EL TEXTO QUE QUIERAS</font></p>
Haz que una Imagen se agrande al pasar el Cursor. Solo cambia la URL
<img src="AQUI VA LA URL DE LA IMAGEN" onmouseover="this.width=500;this.height=400;" onmouseout="this.width=200;this.height=150;" width="200" height="100" />
Cambiar una imagen a otra al darle clic. Cambia las URLs
Ver:
<script language="javascript">
imagen1=new Image
imagen1.src="url dela imagen 1"
imagen2=new Image
imagen2.src="url dela imagen 2"
var i=1;
function cambiar() {
if (i == 1)
{
document.images['ejemplo'].src=imagen2.src
i=2;
}
else
{
document.images['ejemplo'].src=imagen1.src;
i=1;
}
}
</script><img src="url dela imagen 1" name="ejemplo" onMousedown="cambiar()"">
Inserta una caja como esta para poner códigos HTML
<div align="center"> <div id="preview" style= "BORDER-RIGHT: #000 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #000 1px solid; PADDING-LEFT: 2px; PADDING-BOTTOM: 2px; WORD-SPACING: 1px; OVERFLOW: scroll; BORDER-LEFT: #000 1px solid; WIDTH: 400px; PADDING-TOP: 1px; BORDER-BOTTOM: #000 2px solid; HEIGHT: 150px; TEXT-ALIGN: left"> <p> AQUI VA LO QUE TU QUIERAS, CAMBIA ESTE TEXTO. </p> </div></div>
Traductor de Google para tu Página Web o Blog
<div><div id="google_translate_element"></div><script type="text/javascript">//<![CDATA[function googleTranslateElementInit() {new google.translate.TranslateElement({pageLanguage: 'es'}, 'google_translate_element');}//]]></script> <script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit" type="text/javascript"></script></div>
Botón social para compartir tu página web o blog en Taringa!
<script type="text/javascript">(function(){var x=document.createElement('script'), s=document.getElementsByTagName('script')[0];x.async=true;x.src='http://widgets.itaringa.net/share.js';s.parentNode.insertBefore(x,s)})()</script></div><div><t:sharer data-layout="big"></t:sharer>
Muestra un Mensaje (Alerta) al Hacer clic en un enlace (Antes de ir)
<a href="http://aqui va la dirección URL.com" onclick="javascript:alert('Aqui va el Mensaje');">Titulo del Vínculo</a>
Aumenta el Tamaño del Texto de un Enlace al Pasar el Cursor
<div id="vinc"><a href="http://direcciondetusitio.com" onmouseover="javascript: void(document.getElementById('vinc').style.fontSize='3em')" onmouseout="javascript: void(document.getElementById('vinc').style.fontSize='1em')"> Vínculo</a></div>
Pequeño widget que da en tiempo real el número de usuarios activos en tu web
Ver:
<script id="_wauwaa">var _wau = _wau || []; _wau.push(["classic", "zltotgacrhd9", "waa"]);
(function() {var s=document.createElement("script"); s.async=true;
s.src="http://widgets.amung.us/classic.js";
document.getElementsByTagName("head")[0].appendChild(s);
})();</script>
Botones Sociales de Twitter, Facebook, Google+ y Linkedin para Compartir
<script type="text/javascript" src="http://100widgets.com/js_data.php?id=255"></script>
Inserta un Pequeño y Bonito Calendario en tu Página Web
<script type="text/javascript" src="http://100widgets.com/js_data.php?id=106"></script>
Inhabilitar el botón derecho con mensaje en pantalla completa
<script> // Inhabilitar el botón derecho var DADrccolor = "#F1F1F1"; var DADrcimage = "https://lh5.googleusercontent.com/-70ZyK7Gt4XE/VI8sxCvJGII/AAAAAAAAGd0/RZA9e6iSJBM/s300/superheroe.png"; </script> <script type="text/javascript" src="http://yourjavascript.com/2122535051/antirightclick.js"></script>
Efecto de sangre cayendo desde la parte superior de tu web
<img border='0' src='http://u.jimdo.com/www21/o/s4e9df44a0ad8ccd8/img/i0425d9e289ed1713/1297446540/std/image.gif' style='position:fixed; top:0; left:0; width:100%; height:150px;'/>
(Para Halloween) Una araña bajando desde la parte superior de tu sitio
<img border='0' src='//lh5.ggpht.com/_qgZA1ny_dAs/TM2UGNH7ORI/AAAAAAAAEuc/yRvKD_gAIg8/spiders.gif' style='position:fixed; top:0; left:0;'/>
Pon una cuenta regresiva en tu página web. Busca en el código la fecha junto con los textos
<center><span class="Apple-style-span" style="color: red; font-family: 'Trebuchet MS', sans-serif;">Faltan solamente</span></center><center><script language="JavaScript" type="text/javascript"> //<![CDATA[ TargetDate = "05/15/17 09:10 PM"; BackColor = "white"; ForeColor = "black"; CountActive = true; CountStepper = -1; LeadingZero = true; DisplayFormat = "%%D%% Días, %%H%% Horas, %%M%% Minutos, %%S%% Segundos."; FinishMessage = "Feliz fin del mundo!!!"; //]]> </script><script language="JavaScript" src="http://scripts.hashemian.com/js/countdown.js" type="text/javascript"> </script></center><center><span class="Apple-style-span" style="color: red; font-family: 'Trebuchet MS', sans-serif;">Para el fin del mundo</span></center>
Saludo al visitante dependiendo de la hora (ej: Buenas tardes)
<center>
<span style="font-size: large;"><span class="Apple-style-span" style="color: red;"><script language="JavaScript" type="text/javascript">
//<![CDATA[
<!--
today = new Date()
if(today.getMinutes() < 10){
pad = "0"}
else
pad = "";
document.write ;if((today.getHours() >=6) && (today.getHours() <=9)){
document.write("¡Buen día!")
}
if((today.getHours() >=10) && (today.getHours() <=11)){
document.write("¡Buen día!")
}
if((today.getHours() >=12) && (today.getHours() <=19)){
document.write("¡Buenas tardes!")
}
if((today.getHours() >=20) && (today.getHours() <=23)){
document.write("¡Buenas noches!")
}
if((today.getHours() >=0) && (today.getHours() <=3)){
document.write("¡Buenas noches!")
}
if((today.getHours() >=4) && (today.getHours() <=5)){
document.write("¡Buenas noches!")
}
// -->
//]]>
</script></span></span></center>
Opciones en casilla que abren un enlace al seleccionarse. Sigue lo que se dice en el código para modificar los textos
<form> <ul> <li style="background-image:none;"> <input value="ON" onclick="RubicusFrontendIns.location='URL del enlace 1'; return true;" type="checkbox" />Título del enlace 1 </li> <li style="background-image:none;"> <input value="ON" onclick="RubicusFrontendIns.location='URL del enlace 2'; return true;" type="checkbox" />Título del enlace 2 </li> <li style="background-image:none;"> <input value="ON" onclick="RubicusFrontendIns.location='URL del enlace 3'; return true;" type="checkbox" />Título del enlace 3 </li> <li style="background-image:none;"> <input value="ON" onclick="RubicusFrontendIns.location='URL del enlace 4'; return true;" type="checkbox" />Título del enlace 4 </li> </ul> </form>
Insertar un menú despegable con botón de continuidad. Para cambiar los textos tan solo sigue lo que hay en el código.
<script language="JavaScript" type="text/javascript">
//<![CDATA[
function CC_go(form) {var myindex=form.dest.selectedIndex
window.open(form.dest.options[myindex].value, target="_parent", "toolbar=yes,scrollbars=yes,location=yes"); }
//]]>
</script>
<form name="CC_LinkForm" id="CC_LinkForm">
<select name="dest" size="1">
<option selected="selected" value="">
Selecciona Algo
</option>
<option value=" enlace número uno">
Titulo número 1
</option>
<option value="enlace número 2">
Título número 2
</option>
<option value="enlace número 3">
Titulo número 3
</option>
</select>
<p>
<input type="button" value="Ir ahí" onclick="CC_go(this.form)" />
</p>
</form>
Coloca una imagen flotante (estática) con opción para cerrar. Sustituye “URL de tu imagen aqui” por la dirección URL de la imagen a poner
<div id="anuncio" style="right:100px; bottom:0px; position: fixed;">
<div align="right" style="margin-bottom:-30px;">
<b><a href="javascript:closeit()"><font face="Courier" size="1">#CERRAR</font></a></b>
</div>
<br />
<img border="0" src="URL de tu imagen aquí" alt="" /> <script type="text/javascript">
//<![CDATA[
function closeit(){
document.getElementById("anuncio").style.visibility = "hidden";
}
//]]>
</script>
</div>
<div class="clear">
</div>
Inserta un pequeño widget de Horoscopos para tu web
<p align="center"> <font color="#0C0505"><b><font class="navtext"><font face="Verdana" style="font-size:
9pt">HOROSCOPO</font><font class="content" size="1"><br /></font></font> <font class="navtext"><font face= "Verdana"
size="1">Descubre Tu Destino Para</font><font class="navtext"><br /></font> <font face="Verdana" size="1"><font class="navtext">El Dia
de Hoy</font><br /></font></font></b></font><b><font class="navtext" color="#0C0505"><font face="Verdana"
color="#0C0505" size="1"><br /></font> <select style= "border-style:solid; border-width:1px; VISIBILITY: visible; font-family:Verdana; font-size:8pt;
color:#0c0505; font-weight:bold; padding-left:5px; padding-right:6px; padding-top:1px; padding-bottom:1px; background-color:#ffffff" onchange=
"if(this.options[1].selected)
window.open('http://www.horoscopofree.com/misc/partnership/iframe/aries_st.html','hrscp','width=460,height=100,top=150,left=175,scrolling=0,frameborder=0,status=0,menubar=0,scrollbars=0');
else if(this.options[2].selected)
window.open('http://www.horoscopofree.com/misc/partnership/iframe/taurus_st.html','hrscp','width=460,height=100,top=150,left=175,scrolling=0,frameborder=0,status=0,menubar=0,scrollbars=0');
else if(this.options[3].selected)
window.open('http://www.horoscopofree.com/misc/partnership/iframe/gemini_st.html','hrscp','width=460,height=100,top=150,left=175,scrolling=0,frameborder=0,status=0,menubar=0,scrollbars=0');
else if(this.options[4].selected)
window.open('http://www.horoscopofree.com/misc/partnership/iframe/cancer_st.html','hrscp','width=460,height=100,top=150,left=175,scrolling=0,frameborder=0,status=0,menubar=0,scrollbars=0');
else if(this.options[5].selected)
window.open('http://www.horoscopofree.com/misc/partnership/iframe/leo_st.html','hrscp','width=460,height=100,top=150,left=175,scrolling=0,frameborder=0,status=0,menubar=0,scrollbars=0');
else if(this.options[6].selected)
window.open('http://www.horoscopofree.com/misc/partnership/iframe/virgo_st.html','hrscp','width=460,height=100,top=150,left=175,scrolling=0,frameborder=0,status=0,menubar=0,scrollbars=0');
else if(this.options[7].selected)
window.open('http://www.horoscopofree.com/misc/partnership/iframe/libra_st.html','hrscp','width=460,height=100,top=150,left=175,scrolling=0,frameborder=0,status=0,menubar=0,scrollbars=0');
else if(this.options[8].selected)
window.open('http://www.horoscopofree.com/misc/partnership/iframe/scorpio_st.html','hrscp','width=460,height=100,top=150,left=175,scrolling=0,frameborder=0,status=0,menubar=0,scrollbars=0');
else if(this.options[9].selected)
window.open('http://www.horoscopofree.com/misc/partnership/iframe/sagittarius_st.html','hrscp','width=460,height=100,top=150,left=175,scrolling=0,frameborder=0,status=0,menubar=0,scrollbars=0');
else if(this.options[10].selected)
window.open('http://www.horoscopofree.com/misc/partnership/iframe/capricorn_st.html','hrscp','width=460,height=100,top=150,left=175,scrolling=0,frameborder=0,status=0,menubar=0,scrollbars=0');
else if(this.options[11].selected)
window.open('http://www.horoscopofree.com/misc/partnership/iframe/aquarius_st.html','hrscp','width=460,height=100,top=150,left=175,scrolling=0,frameborder=0,status=0,menubar=0,scrollbars=0');
else if(this.options[12].selected)
window.open('http://www.horoscopofree.com/misc/partnership/iframe/pisces_st.html','hrscp','width=460,height=100,top=150,left=175,scrolling=0,frameborder=0,status=0,menubar=0,scrollbars=0');"
name="SucreVip" size="1"> <option selected="selected"> Elige tu signo
</option> <option> Aries </option>
<option> Tauro </option>
<option> Geminis </option> <option>
Cancer </option> <option>
Leo </option> <option> Virgo
</option> <option> Libra </option>
<option> Escorpio </option>
<option> Sagitario </option> <option>
Capricornio </option> <option>
Acuario </option> <option> Piscis
</option> </select></font></b></p>
<table> <tr> <td height="27" class="edit_rb_footer" id="edit_rb_footer_1">
</td> </tr></table>;
Texto que cambia al actualizarse la página. Edita los textos en el código.
<script language="JavaScript" type="text/javascript">
//<![CDATA[
hoje = new Date()
numero_de_textos = 4
segundos = hoje.getSeconds()
numero = segundos % numero_de_textos
if (numero == 0){
texto = "Texto número 1"
}
if (numero == 01){
texto = "Texto número 2"
}
if (numero == 02){
texto = "Texto número 3"
}
if (numero == 03){
texto = "Texto número 4"
}
document.write('' + texto +'')
//]]>
</script>
Widget para mostrar la fecha exacta en tu web
<p style="text-align: center;"> <iframe width="200" height="200" scrolling="no" src="http://pagina-del-dia.euroresidentes.es/gadget-dia-de-hoy.php?fondo=Rojo.png&texto=FFFFFF" frameborder="0"></iframe></p>
Crear un botón para abrir un enlace. Solo configuralo
<input type="button" value="Abrir" onclick="window.open('Aqui la direccion que quieres que se abra')" />
Actualizar o recargar página con botón. Texto modificable
<form method="post"> <input type="button" value="Actualizar Página" onclick="RubicusFrontendIns.location.reload()" /> </form>
Lista de enlaces en movimiento (marquesina) facil de entender para modificar
<marquee direction="up" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="1" style="border: 2px solid #000; height: 200px; padding: 3px; text-align: center; width: 200px;"> <a href="Enlace 1">Título 1</a><br /> <a href="Enlace 2">Título 2</a><br /> <a href="Enlace 3">Título 3</a> </marquee>
Cerrar la ventana en la que se está con botón. Texto editable
<input type="button" value="Cerrar Ventana" onclick="window.close()" />
Redireccionar a otra página con cuenta regresiva (3 s). Hay que configurar
<form name="redirect" id="redirect">
<center>
<font face="Arial">Serás redireccionado en<br />
<br /></font>
<form>
<font face="Arial"><input type="text" size="3" name="redirect2" /></font>
</form>
<font face="Arial">segundos</font>
</center>
<script type="text/javascript">
//<![CDATA[
<!--
var targetURL="http://truco95.jimdo.com/"
var countdownfrom=5
var currentsecond=document.redirect.redirect2.value=countdownfrom+1
function countredirect(){
if (currentsecond!=1){
currentsecond-=1
document.redirect.redirect2.value=currentsecond
}
else{
RubicusFrontendIns.location=targetURL
return
}
setTimeout("countredirect()",1000)
}
countredirect()
//-->
//]]>
</script> <!--webbot bot="HTMLMarkup" endspan -->
</form>
Enmarcar un texto con borde configurable de forma básica
<p style="border: ridge #FF0000 2px"> Aquí va lo que quieres enmarcar</p>
Poner enlaces y un comentario al pasar el mouse en un cuadro de texto
<p>
<script language="JavaScript"><!--
function escribe(frase){document.desplaza.cuadro.value=frase; }
// --></script>
</p>
<table border="0">
<tr>
<td width="200"><p align="center"><strong>Opciones.</strong></p>
<p><a href="http://www.CheNico.com"
onmouseover="escribe(' Página principaln ----------------nn Cuando hagas Click en este enlace irás directamente a la página de inicio de mi web');">Página
principal</a><br>
<a href="http://usuarios.lycos.es/pauluk/trucosprin.htm"
onmouseover="escribe(' Trucos PCn -----------nn Este enlace te llevará a la página de Trucos PC en la que podés encontrar muchos más trucos interesantes para realizar e incluir en tus páginas web');">Trucos PC</a><br>
<a href="http://usuarios.lycos.es/pauluk/GLOSARIO.HTM"
onmouseover="escribe(' Glosarion -------------- nn Diccionario de Términos Informáticos. Enterate el significado de esas palabras de computación que decís todos los días pero que no sabés exactamente qué significa.');">Glosario</a><br>
</p>
</td>
<td><form name="desplaza">
<p><textarea name="cuadro" rows="8" cols="30"
wrap="physical"></textarea></p>
</form>
</td>
</tr>
</table>
Código para sobreponer un texto sobre otro
<P><CENTER><BR>
<BR>
<SPAN style="z-index: 1;
font-family:Verdana
font-weight: bold;
font-size: 30pt;
color: #FF9900">AQUI EL PRIMER TEXTO</SPAN><BR>
<SPAN style="position: relative;
top: -32px;
left: 0px;
z-index: 2;
font-family: Verdana, Arial, Helvetica;
font-size: 28pt;
color: #006699">SEGUNDO TEXTO</SPAN><BR>
<BR>
<BR>
<script>function src() { window.location = "view-source:" +
window.location.href } </script></CENTER></P>
Texto que aparece con increíble efecto Fade
<script language="JavaScript1.2">var delay=3000 //pausa (en milisegundos)
var fcontent=new Array()
begintag='<font face="Arial" size=2>' //tag que abre los mensajes
fcontent[0]="<b></b><br><br>Crea tu propia pagina personal."
fcontent[1]="Monta tu pagina con FrontPage Express , veras que es muy facil."
fcontent[2]="En estas paginas encontraras los recursos y la manera de poder realizarlo de forma muy sencilla."
closetag='</font>'
var fwidth=150 //ancho
var fheight=150 //alto
///No editar/////////////////
var ie4=document.all&&!document.getElementById
var ns4=document.layers
var DOM2=document.getElementById
var faderdelay=0
var index=0
if (DOM2)
faderdelay=2000
//function to change content
function changecontent(){
if (index>=fcontent.length)
index=0
if (DOM2){
document.getElementById("fscroller").style.color="rgb(255,255,255)"
document.getElementById("fscroller").innerHTML=begintag+fcontent[index]+closetag
colorfade()
}
else if (ie4)
document.all.fscroller.innerHTML=begintag+fcontent[index]+closetag
else if (ns4){
document.fscrollerns.document.fscrollerns_sub.document.write(begintag+fcontent[index]+closetag)
document.fscrollerns.document.fscrollerns_sub.document.close()
}
index++
setTimeout("changecontent()",delay+faderdelay)
}
// colorfade() partially by Marcio Galli for Netscape Communications. ////////////
frame=20;
hex=255 // Initial color value.
function colorfade() {
// 20 frames fading process
if(frame>0) {
hex-=10; // increase color value
document.getElementById("fscroller").style.color="rgb("+hex+","+hex+","+hex+")";// Set color value.
frame--;
setTimeout("colorfade()",20);
}
else{
document.getElementById("fscroller").style.color="rgb(255,0,0)";
frame=20;
hex=255
}
}
if (ie4||DOM2)
document.write('<div id="fscroller" style="border:1px solid ;width:'+fwidth+';height:'+fheight+';padding:2px"></div>')
window.onload=changecontent</script><ilayer id="fscrollerns" width=&{fwidth}; height=&{fheight};><layer id="fscrollerns_sub" width=&{fwidth}; height=&{fheight}; left=0 top=0></layer></ilayer>
Texto animado y cambiando en el titulo de la pestaña
<!-- Mas trucos en www.creatupropiaweb.com -->
<SCRIPT LANGUAGE="JavaScript">
var message = new Array();
// Set your messages below -- follow the pattern.
// To add more messages, just add more elements to the array.
message[0] = "www.creatupropiaweb.com";
message[1] = "Codigos JavaScripts";
message[2] = "Trucos Diseño";
message[3] = "Musica Midi";
message[4] = "Juegos Flash";
message[5] = "Tutoriales";
message[6] = "... Todo y MUCHO mas GRATIS";
// Set the number of repetitions (how many times the arrow
// cycle repeats with each message).
var reps = 2;
var speed = 200; // Set the overall speed (larger number = slower action).
// DO NOT EDIT BELOW THIS LINE.
var p = message.length;
var T = "";
var C = 0;
var mC = 0;
var s = 0;
var sT = null;
if (reps < 1) reps = 1;
function doTheThing() {
T = message[mC];
A();
}
function A() {
s++;
if (s > 8) { s = 1;}
// you can fiddle with the patterns here...
if (s == 1) { document.title = '||||||====||| '+T+' -----'; }
if (s == 2) { document.title = '|||=|||===||| '+T+' -----'; }
if (s == 3) { document.title = '|||==|||==||| '+T+' -----'; }
if (s == 4) { document.title = '|||===|||=||| '+T+' -----'; }
if (s == 5) { document.title = '|||====|||||| '+T+' -----'; }
if (s == 6) { document.title = '|||===|||=||| '+T+' -----'; }
if (s == 7) { document.title = '|||==|||==||| '+T+' -----'; }
if (s == 8) { document.title = '|||=|||===||| '+T+' -----'; }
if (C < (8 * reps)) {
sT = setTimeout("A()", speed);
C++;
}
else {
C = 0;
s = 0;
mC++;
if(mC > p - 1) mC = 0;
sT = null;
doTheThing();
}
}
doTheThing();
// End -->
</script>
La mejor marquesina que podras ver en tu vida. Cambia el texto
<script language="JavaScript">
<!-- Mas javascripts en www.creatupropiaweb.com -->
// This Script And Over 400 Others Found At
// Java City 2000 http://www.jc2k.com
<!-- ActiveASCII by Neal Kanodia (please, don't delete this line)
// Get more JavaScript and other programs/scripts at my web page:
// http://www.inlink.com/~hkanodia
function createArr(num) { for(var i = 0; i < num; i++) { this[i] = null } }
function fillArr(tx,me,ti,wa) { this.text = tx; this.method = me.toLowerCase(); this.ticks = ti; this.wait = wa }
function block(num,txt,mthod,tcks,wit) { blocks[num] = new fillArr(txt,mthod,tcks,wit) }
function ms(unt) { var sp = ""; for( var i = 1; i <= unt; i++ ) { sp += " " } return(sp) }
function Activate() { if (cblock == max) { cblock = 0; if (iloop == 0) { loops--; if (loops == 0) { meth = "0" } else { meth = blocks[cblock].method } } else { meth = blocks[cblock].method } } else { meth = blocks[cblock].method }
if (meth == "0") { document.Active.ASCII.value = end }
if (meth == "display") { Tape = blocks[cblock].text; Wait = blocks[cblock].wait; Display() }
if (meth == "display center") { Tape = blocks[cblock].text; Wait = blocks[cblock].wait; half = Tape.length / 2; DisplayC() }
if (meth == "scroll left") { clen = tlen; Tape = blocks[cblock].text; Ticks = blocks[cblock].ticks; tTicks = Ticks * 2; ScrollL() }
if (meth == "scroll right") { clen = 0 - blocks[cblock].text.length; Tape = blocks[cblock].text; Ticks = blocks[cblock].ticks; tTicks = Ticks * 2; ScrollR() }
if (meth == "scroll lc") { clen = 0 - blocks[cblock].text.length; Tape = blocks[cblock].text; Ticks = blocks[cblock].ticks; Wait = blocks[cblock].wait; tTicks = Ticks * 2; half = Tape.length / 2; ScrollLC() }
if (meth == "scroll rc") { clen = tlen; Tape = blocks[cblock].text; Ticks = blocks[cblock].ticks; Wait = blocks[cblock].wait; tTicks = Ticks * 2; half = Tape.length / 2; ScrollRC() }
if (meth == "scroll cl") { Tape = blocks[cblock].text; Ticks = blocks[cblock].ticks; tTicks = Ticks * 2; half = Tape.length / 2; clen = cent - half; ScrollCL() }
if (meth == "scroll cr") { Tape = blocks[cblock].text; Ticks = blocks[cblock].ticks; tTicks = Ticks * 2; half = Tape.length / 2; clen = cent - half; ScrollCR() }
if (meth == "slide left") { Tape = blocks[cblock].text; Ticks = blocks[cblock].ticks; Wait = blocks[cblock].wait; cpos = 0; clet = Tape.charAt(cpos); clen = tlen; cstr = ""; SlideL() }
if (meth == "slide lc") { Tape = blocks[cblock].text; Ticks = blocks[cblock].ticks; Wait = blocks[cblock].wait; cpos = Tape.length - 1; clet = Tape.charAt(cpos); clen = 0; cstr = ""; half = Tape.length / 2; iba = cent - half; ib = ms(iba); SlideLC() }
if (meth == "slide rc") { Tape = blocks[cblock].text; Ticks = blocks[cblock].ticks; Wait = blocks[cblock].wait; cpos = 0; clet = Tape.charAt(cpos); cstr = ""; half = Tape.length / 2; clen = cent + half; fs = ms(cent - half); SlideRC() }
if (meth == "slide cl") { Tape = blocks[cblock].text; Ticks = blocks[cblock].ticks; cpos = 0; clet = Tape.charAt(cpos); cstr = Tape.substring(1,Tape.length); half = Tape.length / 2; clen = cent - half; iba = 0; ib = ms(iba); SlideCL() }
if (meth == "slide cr") { Tape = blocks[cblock].text; Ticks = blocks[cblock].ticks; cpos = Tape.length - 1; clet = Tape.charAt(cpos); cstr = Tape.substring(0,Tape.length - 1); half = Tape.length / 2; clen = 0; fs = ms(cent - half); SlideCR() }
if (meth == "slip left") { clen = 0; Tape = blocks[cblock].text; Ticks = blocks[cblock].ticks; SlipL() }
if (meth == "slip right") { clen = 0; Tape = blocks[cblock].text; Ticks = blocks[cblock].ticks; SlipR() }
if (meth == "slip letter") { Tape = blocks[cblock].text; Ticks = blocks[cblock].ticks; cpos = Tape.length - 1; clet = Tape.charAt(cpos); cstr = Tape.substring(0,Tape.length - 1); clen = 0; SlipLet() }
if (meth == "split"){ Tape = blocks[cblock].text; Ticks = blocks[cblock].ticks; var iii = Tape.length / 2; if (iii / 2 != Math.ceil(iii / 2)) { Tape = Tape + " " } hstr1 = Tape.substring(0,Tape.length/2); hstr2 = Tape.substring(Tape.length/2,Tape.length); tTicks = Ticks * 2; clen = cent - hstr1.length; iba = 0; ib = ms(iba); Split() }
if (meth == "merge"){ Tape = blocks[cblock].text; Ticks = blocks[cblock].ticks; var iii = Tape.length / 2; if (iii / 2 != Math.ceil(iii / 2)) { Tape = Tape + " " } hstr1 = Tape.substring(0,Tape.length/2); hstr2 = Tape.substring(Tape.length/2,Tape.length); tTicks = Ticks * 2; clen = 0 - hstr1.length; iba = tlen; ib = ms(iba); Wait = blocks[cblock].wait; Merge() } }
function Display() { document.Active.ASCII.value = Tape; cblock++; timerID = setTimeout("Activate()",Wait) }
function DisplayC() { var temp = cent - half; ini = ms(temp); document.Active.ASCII.value = ini + Tape; cblock++; timerID = setTimeout("Activate()",Wait) }
function ScrollL() { if (clen >= 0) { ini = ms(clen); tickered = ini + Tape; document.Active.ASCII.value = tickered; clen--; timerID = setTimeout("ScrollL()",Ticks) } else { beg = 0 - clen; if (beg == Tape.length) { document.Active.ASCII.value = ""; cblock++; timerID = setTimeout("Activate()",Ticks) } else { tickered = Tape.substring(beg,tlen); document.Active.ASCII.value = tickered; clen--; timerID = setTimeout("ScrollL()",tTicks) } } }
function ScrollR() { if (clen >= 0) { if (clen > tlen) { document.Active.ASCII.value = ""; cblock++; timerID = setTimeout("Activate()",Ticks) } else { ini = ms(clen); tickered = ini + Tape; document.Active.ASCII.value = tickered; clen++; timerID = setTimeout("ScrollR()",Ticks) } } else { beg = 0 - clen; tickered = Tape.substring(beg,tlen); document.Active.ASCII.value = tickered; clen++; timerID = setTimeout("ScrollR()",tTicks) } }
function ScrollLC() { if (clen >= 0) { if (cent <= (clen + half)) { cblock++; timerID = setTimeout("Activate()",Wait) } else { ini = ms(clen); tickered = ini + Tape; document.Active.ASCII.value = tickered; clen++; timerID = setTimeout("ScrollLC()",Ticks) } } else { beg = 0 - clen; if (cent <= (clen + half)) { cblock++; timerID = setTimeout("Activate()",Wait) } else { tickered = Tape.substring(beg,tlen); document.Active.ASCII.value = tickered; clen++; timerID = setTimeout("ScrollLC()",tTicks) } } }
function ScrollRC() { if (clen >= 0) { if (cent >= (clen + half)) { cblock++; timerID = setTimeout("Activate()",Wait) } else { ini = ms(clen); tickered = ini + Tape; document.Active.ASCII.value = tickered; clen--; timerID = setTimeout("ScrollRC()",Ticks) } } else { beg = 0 - clen; if (cent >= (clen + half)) { cblock++; timerID = setTimeout("Activate()",Wait) } tickered = Tape.substring(beg,tlen); document.Active.ASCII.value = tickered; clen--; timerID = setTimeout("ScrollRC()",tTicks) } }
function ScrollCL() { if (clen >= 0) { ini = ms(clen); tickered = ini + Tape; document.Active.ASCII.value = tickered; clen--; timerID = setTimeout("ScrollCL()",Ticks) } else { beg = 0 - clen; if (beg >= Tape.length) { document.Active.ASCII.value = ""; cblock++; timerID = setTimeout("Activate()",Wait) } else { tickered = Tape.substring(beg,tlen); document.Active.ASCII.value = tickered; clen--; timerID = setTimeout("ScrollCL()",tTicks) } } }
function ScrollCR() { if (clen >= 0) { if (clen > tlen) { document.Active.ASCII.value = ""; cblock++; timerID = setTimeout("Activate()",Wait) } else { ini = ms(clen); tickered = ini + Tape; document.Active.ASCII.value = tickered; clen++; timerID = setTimeout("ScrollCR()",Ticks) } } else { beg = 0 - clen; tickered = Tape.substring(beg,tlen); document.Active.ASCII.value = tickered; clen++; timerID = setTimeout("ScrollCR()",tTicks) } }
function SlideL() { if (clen >= 0) { ini = ms(clen); tickered = cstr + ini + clet; document.Active.ASCII.value = tickered; clen -= 3; timerID = setTimeout("SlideL()",Ticks) } else { document.Active.ASCII.value = cstr + clet; cstr = document.Active.ASCII.value; clen = tlen - cstr.length; cpos++; clet = Tape.charAt(cpos); if (clet == " ") { cstr = cstr + " "; cpos++; clet = Tape.charAt(cpos) } if (clet == "") { cblock++; timerID = setTimeout("Activate()",Wait) } else { timerID = setTimeout("SlideL()",Ticks) } } }
function SlideLC() { if (clen <= cent - half) { ini = ms(clen); tickered = ini + clet + ib + cstr; document.Active.ASCII.value = tickered; clen += 3; iba -= 3; ib = ms(iba); timerID = setTimeout("SlideLC()",Ticks) } else { iba = cent - half; ini = ms(iba); ib = ms(iba); document.Active.ASCII.value = ini + clet + cstr; cstr = clet + cstr; clen = 0; cpos--; if (cpos >= 0) { clet = Tape.charAt(cpos); if (clet == " ") { cstr = " " + cstr; cpos--; clet = Tape.charAt(cpos) } timerID = setTimeout("SlideLC()",Ticks) } else { cblock++; timerID = setTimeout("Activate()",Wait) } } }
function SlideRC() { if (clen >= 0) { ini = ms(clen); tickered = fs + cstr + ini + clet; document.Active.ASCII.value = tickered; clen -= 3; timerID = setTimeout("SlideRC()",Ticks) } else { clen = cent + half; cstr += clet; document.Active.ASCII.value = fs + cstr; cpos++; clet = Tape.charAt(cpos); if (clet == " ") { cstr = cstr + " "; cpos++; clet = Tape.charAt(cpos) } if (clet == "") { document.Active.ASCII.value = fs + Tape; cblock++; timerID = setTimeout("Activate()",Wait) } else { timerID = setTimeout("SlideRC()",Ticks) } } }
function SlideCL() { if (clen > 0) { ini = ms(clen); tickered = ini + clet + ib + cstr; document.Active.ASCII.value = tickered; clen -= 3; iba += 3; ib = ms(iba); timerID = setTimeout("SlideCL()",Ticks) } else { iba = 0; ib = ms(iba); clen = cent - half; ini = ms(clen); document.Active.ASCII.value = ini + cstr; cstr = cstr.substring(1,Tape.length); cpos++; clet = Tape.charAt(cpos); if (clet == " ") { cstr = cstr.substring(1,Tape.length); cpos++; clet = Tape.charAt(cpos) } if (clet == "") { document.Active.ASCII.value = ""; cblock++; timerID = setTimeout("Activate()",Ticks) } else { timerID = setTimeout("SlideCL()",Ticks) } } }
function SlideCR() { if (clen <= cent + half) { ini = ms(clen); tickered = fs + cstr + ini + clet; document.Active.ASCII.value = tickered; clen += 3; timerID = setTimeout("SlideCR()",Ticks) } else { clen = 0; document.Active.ASCII.value = fs + cstr; cstr = cstr.substring(0,cstr.length - 1); cpos--; half += 1; if (cpos >= 0) { ; clet = Tape.charAt(cpos); if (clet == " ") { cstr = cstr.substring(0,cstr.length - 1); cpos--; clet = Tape.charAt(cpos) } timerID = setTimeout("SlideCR()",Ticks) } else { cblock++; timerID = setTimeout("Activate()",Ticks) } } }
function SlipR() { if (clen >= 0) { if (clen > tlen) { document.Active.ASCII.value = ""; cblock++; timerID = setTimeout("Activate()",Ticks) } else { ini = ms(clen); tickered = ini + Tape; document.Active.ASCII.value = tickered; clen++; timerID = setTimeout("SlipR()",Ticks) } } else { beg = 0 - clen; tickered = Tape.substring(beg,tlen); document.Active.ASCII.value = tickered; clen++; timerID = setTimeout("SlipR()",Ticks) } }
function SlipL() { if (clen >= 0) { ini = ms(clen); tickered = ini + Tape; document.Active.ASCII.value = tickered; clen--; timerID = setTimeout("SlipL()",Ticks) } else { beg = 0 - clen; if (beg == Tape.length) { document.Active.ASCII.value = ""; cblock++; timerID = setTimeout("Activate()",Ticks) } else { tickered = Tape.substring(beg,tlen); document.Active.ASCII.value = tickered; clen--; timerID = setTimeout("SlipL()",Ticks) } } }
function SlipLet() { if (clen < tlen) { ini = ms(clen); tickered = cstr + ini + clet; document.Active.ASCII.value = tickered; clen += 3; timerID = setTimeout("SlipLet()",Ticks) } else { clen = 0; cstr = cstr.substring(0,cstr.length - 1); cpos--; if (cpos >= 0) { ; clet = Tape.charAt(cpos); if (clet == " ") { cstr = cstr.substring(0,cstr.length - 1); cpos--; clet = Tape.charAt(cpos) } timerID = setTimeout("SlipLet()",Ticks) } else { cblock++; timerID = setTimeout("Activate()",Ticks) } } }
function Split() { if (clen >= 0) { ini = ms(clen); tickered = ini + hstr1 + ib + hstr2; document.Active.ASCII.value = tickered; clen--; iba += 2; ib = ms(iba); timerID = setTimeout("Split()",Ticks) } else { if (clen <= 0 - hstr1.length) { cblock++; timerID = setTimeout("Activate()",Ticks) } else { beg = 0 - clen; tickered = hstr1.substring(beg,tlen); document.Active.ASCII.value = tickered + ib + hstr2; clen--; iba += 2; ib = ms(iba); timerID = setTimeout("Split()",tTicks) } } }
function Merge() { if (clen >= 0) { if (clen > cent - hstr1.length) { tickered = ini + hstr1 + hstr2; document.Active.ASCII.value = tickered; cblock++; timerID = setTimeout("Activate()",Wait) } else { ini = ms(clen); tickered = ini + hstr1 + ib + hstr2; document.Active.ASCII.value = tickered; clen++; iba -= 2; ib = ms(iba); timerID = setTimeout("Merge()",Ticks) } } else { beg = 0 - clen; tickered = hstr1.substring(beg,tlen); document.Active.ASCII.value = tickered + ib + hstr2; clen++; iba -= 4; ib = ms(iba); timerID = setTimeout("Merge()",tTicks) } }
/////////////////////////////////////////////////////////////////
//# User Vars
// Number of blocks (see bottom) to be displayed.
// ***COMMON ERROR***: Make sure to set this value according to the
// number of blocks (always the last block # + 1)!
var max = 18
// Don't change this!
var blocks = new createArr(max)
// Length of textbox
// ***COMMON ERROR: If you change this or the length of the
// textbox, remember to change the other accordingly.***
var len = 50
// Number of time to loop ALL blocks (use 0 for unlimited)
var loops = 0
// If you set the number of loops, set the final messege
var end = 'End of "ActiveASCII" by Neal Kanodia.'
// Use this format for each string (starting at 0 until 1 less
// than max):
// block(#block,"Text to display","Method",#ticks,#wait)
// example: block(0,"1st block.","Scroll Left",25,0)
// ***COMMON ERROR***: If you add a block INCREASE MAX BY 1
// ***COMMON ERROR***: If you remove a block DECREASE MAX BY 1
// ***COMMON ERROR***: Check the spelling of your methods!!!
block(17,"Hola Bienvenidos a esta web","display",0,500)
block(18,"Aqui pretendemos","display center",0,500)
block(2,"Que aprendas a crearte","scroll left",25,0)
block(3,"tu propia pagina","scroll right",25,0)
block(4,"Con programas","scroll lc",25,500)
block(5,"Tutoriales y contenidos","scroll rc",25,500)
block(6,"javascripts como este","scroll cl",25,0)
block(7,"Montones de servicios","scroll cr",25,0)
block(8,"tantas y tantas cosas","slide left",25,500)
block(9,"En fin, que ya no se que poner","slide lc",25,500)
block(10,"De todas maneras","slide rc",25,500)
block(11,"te recuerdo que si esto te ABURRE","slide cl",25,0)
block(12,"TENEMOS UNA SUPER SECCION DE JUEGOS !","slide cr",25,0)
block(13,"ademas de videos de humor","slip left",25,0)
block(14,"animaciones flash","slip right",25,0)
block(15,"aaa y foro tenemos foro","slip letter",25,0)
block(16,"buuuf","display",0,500)
block(0,"ya termino","merge",25,1000)
block(1,"ya ESTA a DISFRUTARLO TODOS","split",25,0)
//End User Vars
/////////////////////////////////////////////////////////////////
// Don't change!!!
var tlen = 2.4 * len
var cent = tlen / 2.2
var clen = null
var tickered = null
var ini = null
var iloop = 0
if (loops == 0) {iloop = 1}
var cblock = 0
var timerID = null
var beg = null
var clet = null
var cstr = null
var cpos = null
var ib = null
var iba = null
var fs = null
var hstr1 = null
var hstr2 = null
<!-- end -->
</script>
<script language="JavaScript">
document.write('<form name="Active" onSubmit="0">')
document.write('<input type="text" name="ASCII" size="50">')
document.write('</form>')
Activate()
</script>
Pon un sonido o música de fondo. Solo coloca su URL
<BGSOUND SRC="sonido.mid" LOOP=none> <WIDTH=200 HEIGHT=55 AUTOSTART="true" LOOP="false" HIDDEN="true">
¿Como poner los códigos HTML en tu página web o blog?
Para hacero he creado un articulo especial, lo puedes encontrar aqui, en el esta el tutorial para los sistemas de desarrollo web mas utilizados en el mundo de habla hispana.
¿Buscabas mas que trucos y efectos basicos?
En en este sitio hay mucho mas que eso. Aquí se te muestra todo lo que puedes poner en tu web, sin importar con que programa este creada.
Los códigos básicos (como los anteriores) están pasando de moda. Ve algunos widgets o plugins para tu página web increibles.
A continuación algunos de los artículos con lo que posiblemente andes buscando.
- Chat HTML
- En este post encontraras herramientas para añadirle un chat HTML5 a tu página web totalmente responsive.
- Formulario de contacto (flotante)
- Se muestra en este otro como poner un formulario de contacto, pero de maneras mas atractivas, el cual es personalizable al cien por ciento.
- Botones para compartir
- En este aprendes a poner los famosos botones para compartir de redes sociales, algo que todo sitio web ahora debe tener.
- Caja de comentarios HTML
- Conoce como hacer e incorporar una caja de comentarios en tu blog o web fácilmente. En este articulo están todos los pasos.
- Sistema de votación por estrellas
- Como hacer que la gente valore eficazmente tu contenido, producto o servicio, eso es lo que hay en este post. Aprende a añadir a tueb un sistema de calificación.
- Apartado de posts relacionados
- En este hayaras para tener el famoso plugin de artículos relacionados automático en tu blog.
- Completo foro de discusión
- En este ultimo se conoce una gran herramienta para que puedas incorporar un foro en tu web o blog.
- Popup HTML
- Se trata de una ventana emergente de lujo que sirve para generar conversiones como la famosima captura de emails.
- Buscador propio
–
Bueno, finalmente solo espero que tanto los códigos basicos html como los “widgets” mostrados puedan ayudarte a ti y a tu página web.